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 .

Tags: google, instantiations, rap, ria, rich internet applications, swt, swt designer, visual editor, windowbuilder

A few weeks ago, my colleague Ralf Sternberg, announced that RAP supports a JQuery integration. What we still needed to do was to create an example that shows how to integrate some JQuery stuff into RAP. Yesterday I took a little time to work on it. I used the JQueryUI Carousel widget as a base. Two hours later the integration and a book store example were completed. You can see the result in the screencast below.

The special thing about this integration is that it uses the SWT Browser widget with BrowserFunctions. This makes this type of integration very lightweight and simple to develop. As I mentioned before, two hours were enough to create the example. Of course, besides JQuery you can integrate all kinds of Frameworks, Mashups and other things that are running in a browser. Ian Bull highlighted this by developing a GMap example. The cool thing about this technique is that it works with RAP (RWT) and RCP (SWT).

I made the source code publicly available via github. You can find the repository here. It would be great to see some other examples. So, please feel free to post your examples in a comment.

Tags: browser widget, eclipse, indigo, JQuery, rap, rcp, swt

Last week Wim Jongman bloged about the Nebula Oscilloscope widget. It’s just an awesome widget for monitoring activity. See Wim’s post to form an opinion yourself.

So, for me as a RAP developer, the first question I always ask myself when seeing such a cool thing is: “Will it run on RAP?”. I followed the steps Wim described to get the Oscilloscope running, changed the target to RAP, commented out one line of code and started the application. You can see the result in the screencast below.

I think the result is just awesome. It runs very smooth with almost no lags. For all of you who don’t know it yet, this is possible because we implemented the GC and published it with RAP 1.3. The updates from the server are realized via the UICallback mechanism of RAP. I think this video shows that, in the meantime, RAP became a very sophisticated technology. We are all looking forward to seeing a lot more cool things like this working with RAP.

Tags: helios, nebula, rap, swt

Two days ago was the Helios DemoCamp in Darmstadt at Deutsche Telekom.  I think it was a very successful evening with a whole bunch of good talks. Two of them are very noteworthy.

The first one was presented by Marcel Bruch. He talked about the Eclipse Code Recommenders project which he’s working on at TU Darmstadt. The basic idea behind this project is to provide a way to recommend code. He used the analogy of the Amazon online store. When you buy a book you always get a recommendation along the lines of, “People who bought this book also found this one interesting…”. The Code Recommenders does exactly the same just with code.  Watch the great screencast the Code Recommenders Team provides if you don’t want to take my word for it.

Another especially noteworthy demo for me was presented by Stefan Lay. He demo’d the Eclipse Git Team provider called EGit.  In addition to the tooling he presented Gerrit. Gerrit is an automated review tool for Git. The scenario he presented was to push some changes to a remote repository. The changes were caught by gerrit to be reviewed.   With those changes however, an automated build failed and gerrit sent an automated message that the changes couldn’t be applied because they broke the build. I think this will make the workflow much easier for code review and keeping the repository stable. The EGit project already uses Gerrit for their productive work.

To put it all in a nutshell it was a very cool DemoCamp with 120 attendees and nice buffet afterwards. At this point I want to thank Ralph Müller and the Foundation who organized a spontanous Eclipse Stammtisch after the DemoCamp. It was great to talk to all the guys individually. The bad thing about this is that the evening went by too fast. But there also a good thing. Most of those people will also attend the Eclipse Summit Europe in November and we can meet again.

Tags: democamp, eclipseRT, egit, equinox, helios, rap, rcp, swt, talks

From time to time, I’m in the situation when I want to suggest a UI change or even try to come up with a completely new UI. While I love programming, it may be easier in these situations to just “sketch” the idea instead of really getting your feet wet. As many people asked me what I use for UI sketches, I thought I should share it with you – the tool is called WireframeSketcher. It’s “just” an Eclipse plugin to create sketches pretty easily. As most of the UIs in my life are SWT-based, WireframeSketcher comes with one absolutely cool feature – turn an existing dialog into a sketch. Fire up any dialog, hit the magic “Alt+Shift+F5″ and you’re done. Is it that easy? Yes – I really love it. Here is an example of the Import Wizard which I also used in my latest blog post to further modify it with my ideas.

