We try hard to enable a “sexy” look and feel for Rich Ajax Platform (RAP) applications. However, without rounded borders and gradients you can hardly create a website that look modern. Take this dialog as an example:

It looks so much better with rounded borders on Shell, Control and with these Button gradients:

The latter screenshot has been taken from the current RAP development stream. These features were challenging to implement but we eventually came up with a solution. The interesting part is that it’s not image based. Instead of creating a bunch of images (one for every corner and side), all you have to do is define your border radius in the CSS style sheet.

How does it work?

We are using vector graphics (SVG/VML) in the browser. This works with all browsers supported by RAP (FF2+, IE6+, Safari 3.1+, etc.) without any add-ons. Check it out on our examples demo.

And how does the CSS look like? For gradients we followed the CSS syntax implemented by Webkit-based browsers as Safari and Chrome. Besides a start color and an end color, you can also define any number of intermediate steps. We only support vertical linear gradients in the first version, but this will change. By the way, we proposed to use the same syntax for styling in e4.

  background-image: gradient(
    linear, left top, left bottom,
    from( #ffffff ),
    color-stop( 48%, #f0f0f0 ),
    color-stop( 52%, #e0e0e0 ),
    to( #cccccc )
  );

For rounded borders we followed the CSS 3 syntax. You can set rounded borders using the new border-radius property (even a different radius for every corner is possible).

  border: 2px solid #005092;
  border-radius: 6px;

Both features are available in the RAP CVS and will be included in the 1.3 M1 release shipped in August.

Enjoy!

Tags: e4, rap, styling, swt, theming

e4 0.9M5 is now available for download.  One of the things that excites me about this work is the web based form editors that Boris Bokowski has been working on.  The form editors have always tried to mimic a web look and feel, but now they are using real web technology.

The e4 team has even integrated these editors with the workbench.

For a complete list of features, checkout the e4 New and Noteworthy.

Tags: e4

A webinar was just posted where Jochen Krause (EclipseSource), Kevin McGuire (IBM), Martin Oberhuber (Wind River), Steve Northover (IBM) and Ben Galbraith (Mozilla) discuss the “Eclipse 4.0″ (e4) project. If you’re interested in how the next generation Eclipse platform is shaping up, this webinar is a great place to start. If you want to dive deeper, check out the e4 wiki.

On a side note, if you’re an Eclipse committer, Kai Toedter is looking for vCards of Eclipse committers for his e4 contacts sample application. If you want to be famous, shoot him an email.

Tags: e4

It’s great to see a new milestone of e4 released (new and noteworthy)!

The major new and noteworthy item in my opinion is that XWT was included for the first time in e4:

What is XWT? XWT is a declarative widget framework that allows you to specify UI components in a declarative fashion. SWT code is generated automatically from an XML-based UI declaration. It’s kind of nice to switch between Design, Source and Java tabs!

In the end, it’s great to see progress.

Tags: e4, eclipse

Ok, it’s getting tough. Only 9 days left before EclipseCon officially starts. All contributors and committers around me are already swarming around to get the demos and presentations ready – besides fixing bugs for the upcoming M6 build. But why is everybody so excited about EclipseCon? I think the numerous talks are only one side of the coin. Personally the way more interesting part is the come-together of all people you know from bug reports, mailing lists and newsgroups. While it is nice to see each other, it often brings up great discussions about Eclipse technology – especially interesting for me: RAP and E4.

The number of BoFs this year is tremendous. If you’re developing RAP applications or planning to use RAP in the near future, you should definitly visit me and the rest of the team at the RAP BoF. As this is the first BoF for the RAP project we’re really excited to see who’s coming. If you’re planning to attend, why don’t you just add some of your ideas to the list of discussion topics? The intention of BoFs is that you have the chance to talk directly with the RAP committers and give the team the chance to see your standpoints. Take the chance to poke us for all the bugs we didn’t fix yet Or if you’re interested to see any of the long-standing feature requests to be added to the plan – no problem (at least if you have enough beer for the team)! We’re looking forward to some lively discussions – not just as part of the BoF!

Tags: bof, e4, eclipsecon, rap

Over the past week I have ignored my daughters, gave-up on work, haven’t seem my wife, and managed to create a web-enabled version of Zest.  Ok, most of what I said is lie, however, I did manage to create a web-enabled version of Zest while still spending quality time with the family (and getting some “real work” done).

How you ask? The magic of “SWT Browser Edition” in e4. Since e4 is already able to  cross compile the Draw2D examples, I thought I would take a shot at producing an e4 Graph Widget based on Zest.

public static void main(String[] args) {
     Display d = new Display();
     Shell shell = new Shell(d);
     shell.setLayout(new FillLayout());
     Graph g = new Graph(shell, SWT.NONE);
     GraphNode n1 = new GraphNode(g, SWT.NONE, "SWT");
     GraphNode n2 = new GraphNode(g, SWT.NONE, "Action Script");
     GraphNode n3 = new GraphNode(g, SWT.NONE, "Totally Awesome");
     new GraphConnection(g, SWT.NONE, n1, n2);
     new GraphConnection(g, SWT.NONE, n2, n3);
     new GraphConnection(g, SWT.NONE, n3, n1);
}

Using the SWT -> Action Script cross compiler, I was able to take the Zest widget and build an SWF file for it. I managed to create a small example.

There are a number of outstanding issues (no JFace adapters, no curved lines and some layouts are giving me grief), but it’s a start.

What do you think, should I bring this to e4?

Tags: e4, zest

For those of you who don’t know, RAP (the Rich Ajax Platform) provides the ability to run your Eclipse application on a server and have the UI served up in the browser using Ajax techniques. e4 is the next generation Eclipse platform that is targeting, amongst other things, the ability to do web UIs. Hmm, seems like there should be something in common.

Indeed! Yesterday the RAP team spent the afternoon looking at e4. First task was to check out the relevant code and setup the e4 photo demo. With that running it was time to switch out the target platform to use the RAP target platform.  Basically RAP provides alternate implementations of things like SWT and JFace. These maintain all the UI object structures on the server but with widgets that render in the browser. So putting in the RAP target substitutes these new implementations.

Moving to the RAP target resulted in quite a few compile errors but most were actually the same error in many places. For the most part alternates were substituted and in some cases, for the purposes of getting running, bits of the demo were hacked out. One of the major bits that had to be removed was the Nebula widgets–these just don’t have RAP equivalents yet. Of course, the photos in the photo demo are being displayed using these now missing widgets but that’s a different story.

So with that done, the app comes up. e4 on RAP or RAP on e4. However you like to say it.

In the end it was relatively easy once the details of how e4 starts up and works were  were understood. The result is actually too ugly to show here as the CSS styling has not been mapped onto the cool new RAP styling work. That’s a topic for another afternoon.

The goal of this afternoon adventure was to explore the space and see what the further topics of investigation might be. In that, it was a great success. Here is a short list of topics:

CSS styling — Much of the the property setting and basic styling will be easy to integrate but there appear to be some places where a graphic context is used. This will be harder. Perhaps there are some abstractions that can be done there…

RAP IEntryPoint and e4 Product/Application — Since a RAP system can have many concurrent sessions, there will be many concurrent applications.  IEntryPoint is the RAP abstraction for this. It would be good to investigate the use of the OSGi application model.

Nebula integration–This is harder.  Nebula widgets do all manner of stuff.  There has been work to do Draw2d but more is needed. In any event, that is not a critical element of e4.

Session support–Look at contributing RAP’s session support code to the parts of Eclipse that make up e4. This is likely to go a number of places but would be a very useful thing to have.

Internationalization–The extension registry and other parts of the system expect there to be just one locale. With the web there are users all over the place and they expect to see their content in their language.

Other cool stuff.  Stay tuned to this channel and post a comment if you are interested in RAP and e4 as another way of bringing your apps to the web.

Tags: e4, rap

Wow, I just saw the new and noteworthy posted for the first e4 milestone. There’s a lot of stuff there! I’m amazed that the e4 team was able to get this milestone out given that a lot of them were also working on the Eclipse 3.5M5 release.

Anyways, here are some of my favorite noteworthy items:

CSS Support for SWT

RCP Mail CSS Example

SWT Browser Edition

Heck, there’s even a basic ActionScript development environment… cross-compilation debugger magic!

If you like what you see, why not get involved with the e4 project to help shape the future of Eclipse!

Tags: e4, eclipse, swt

Yesterday I stumbled upon a pretty interesting google code project, the Google Visualization API.  The Google Visualization API enables you to expose your own data through a number of Visualization Widgets, which are made available as a service.

Here is a screenshot from the geo map widget:

Google Graph Widget

This got me thinking: Is there place for “service widgets” in the Eclipse platform (possibly in e4)? These could likely be used with RAP fairly easily, but we could also wrap these up with the browser widget and expose a Java API similar to SWT/JFace (or even an EMF model to represent the data) for rich client applications. Of course, for these to work your users would have to be connected to “the cloud”.

Thoughts?

Tags: e4, eclipse, google