Pimp your application L&F with UFaceKit

Does your application look like this or hopefully a bit better than this really ugly example?

Making applications look nice and still not cluttering your code with these theming informations is something not provided out of the box by Eclipse. Still the situation is changing since the E4-Team is working on "native" SWT-CSS integration (Kevin McGuire and Kai Tödter) - if I'm not mistaken the code should in theory also work in 3.x.

But besides E4 there's another project called UFaceKit which provides a high-level widget-toolkit API (the application above is written with UFaceKit in about ~250 Lines of code) and part of this high-level abstraction is direct support for Declarative-Styleing.

Let's at first take a look at the above application. I've split it into 3 Classes:

• Workbench.java: Creates the workbench and the TabFolder
  
  


• ContactsPart.java: Creates the Content shown in the Contacts-TabItem
  
  


• DetailsPart.java: Creates the Content shown in the Details-TabItem
  
  

When coding with UFaceKit and you choose to use the SWT-Implementation (we also provide Swing and QT though SWT is the most stable and feature rich) you get the native platform L&F (as you see above) but the application is not really visually appealing.

If you don't have support for declarative styling you'd now have to clutter your code with themeing informations (e.g. setting background-colors, ...) and your code is soon getting unmaintainable. The Web-Guys already found this out for a while and invented CascadingStyleSheets (CSS). So why not learning from them and bring CSS (I more like the term Declarative-Styleing) to the world of Java-Desktops.

As mentionned before the E4-Team is working on CSS support and so does UFaceKit but this is not the only thing. UFaceKit abstracts styling support and you can plug-in your own declarative syntax. Out of the box we support:

• CSS: Like you know it from Web-Development. We currently don't support all features from CSS2 but only the most important ones


• USML: UFaceKitStylingMarkupLanguage is a very simply XML-Definition for css-like styles which has the adavantage that it doesn't add any dependencies like CSS-Support does

As state we don't suppport all features CSS2 defines but a subset of the most important things:

• ID-Definitions like #myelement { }


• Class-Definitions like .mylabel { }


• Element-Definitions like UILabel { }


• Support for pseudo-Attributes like :hover, :focus


• Support for attribute-selectors like .mylabel[@value >= 10]

Let's see what we can achieve by adding this styling support our application.


Amazing isn't it? No single line of application code has changed between those screenshots! As you might noticed I've used Kai Tödters E4-Example application as master and the data is backed up in XMI useing the EMF-Toolchain.

What can you expect in future from UFaceKit:

• Working on better support for Swing (many Styling things are missing)


• Working on better support for QT (some styling and control things are missing)


• Finishing implementation of current API functions


• Adding JUnit-Test, ...


• Declarative Syntax to describe and visual design your UI using EMF


• ...

As you see there's much work that needs to be done and if you are interested in helping out you are more than welcome.