Not only is it easy to operate, it also has pretty good Eclipse integration and you always find the things where you expect them (eg. select and button and you can modify everything in the Properties View).

As Eclipse commiter, you can get a free licence of the plugin or you can buy the plugin from the author if you want to use it commercially. Either way, give it a try the next time you want to mock a new UI prototype.

Tags: eclipse, eclipse ui, sketch, swt, tips, ui, wireframesketcher

Here’s a nice addition to Riena’s TableRidget: you can now mark a table-row as incorrect.

This is done with an RowErrorMessageMarker. When hovering over the marked row, the corresponding error message will be shown in a tooltip.

IMarker marker = new RowErrorMessageMarker("An error message...", zorro);
tableRidget.addMarker(marker);
// to remove:
tableRidget.removeMarker(marker);

Full snippet here. This is shipping with the upcoming Riena 2.0 M6.

Tags: eclipse ui, riena, swt, tips

I spent part of today trying to debug a Linux specific issue in which wizard pages are not being shown properly.  Actually, the content of some wizard pages are not showing up at all (Bug 298805 if you’re interested).

While thinking through the problem on IRC (yes, you should be on IRC), Susan McCourt had a great idea — install the SWT Spy and see what it shows.

The SWT Spy is a small tool that allows you to place your mouse over a widget and get information about that widget, including:

1. Layout information
2. Bounds
3. Siblings
4. Parent Chain (back to the shell)

I hacked the tool a bit to add the visibility field.  The SPY is available from: http://www.eclipse.org/swt/tools.php. Once installed, you can toggle the spy using CTRL+ALT+SHIFT+”.”.

An oldie but a goodie.

Tags: swt, tips

Support for drag and drop just made it into the RAP source code repository. You can use the same API as known from SWT and thus re-use even more code when single-sourcing RCP applications.
It will be available in the M4 build. In the meanwhile you can check out the sources from CVS and explore the new functionality online (go to the List page).



There are still some things left to do, for more details see this bug. We would be very happy to gain feedback about how your existing drag and drop code works on RAP. In case something doesn’t work as expected, please drop us a line or open a bug.

Tags: eclipse, rap, Single Sourcing, swt

I am very pleased to see that the first code arrived in the RAP incubator project. The contribution consists of the very early steps towards a spread sheet component.

It is still in the proof of concept phase. The goal so far was to find out whether a spread sheet that is composed of existing widgets could work with regard to performance and usability. This seems to work out rather well. As a consequence of composing the spread sheet of existing widgets the same code runs on SWT as well.

In case you whish to play around with it or even contribute, the source code can be obtained from CVS and resides in the incubator/spreadsheet module.

Tags: rap, Single Sourcing, swt

With e4 0.9 out in the wild, we should think again about the goals e4 tries to provide. One of them was to reduce the gap between Desktop and Web – not only speaking of reusing widgets but also to enable the platform handle multi-user scenarios. While the core e4 team concentrated on eliminating bad smells like singletons, the RAP team worked on better support for single sourcing applications in general. With an experimental version of RAP which includes some features not yet in the current release, we were able to run the demo out of the box including the whole underlying infrastructure like the modeled workbench – without touching the e4 code.

If you take a look at the RAP Demos page you’ll find the e4 contacts demo running on RAP. If you want to try it out yourself or even help to contribute to this effort, take a look this wiki page. In case you’re interested what you can do with e4, be sure to participate in the e4 webinars.This week, there will be Part 2 with topics like RAP, the Compatibility layer and the flexible resources model. Looking at the questions that came up in the last RAP webinar and the first part of the E4 webinar, people seem to be very interested how e4 and RAP play together. I’ll try to answer the open questions during the webinar this week. Looking forward to a great event.

Tags: databinding, e4, rap, Single Sourcing, swt