CSS Engine

TK-UI provides multiple CSS Engine implementations in order to apply CSS styles on different objects, such as Swing components , SWT widgets and even XML elements . Here are some higlights of the TkUI CSS engine:

  • CSS stylesheets are parsed using w3c SAC parsers . The engine cas thus be configured to use an alternative parser implementation, such as batik, flute or easystate (plus others).
  • the CSS Engine uses w3c CSS DOM structures such as CSSStyleSheet to hold theCSS Rules created by the SAC parser.
  • There are many implementations for the CSS Engine:
    • Swing/CSS Engine : a CSS Engine capable of applying CSS styles on Swing components. Look here for an example.
    • SWT/CSS Engine : a CSS Engine capable of applying CSS styles on SWT widgets. Look here for an example.
    • DOM : a CSS Engine capable of modifying an XML DOM based on rules defined in CSS Stylesheets.
  • These different CSS Engines support the majority of basic CSS2 properties, such as color, background-color, etc. for more details, you may consult the Supported CSS properties .
  • The CSS Engine may be customized :
    • to handle selectors like :
      • widget class name : JTextField {color:red};
      • HTML name : input[type='text'] {color:red};
    • Define your own CSS properties .

CSS Editor Example

Below is a screenshot of the example: CSS Editor with SWT . This example shows the CSS Engine functionnalities.

  • Styles are applied at runtime. Thus, the CSS Engine resets the widgets original styles before applying new ones.

SWT Example

Below is a basic example to show how to apply CSS styles like these :
Label { 
  color:red;
} 

Text {
  background-color:green;
}
on SWT widgets (a Text and a Label)
Display display = new Display();
// Create SWT CSS Engine
CSSEngine engine = new CSSSWTEngineImpl(display);
// Parse style sheet
engine.parseStyleSheet(new StringReader(
		"Label {color:red;} Text {background-color:green;}"));

/*--- Start  UI SWT ---*/
Shell shell = new Shell(display, SWT.SHELL_TRIM);
FillLayout layout = new FillLayout();
shell.setLayout(layout);

Composite panel1 = new Composite(shell, SWT.NONE);
panel1.setLayout(new FillLayout());

// Label
Label label1 = new Label(panel1, SWT.NONE);
label1.setText("Label 0");

// Text
Text text1 = new Text(panel1, SWT.NONE);
text1.setText("bla bla bla...");

/*---  End UI SWT ---*/

// Apply Styles
engine.applyStyles(shell, true);

shell.pack();
shell.open();

while (!shell.isDisposed()) {
	if (!display.readAndDispatch())
		display.sleep();
}

display.dispose();
The execution of this example looks like :

For more details, you may consult the SWT/CSS Engine section.

Swing Example

Below is a basic example to show how to apply CSS styles like these :
JLabel { 
  color:red;
} 

JTextField {
  background-color:green;
}
on Swing components (a Label and a Textfield)
// Create Swing CSS Engine
CSSEngine engine = new CSSSwingEngineImpl();
// Parse style sheet
engine.parseStyleSheet(new StringReader(
	"JLabel {color:red;} JTextField {background-color:green;}"));

/*---   Start UI Swing ---*/
JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JPanel panel = new JPanel();
frame.getContentPane().add(panel);

// Label
JLabel label1 = new JLabel();
label1.setText("Label 0");
panel.add(label1);

// Text
JTextField text1 = new JTextField();
text1.setText("bla bla bla...");
panel.add(text1);

/*---   End UI Swing  ---*/

// Apply Styles
engine.applyStyles(frame, true);

frame.pack();
frame.setVisible(true);
The execution of this example looks like :

For more details, you may consult the Swing/CSS Engine section.

CSS Engine support

Properties

Here is a summary table listing all the CSS properties supported so far by the different CSS Engine implementations. The SWT and Swing columns indicate wether the corresponding implementation supports the property or not :

Background :

CSS version Property Swing SWT Description
CSS1 background Yes Yes
CSS1 background-attachment No No
CSS1 background-color Yes Yes You can use gradient to manage gradient colors.
CSS1 background-image Yes Yes
CSS1 background-position No No
CSS1 background-repeat No No

Border : TODO

Classification :

CSS version Property Swing SWT Description
CSS1 clear No No
CSS2 cursor Yes Yes
CSS1 display No No
CSS1 float No No
CSS2 position No No
CSS2 visibility Yes Yes

Dimension : TODO

Font :

CSS version Property Swing SWT Description
CSS1 font Yes Yes
CSS1 font-family Yes Yes
CSS1 font-size Yes Yes
CSS2 font-size-adjust No No
CSS2 font-stretch No No
CSS1 font-style Yes Yes
CSS1 font-variant No No
CSS1 font-weight Yes Yes Only normal and bold supported.

Generated Content : TODO

List and Marker : TODO

Margin : TODO

Outlines : TODO

Padding : TODO

Positioning : TODO

Table : TODO

Text :

CSS version Property Swing SWT Description
CSS1 color Yes Yes
CSS2 direction No No
CSS1 line-height No No
CSS1 letter-spacing No No
CSS1 text-align No No
CSS1 text-decoration No No
CSS1 text-indent No No
CSS1 text-shadow No No
CSS1 text-transform Yes Yes doesn't work with SWT Text and Swing JTextComponent
CSS1 unicode-bidi No No
CSS1 white-space No No
CSS1 word-spacing No No

Pseudo-classes :

CSS version Property Swing SWT Description
CSS1 :active No No
CSS2 :focus Yes yes
CSS1 :hover Yes Yes
CSS1 :link No No
CSS1 :visited No No
CSS2 :first-child No No
CSS2 :lang No No

Pseudo-elements : TODO