An open source visual editor for Rich Internet Applications – the Eclipse way

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.

Please note: since the time of this post, RAP has been rebranded as the Remote Application Platform. Find out more about RAP here.

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 ;).

  • Posted at 9:36 am, February 22, 2011

    very nice 🙂 indeed

  • Posted at 11:31 am, February 22, 2011

    I tried the WindowsBuilder a few times bigest problem is that you had to check the code for functions that were not supported by the SWT api of RAP in comparican. I hope eventualy the SWT application in RAP is going to be fully compatible but indeed its a great way to make a UI quck :).

  • Rino
    Posted at 12:34 pm, February 22, 2011

    He thanks, that really works like a charm!
    I wonder if it works for all gui components in the designer (when building a rap app)

  • Posted at 1:26 pm, February 22, 2011


  • Mark
    Posted at 3:58 pm, February 22, 2011

    I have had the same experience as Martijn. I have not used recent versions of RAP (2+years now) but you do need to be cautious when single sourcing and developing SWT “screens” first. Other than that, this has worked for years. I can’t believe “Google” would not have known.

  • Eric Clayberg - Google
    Posted at 4:29 am, February 23, 2011

    Actually, we have been aware that WindowBuilder could be used to build RAP applications for some time since we have had a few users report doing so for the last couple of years. As stated in one of the earlier comments, it isn’t perfect as you do have to be careful about some of the SWT/RAP mismatches that WB does not track itself. It has been on our list for a long time to add some tweaks that would turn WB into a real “RAP Designer”. With the tool moving to open source, this would be a fairly easy subproject for someone to do. BTW, WB actually supports quite a few discreet toolkits at this point in addition to RAP…SWT/RCP, eRCP, XWT, Swing, GWT (Java) and GWT (XML/UiBinder). We would love to see this list expand to other Java and XML based toolkits and even to other languages beyond Java and XML.

  • Posted at 11:52 am, February 25, 2011

    @Eric This would be a great feature for the RAP project and we would be happy to collaborate. If you already have some of those necessary tweaks in mind, would it make sense to open a summary bug for improved RAP support? If you do, feel free to CC me and to file sub-bugs against RAP, if we can help with something. You say that it would be a fairly easy subproject – could that also be a candidate for Google Summer of Code?

  • Mike Haney
    Posted at 3:01 am, April 11, 2011

    I had been eyeing the WB for years, but never had the funds, so I downloaded all the old Instantiations tools when they first moved to Google. I’ve played with the WB a bit and it is very nice, but we are just now starting a full-blown project where we will be using it and RAP (this is our first RAP/RCP single source project, but we’ve done lots of RCP projects).

    Anyway, I seem to recall there also being a code auditing tool among the Google-acquired packages – CodePro I think it was? I haven’t had time to check it out, but it seems like that might be a quick and dirty solution to hold everyone over until more RAP-centric enhancements are added to WB.

    In other words, most code auditing tools let you add your own audit rules – it seems like it would be pretty easy for someone to come up with a set of custom rules to check for usage of SWT/RCP API’s that aren’t supported by RAP. Heck, this would be useful in any case, especially for teams like ours that are transitioning from RCP to RCP/RAP.