An open source visual editor for Rich Internet Applications – the Eclipse way
A few weeks ago Google announced their WindowBuilder contribution to the Eclipse Foundation. The WindowBuilder was originally created by Instantiations and moved to Google after they swallowed Instantiations back in 2010. Anyway, the WindowBuilder is a first class visual editor for creating UIs and will be maintained by Google. It contains an Editor for three UI toolkits: GWT, Swing and SWT. And the coolest thing about the WindowBuilder is that it’s completely open source because it’s an Eclipse project now.
So, you probably know that there is a Rich Internet Application technology under the umbrella of Eclipse too. It’s called Rich Ajax Platform (RAP). RAP provides the SWT API which is also used within Eclipse. As a result, theoretically it should be no problem to use the WindowBuilder’s SWT Designer to create RAP applications and with it a Rich Internet Application. Today I found some time to check it out and I’m happy to say that it works like a charm.
All I had to do was create an Eclipse Plug-In project, change the dependency from org.eclipse.ui to org.eclipse.rap.ui and I could start designing my UI.
On the screenshot above you can see my little experiment. It’s an SWT Shell with a group box and some TabItems filled with random Controls. One nice feature of the SWT Designer is that it provides a preview of the UI. So, the UI will look very similar to the one on my Mac below.
The next step after designing this UI (I know it’s really a masterful work ;)) was to create a RAP launch configuration that would start the application in a browser. And poof, there it was: a RAP application completely created with the WindowBuilder.
I don’t know if the Google guys know this, but their WindowBuilder actually supports 4 UI toolkits. The three mentioned above and RWT, the SWT port for RAP.
To try it yourself, I recommend that you download the latest Eclipse package containing RAP from here. After installing you can use the WindowBuilder’s software site to install it into your IDE. You can use my example project which already contains a launch configuration (don’t forget to switch your target before launching.)
Have fun clicking the UI together ;).