Difference between revisions of "E4/CSS"

Revision as of 07:57, 12 February 2016

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. Property values are mapped to changes to SWT widgets, such as fonts and colors. The following CSS selector formats are supported:

• Element name: SWT widget class is used instead of HTML element type
• CSS ID: assignable from Java
• CSS classname: assignable from Java
• Pseudo selector: some SWT widget states are captured in pseudo selectors (e.g. Button:checked)
• widget data: the key elements are available as attributes and the values as data (e.g., a widget where widget.setData("foo", "bar") will be matched by *[foo='bar'])
• widget style bits: the style bits (normally passed through the constructor) are available through the style attribute (e.g., Button[style~='SWT.CHECK']

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.

For information on how CSS will be used to create a new visual style for the e4 workbench, see E4/CSS/Visual Design

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

Using CSS in Eclipse 3.6

The CSS Theme Engine can be used in Eclipse 3.6. See the example "org.eclipse.e4.ui.examples.css.rcp" on GitHub.