E4/CSS

Overview

The new CSS declarative styling support provides developers with the flexibility of styling their user interface based on a set of properties defined within a CSS style sheet. Note that while the support for SWT widgets is the primary focus of the current developers that are working on the CSS code, the core engine is headless and can be used to "style" other things such as for applying arbitrary properties to a model.

Sample

The sample code below creates a simple Label within a Shell but the Label's foreground colour is styled to a blue colour by the CSS engine.

Display display = new Display();
Shell shell = new Shell();
shell.setLayout(new GridLayout());
 
Label label = new Label(shell, SWT.LEAD);
label.setText("Hello world!");
label.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
 
CSSEngine engine = new CSSSWTEngineImpl(display);
engine.parseStyleSheet(new StringReader("Label { color: blue }"));
engine.setErrorHandler(new CSSErrorHandler() {
  public void error(Exception e) {
    e.printStackTrace();
  }
});
// applying styles to the child nodes means that the engine
// should recurse downwards, in this example, the engine
// should style the children of the Shell
engine.applyStyles(shell, /* applyStylesToChildNodes */ true);
 
shell.setSize(400, 300);
shell.open();
 
while (!shell.isDisposed()) {
  if (!display.readAndDispatch()) {
    display.sleep();
  }
}
display.dispose();

SWT Mapping

CSS style sheets can be used to modify SWT widget properties. There is a table showing the mapping between CSS properties and SWT widget calls.

Customize

• Add Selection
• Add Styleable Property