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.

8 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.

Etienne 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.

mygamebest said...

Lantern FFXIV GIL hanging up high, singing Wow Power Leveling indistinct indistinct, ambiguous buy wow gold voice aion kinah of an endless supply, Yan Yi extremely coquettish woman, the endless, is indeed maple story mesos the ancient aion power leveling red-light district, this in no way inferior to the modern dofus kamas scene.

Fei Zhuge eyes looked ffxi gil slightly greedy, the immediate metin2 yang exposure of the Courtesan clothes woman, see their own wow gold winks straight throw, breast Luanhuang, d.m.z. some color eve isk greedy, so that one knight online gold side of the purple spirit companions men stare at him, in last chaos gold the He had a rom gold waist-twisting, painful grimace atlantica gold in pain, he looked a purple Ling said: "do pinch me?"

sister said...

Such kind of articl is our need , it can give us help from different aspect for different people . after reading this article , I learn a mount of knowkedge increase my power , my families and I all like you article ,reading you article is our best love. May be you are Sports fans? Do you like NFL jerseys or Puma Shoes , Ecco shoes , Nike Sneakers ,these have the high quality,low price,professional service,Just For You if you like.Thank you again for writing this article!

xiamenb2c02 said...

Top quality of ecco shoes are developed for discerning customers.Enjoy a great selection of newest style.discount ecco shoes on sale,free shipping,110% price guarantee.Top quality of ecco shoes is your best chooice for daily life and working,sport,and so on.And hot sale now winter Boots .fashion on the outside,warm on the inside.