CSS engine SWT

TK-UI fournit des implémentations de moteurs CSS qui sont capables d'appliquer des styles CSS à des widgets SWT . Veuillez vous reporter à la section Téléchargement pour télécharger le distribuable du moteur CSS SWT et ses examples.

Cette section explique comment utiliser les moteurs CSS SWT à travers d'exemples simples. Vous pourrez trouvez des exemples plus complexes dans le répertoire test du distribuable org.akrogen.tkui.css.swt* . Il existe deux manières d'appliquer des styles CSS à des widgets SWT :

La section Selectors permet de décrire tous les types de selectors que l'on peut écrire avec des widgets SWT.

Les moteurs CSS SWT sont configurables, veuillez vous reporter à la section CSSEngine API pour plus d'informations.

SWT CSS engine

SWT selector

Voici un exemple basique de code SWT qui permet d'appliquer la feuille de style CSS avec les sectors de type SWT (autrement dit les noms des classes des widgets SWT sont ici utilisés en tant que selector) : 
Label { 
  color:red;
} 

Text {
  background-color:green;
}
à une interface SWT constituée d'un Label et Text. Dans cet exemple la classe org.akrogen.tkui.css.swt.engine.CSSSWTEngineImpl est utilisée. 
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();
Apres éxécution de ce code, la fenêtre SWT s'affiche :

HTML selector

Voici un exemple basique de code SWT qui permet d'appliquer la feuille de style CSS avec les selectors de type HTML (autrement dit les noms HTML sont ici utilisés en tant que selector) : 
label { 
  color:red;
} 

input {
  background-color:green;
}
à une interface SWT constituée d'un Label et Text. Dans cet exemple la classe org.akrogen.tkui.css.swt.engine.html.CSSSWTHTMLEngineImpl est utilisée. 
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();
Apres éxécution de ce code, la fenêtre SWT s'affiche :

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:

Nom HTML Widget SWT
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

Dans les pages WEB HTML, il est possible de définir des styles inlines sur des elements HTML à l'aide de l'attribut style : 
<input type="text" 
    id="MyId" 
    style="color:red;background-color:yellow;" />
Il est aussi possible de gérer le style en Javascript comme ceci : 
var input = document.getElementById('MyId');
input.style.color='red';
input.style.backgroundColor='yellow';
L'implémentation du moteur CSS SWT est capable de gérer ce même type de problématique.

Inline style (1)

Par défaut en SWT, l'attribut style est géré à l'aide de la méthode setData en mettant le style CSS inline avec la clé style , comme ceci : 
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)

Il est possible de récupérer une instance org.w3c.dom.css.CSS2Properties qui definit tous les getters/setters des propriétés CSS2 et ensuite de definir les styles à utiliser (comme en 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)

Enfin il est possible d'utiliser la méthode parseAndApplyStyleDeclaration de engine comme ceci : 
Text text = new Text(parent, SWT.NONE);
text.setText("bla bla bla");
engine.parseAndApplyStyleDeclaration(text, "color:red;");

Selectors

Cette section reprend les spécification w3c selector et l'adapte au moteur CSS SWT.

Pattern matching

Pattern Description Décrit dans la section
* s'applique à n'importe quelle widget SWT.
E s'applique à n'importe quelle widget SWT E. E est défini par le nom de la classe SWT (CSSSWTEngineImpl) ou le nom HTML de la widget (CSSSWTHTMLEngineImpl).
E F s'applique à n'importe quelle widget SWT F qui est descendant d'une widget E (ex : Label contenu dans un Composite). Descendant selectors
E:focus, E:hover s'applique à n'importe quelle widget SWT durant certaines actions utilisateur. The dynamic pseudo-classes
E[foo="warning"] s'applique à n'importe quelle widget SWT E dont l'attribut "foo" à exactement la valeur "warning"). Attribute selectors
E.className s'applique à n'importe quelle widget SWT E qui ont class de nom className. Class selectors
E#myid s'applique à n'importe quelle widget SWT qui ont un id égale à "myid". ID selectors

Descendant selectors

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

Attribute selectors

Matching attributes and attribute values

Il est possible d'utiliser des attributs dans les styles CSS avec SWT. Il existe plusieurs type d'attribut :

  • attribut style : cet attribut permet par exemple de distinguer le style CSS à appliquer sur une widget SWT Button avec style=SWT.CHECK (checkbox) avec une widget SWT Button avec style=SWT.RADIO (radio) : 
    Button[style='SWT.CHECK'] { 
  color:red;
} 
Button[style='SWT.RADIO'] { 
  color:green;
}
  • attribut de type getter : ce type d'attribut permet de retrouver par introspection la valeur d'un getter d'une widget SWT. Par exemple la widget SWT Text possède une méthode getEditable qui retourne true si la widget est éditable. Il est possible d'écrire un style comme ceci : 
    Text[editable=true] { 
  color:red;
}
  • attribut de type custom : ce type d'attribut permet de gérer ses valeurs d'attributs à l'aide de la méthode setData de la widget SWT. Si on définit le setData comme ceci : 
    Text text = ... 
text.setData("foo", "warning");
    On peut écrire un style comme ceci : 
    Text[foo="warning"] { 
  color:red;
}

Class selectors

Par défaut l'information class est gérée avec la méthode setData de la widget SWT : 

.redColor { 
  color:red;
} 

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

ID selectors

Par défaut l'information id est gérée avec la méthode setData de la widget SWT : 
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;
}