Wednesday, January 14, 2009

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:

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.

5 comments:

Anonymous said...

Try JavaFX - the best way to pimp you Java app these days

Wassim Melhem said...

Very cool. Thanks for sharing, Tom.

Tom said...

I've not completely bought into JavaFax though I'm not against it totally. I know you can do visually good looking application. Though you can write datacentric applications - which is my main business - it more looks like it is designed for multimedia applications.

My main problems in really buying in to JavaFX are:
- Why didn't they provide a programmable Java-API - I know I can programm it in plain Java but the API makes it cumbersum when not using JavaFX-Script
- I immediately loose all the good fantastic technologies from Eclipse which integrate into each other nicely (EMF+EMF-Databinding)
- I don't know but has JavaFX a declarative story to style applications

JavaFX has its place in the technology stack and there are uses cases it is good for but not if it comes to nice looking Datacentric Desktop Applications.

ETL Weather said...

Anyway to get this UFaceKit (code or binary)?

I went to the project page on Eclipse.org (http://www.eclipse.org/ufacekit/) -- there isn't much there.

Tom said...

Hi Etienne - I'm going to create a setup instruction tonight and add content to our web-page.

The sources are available from our SVN-Repository at http://dev.eclipse.org/svnroot/eclipse/org.eclipse.ufacekit.

We currently have a maven driven build which works more of less but no consumeable builds yet because we are in the middle of IP-clearance and code moving from our old repository.