Tutorial of J2S in Eclipse (5): How to Use org.eclipse.swt.* -- Tour to UI

Zhou Renjian
Feb 13, 2006

This article demostrates the ways of developing web UI through Java and J2S Pacemaker. The UI is mainly of org.eclipse.swt.* API. After this article, you may find a fast way to develop web application.


Please read previous tutorials:

And you should also install J2S version 0.4.0 or later. Please visit Download page for more details.

Setup SWT environment

First create a Java project with source folder "src" and also with "Standard Widget Tookit (SWT)" library supported. Then configure that project as Java2Script project by enable Java2Script compiler:
Java2Script Builder Property Page
Make sure that you select the pattern "SWT". Or you make custom the environment, if you know about which library you should use.

First SWT snippets

In this tutorial, I do not write example but steal SWT Snippets from http://www.eclipse.org/swt/snippets/.

I suppose that you know how to copy and paste those snippets into the project and run them as SWT applications. You can aslo run those snippets as Java2Script's SWT application the same way of running as SWT applications: Right click on those Snippet*, and choose "Run as ..." with "Java2Script Application".

The first snippet is Snippet1:
SWT Snippet1: Hello SWT World
You can view this example's online demo here.

For Safari Reader: As far as I tested (Thanks Snugtech for providing a Mac environment, so I can fixed some bugs on Safari), "Snippet1" can be viewed in Safari. But other SWT snippets (e.g. test.swt.designer.HiShell) fail in Safari. I have no Mac environment to make tests and debugging on Safari browser, so helps are appreciated to identify the bugs! The slowness of debugging over VNC on Snugtech's Mac Safari always hang the connections before I can reach the bugged lines. Help! Contact me if you (Safari user) would like to help.

I will spend some seconds explain the Snippet1. Here is the source of Snippet1:

 1. package org.eclipse.swt.snippets;
 2. import org.eclipse.swt.widgets.*;
 3. public class Snippet1 {
 4. public static void main (String [] args) {
 5. 	Display display = new Display ();
 6. 	Shell shell = new Shell(display);
 7. 	shell.open ();
 8. 	while (!shell.isDisposed ()) {
 9. 		if (!display.readAndDispatch ()) display.sleep ();
10. 	}
11. 	display.dispose ();
12. }
13. }
Line 8-10 will be waiting for user input. Line 11 won't be reached until user close the window. But for Java2Script SWT. The looping "while" won't block! Line 11 will be reached immediately when Snippet1.main () is called. Why? As running Java2Script in browser, the looping of "while" will waste all the CPU resource. The JavaScript code is unable to call the system's wait function. So the "while" loop will be broken when display.readAndDispatch () is executed. And the inner window will stay without closing but with status of "disposed"!.

So you find the thing that is really different from the Java SWT! And this is the main difference of Java2Script SWT and Java SWT. And this is also the differences of Synchronous Programming and Asynchronous Programming. And this is also differences of web client application and desktop client application.

As the difference of Asynchronous Programming and formal programming existed, some modification of the source or redesign are needed.

I think the pattern of Asynchronous Programming is still developing, stay tunned and keep your eyes wide-opened over the Internet.

More SWT snippets

The Snippet172 is about GridLayout on Buttons:
SWT Snippet172: GridLayout
You can view this example's online demo here.

The Snippet8 is about loading Tree lazily:
SWT Snippet8: Creating Lazy Tree
You can view this example's online demo here.

The Snippet19 is about VerifyListener on Text. This snippet shows that only digits can be typed into the Text widget:
SWT Snippet19: VerifyListener on Text
You can view this example's online demo here.

More examples can be found from http://www.eclipse.org/swt/snippets/. Or you can take a tour of all supported converted SWT snippets from this site.

One thing you should know if you are going to try the existed SWT Snippets: the JavaScript version of SWT which Java2Script Pacemaker is on the way to providing, won't be 100%-compatiable with org.eclipse.swt.* API. To be about 90% compatiable is already a challenge. But to be about 85% compatiable is already acceptable as most SWT client application use only about those common 75% of APIs.

Then, how can you tell which API is already implemented by Java2Script SWT library? Currently, you can download the source of Java2Script Pacemaker and then make your project relied on project of "net.sf.j2s.java.org.eclipse.swt" not the "Standard Widget Toolkit (SWT)" library. Then those yet-unimplmented API method will be marked as error. In the coming days, Java2Script will provide a total compatiability table of SWT API. Stay tunned with Java2Script Pacemaker.

Developing SWT applications using existed visual tools

As Java2Script's SWT is org.eclipse.swt.* API-compatiable, existed SWT visual tools can be reused! By using those visual tools you will develop you web application much faster by the benefit of open source.

For SWT visual tools, you can choose the free Eclipse-based Visual Editor, or you can choose the commercial SWT Designer. Here follows the examples of these two tools.

Visual Editor's XYLayoutButtons example:
Screenshot of J2S SWT with Visual Editor
SWT XYLayout by Visual Editor
You can view this example's online demo here.

SWT Designer's HiShell example:
Screenshot of J2S SWT with SWT Designer Example by SWT Designer
You can view this example's online demo here.

Thought deep under reusing

Why some other web UI libraries are well-known but not well-spread, even they are very cool with lots of new functions? I think the integrated developing environment or tools are important factors. Once there are tools (especially those free tools, such as Eclipse), user would like to adopt the library. So, I think, now Java2Script Pacemaker has its advance that it has lots of existed tools (Eclipse, JDT, Visual Editor, SWT-Designer, ...) which will help user developing their application as they need.

Reusing is not only about reusing existed codes, but reusing existed tools and framework may be the same important. And once I wrote a blog Inside Java2Script: Reusing, which said something more about reusing.

Followed articles:

Tutorial of J2S in Eclipse (6): How to Use ajax.* -- A Simple RSS Reader


Down the net.sf.j2s.swt.snippets project files (zip) (178k)

Blog discussion

Have problems while reading through these articles? Or find some errors between the words? Or have some ideas on the Java2Script technology? Please make comments or discussions here in the blog.

About the author

Zhou Renjian: Initial contributor of Java2Script.