CSS SWT Engine

TK-UI provide several CSS engine implementation which are enable to apply CSS styles to SWT widget . Please read Download section to download CSS SWT engine distribution and SWT samples.

This section explains how use CSS SWT engine with simple samples. You can find more complex samples into test folder of the org.akrogen.tkui.css.swt* distribution. There are tow ways to apply CSS styles to SWT widgets :

Selectors section describe all type of selectors that you can write with SWT widgets.

CSS SWT engines are configurables, please read CSSEngine API section for more informations.

SWT CSS engine

SWT selector

Here basic sample SWT code which apply CSS style from style sheet with selector type of SWT (on other words, class name of SWT widget are used as selector) : 
Label { 
  color:red;
} 

Text {
  background-color:green;
}
to SWT user interface composed with one Label and Text. In this sample the org.akrogen.tkui.css.swt.engine.CSSSWTEngineImpl class is used. 
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();
After executing this code, SWT window is displayed :

HTML selector

Here basic sample SWT code which apply CSS style from style sheet with selector type of HTML (on other words, HTML name of SWT widget are used as selector) : 
label { 
  color:red;
} 

input {
  background-color:green;
}
to SWT user interface composed with one Label and Text. In this sample the org.akrogen.tkui.css.swt.engine.html.CSSSWTHTMLEngineImpl class is used. 
Display display = new Display();
// Create SWT CSS Engine
CSSEngine engine = new CSSSWTHTMLEngineImpl(display);
// Parse style sheet
engine.parseStyleSheet(new StringReader(
		"label {color:red;} input {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();
After executing this code, SWT window is displayed :

Pour gérer les noms HTML en tant que selector, un mapping entre la widget SWT et le nom HTML est effectué dans la méthode getLocalName de l'instance CSSStylableElement qui wrappe la widget SWT. Voici un tableau du mapping nom HTML/widget SWT: To manage HTML name as selector, a mapping between SWT widget and HTML name is done. with getLocalName method of the CSSStylableElement instance which wrap the SWT widget. Here mapping array of the HTML name/SWT widget :

HTML name SWT widget
body org.eclipse.swt.widgets.Shell
textarea org.eclipse.swt.widgets.Text : style=SWT.MULTI
input[type=password] org.eclipse.swt.widgets.Text : style=SWT.PASSWORD
input[type=text] org.eclipse.swt.widgets.Text
input[type=radio] org.eclipse.swt.widgets.Button : style=SWT.RADIO
input[type=checkbox] org.eclipse.swt.widgets.Button : style=SWT.CHECK
input[type=button] org.eclipse.swt.widgets.Button
select org.eclipse.swt.widgets.Combo, org.eclipse.swt.custom.CCombo
label org.eclipse.swt.widgets.Label
canva org.eclipse.swt.widgets.Canvas
a org.eclipse.swt.widgets.Link
div org.eclipse.swt.widgets.Composite, org.eclipse.swt.widgets.Scrollable
tree org.eclipse.swt.widgets.Tree
listbox org.eclipse.swt.widgets.Table

Inline style

Into HTML page, it's possible to define inline style into HTML element with style attribute : 
<input type="text" 
    id="MyId" 
    style="color:red;background-color:yellow;" />
It's possible too to manage the style with Javascript like this : 
var input = document.getElementById('MyId');
input.style.color='red';
input.style.backgroundColor='yellow';
CSS SWT engine implementation is able to manage this features.

Inline style (1)

By default, style attribute is managed with setData method of SWT widget by putting CSS inline style with style key like this : 
Text text = new Text(parent, SWT.NONE);
text.setText("bla bla bla");
text.setData("style", "color:red;background-color:yellow;");
...
engine.applyStyles(shell, true);

Inline style (2)

It is possible to get a org.w3c.dom.css.CSS2Properties instance which define the whole of CSS2 properties and therefore define style to use (like Javascript ) : 
Text text = new Text(parent, SWT.NONE);
text.setText("bla bla bla");
CSSStylableElement stylableElement = (CSSStylableElement) engine.getElement(text);
CSS2Properties style = stylableElement.getStyle();
style.setColor("red");
style.setBackgroundColor("yellow");

Inline style (3)

It's possible to use parseAndApplyStyleDeclaration method of the engine like this : 
Text text = new Text(parent, SWT.NONE);
text.setText("bla bla bla");
engine.parseAndApplyStyleDeclaration(text, "color:red;");

Selectors

This section follow spécification w3c selector and adapt it for the CSS SWT engine.

Pattern matching

Pattern Meaning Described in section
* Matches any SWT widget.
E Matches any SWT widget E. E is defined with class name of the SWT widget (CSSSWTEngineImpl) or HTML name of the SWT widget (CSSSWTHTMLEngineImpl).
E F Matches any SWT widget SWT F that is a descendant of a SWT widget E (ex : JLabel into JPanel). Descendant selectors
E:focus, E:hover Matches any SWT widget during certain user actions. The dynamic pseudo-classes
E[foo="warning"] Matches any SWT widget E whose "foo" attribute value is exactly equal to "warning".. Attribute selectors
E.className Matches any SWT widget E which have class with className name. Class selectors
E#myid Matches any SWT widget which are id equals to "myid". ID selectors

Descendant selectors

Component Label { 
  color:red;
} 
Label { 
  color:green;
}

Attribute selectors

Matching attributes and attribute values

It's possible to use attributes into CSS styles with SWT. It exist several kind of attributes :

  • style attribute : this attribute allow to distinguish the CSS style of SWT Button with style=SWT.CHECK (checkbox) with SWT Button with style=SWT.RADIO (radio) : 
    Button[style='SWT.CHECK'] { 
  color:red;
} 
Button[style='SWT.RADIO'] { 
  color:green;
}
  • getter attribute type : this type allow to retrieve with introspection the value of a SWT widget getter. For instance SWT Text has getEditable method which return true if the widget is editable. It's possible to write style like this : 
    Text[editable=true] { 
  color:red;
}
  • custom attribute type : this type d'attribut allow to manage attributes values with setData method of SWT widget. If you define setData like this : 
    Text text = ... 
text.setData("foo", "warning");
    You can write CSS style like this : 
    Text[foo="warning"] { 
  color:red;
}

Class selectors

By default class information is managed with setData method of SWT widget : 

.redColor { 
  color:red;
} 

.greenColor {
  color:green;
}
Label label = new Label(parent, SWT.NONE);
label.setData("class", "redClass");

ID selectors

By default id information is managed with setData method of SWT widget : 
Label#MyId { 
  color:red;
} 

Label {
  color:green;
}
Label label = new Label(parent, SWT.NONE);
label.setData("id", "MyId");

Pseudo-classes

The dynamic pseudo-classes : :hover, :active, and :focus 

Text:focus { 
  color:red;
} 

Text:hover {
  color:green;
}