CSS and E4 Application Platform

One of the main goals of E4 when it was started was to plug-ins easy and to provide better control over the look and feel of applications.  The approach to achieve the latter is to use CSS to provide the look and feel of an application, and to separate UI design from implementation details.

SWT is a good candidate for CSS styling since there is a strong correlation between SWT and HTML:

• SWT interfaces are hierarchical, with components nested within other components, just like HTML
• Components have classes which can be used as selectors, just like mark-up tags in HTML

SWT components can be selected in CSS using the following:

• Based on ID and class, which can be defaults or specified programmatically
• Using compound selectors
• Child selectors (e.g., "all text widgets within a particular composite")
• Descendant selector
• Attributes (exact and partial value)
• Pseudo classes, such as dialogs or windows

A few utilities are available to help with the development of CSS for an application:

• CSS Spy, similar to Plug-in spy, can be used to test selectors, navigate all UI elements in a tree, see the effective CSS for a widget, and modify the styling of a widget on the fly
• CSS Scratch Pad is used for writing new CSS rules on the fly and seeing the result with a single click.

There is support for custom properties used in CSS, and extension points are available for further customisations.  IDs can be set on widgets, then easily referred to within CSS without having to specify a complicated selector.

A few things to be careful with in the current implementation:

• Certain widgets do things differently, so different approaches to styling are necessary (e.g., background modes)
• Have to be careful when specifying selectors so that other parts of an application are not styled by accident
• No border style in CSS
• No variables or inheritance in CSS (though there are other utilities that can faciliate this)
• Label providers will need custom properties to be set for styling
• Only pixels right now

Making good UIs is hard, and I think this is a good approach that will make it easier to experiment with different layouts and styles without having to continuously restart an application to see the effect of UI changes.  Hopefully more improvements are made in the label provider front as well as support for adding styling to custom components (i.e., custom drawing, such as Draw2d/GEF graphs).