Monday, March 02, 2009

Give your E4-Application a modern Look&Feel

EclipseCon is coming in about 3 weeks and I started preparing the stuff for my talks about E4 and UFaceKit.

In E4 we are trying to address some of the main pain points RCP-Application developers faced - Their application looks like Eclipse and the theming/presentation API is not flexible enough to modify all aspects of the UI (e.g. Toolbar/MenuBar, ...)!

The first step to make your application look different was that we introduced the concept of declarative styleing (CSS).

Let's take the demo E4-Photo-Demo-application as example.
This is the application without CSS:

This is the application with CSS:

But like in other aspects E4 goes further and allows you to exchange complete widgets like the application-shell, the menu and toolbar, the Stack-Folders (the standard theme uses CTabFolder) resulting in an E4-Demo-Application like this:

You want to know more about how this works and how the internals of the workbench make such things possible? Then I'd suggest to you attend the EcliseCon-talk about the modeled workbench Boris and I are delivering at EclipseCon09

But E4 goes even further! It allows you to plugin every widget-technology you want to! The internals don't care whether your application gets renderered by QT, Swing, UFaceKit you name it. So I've done that and here's my UFaceKit-Demo-Application built on top of E4:
Makeing UFaceKit a possible renderer of E4 opens the doors to all technologies supported by UFaceKit (Swing, QT, GWT, ...) and its advanced DeclartiveStyling-Support

5 comments:

Mik Kersten said...

Neat stuff Tom. The Microsoft Ribbon style UI (third screenshot) reminded me that I'm curious about the e4 strategy for the widget modernization efforts that have been coming from Microsoft and Apple. Is that a custom drawn emulation, or is it a native Ribbon? It looks like Windows 7 is making the Scenic Ribbon API, so I also posted this question on bug 90145.

Mik Kersten
CEO, http://tasktop.com/blog
Lead, http://eclipse.org/mylyn

Tom said...

Mik, its completely custom draw :-) using the excellent SWT-Ribbon from Hexapixel [1] (In had to make some small code fixes to work :-)

[1]https://bugs.eclipse.org/bugs/show_bug.cgi?id=265783

Tom said...

Just one more note Mik. I plan to create an SWT-Implementation of the UFaceKit-API using the Ribbon-stuff instead of the native SWT-Menu/Toolbar.

Mik Kersten said...

Wow, that is some pretty impressive drawing you're doing. I put it up next to a native ribbon and it's really close.

The tooltip widgets on hexapixel are looking very slick too. We've been planning to modernize the Mylyn tooltips and I've been liking the style of the Ribbon tooltips.

online generic viagra said...

Thanks for sharing such a great information with us...

Regards
Alexa