Moteur CSS

TK-UI fournit plusieurs implémentations de moteurs CSS qui permettent d'appliquer des styles CSS sur des Objets comme des components Swing , des widgets SWT , des élements XML . Voici les spécificités des moteurs CSS de TK-UI :

  • le parsing des feuilles de styles CSS s'effectuent à l'aide d'un parser w3c SAC . Il y a donc possibilité de configurer le moteur de CSS pour choisir l'implémentation du parser SAC comme celle de batik, flute ou easystate (ou autres).
  • Le moteur CSS utilise les structures w3c CSS DOM comme la structure CSSStyleSheet qui stocke les règles CSS CSSRule construitent lors du parsing avec SAC .
  • Il existe plusieurs implémentation de moteur CSS :
    • moteur Swing/CSS : moteur CSS capable d'appliquer des styles sur des components Swing. Vous pouvez trouver un exemple ici .
    • moteur SWT/CSS : moteur CSS capable d'appliquer des styles sur des widgets SWT. Vous pouvez trouver un exemple ici .
    • DOM : moteur CSS capable de modifier un DOM XML en fonction des régles CSS définies dans les feuilles de styles.
  • Les moteurs CSS supportent la plupart des propriétés CSS2 basique comme color, background-color.... Pour plus d'information, vous pouvez consulter le tableau des propriétés CSS supportées .
  • Personnalisation du moteur CSS comme :
    • Gerer le noms des selectors comme :
      • nom de la classe de la widget : JTextField {color:red};
      • nom HTML : input[type='text'] {color:red};
    • Ajouter ses propres propriétés CSS .

Exemple CSS Editor

Voici une copie d'écran de l'example CSS Editor avec SWT . Cet exemple permet de mettre en évidence les fonctionnalités du moteur CSS SWT.

Cette example permet de mettre en évidence les fonctionnalités du moteur CSS :
  • appliquer des styles CSS au runtime. Autrement dit le moteur CSS reinitialise le styles des widgets avec leur style par defaut avant d'appliquer un nouveau style.

Exemple SWT

Voici un exemple basique de code SWT qui permet d'appliquer la feuille de style CSS : 
Label { 
  color:red;
} 

Text {
  background-color:green;
}
à une interface SWT constituée d'un Label et Text : 
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 :

Pour plus d'information veuillez vous reporter à la section moteur SWT/CSS .

Exemple Swing

Voici un exemple basique de code Swing qui permet d'appliquer la feuille de style CSS : 
JLabel { 
  color:red;
} 

JTextField {
  background-color:green;
}
à une interface Swing constituée d'un JLabel et JTextField : 
// 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);
Apres éxécution de ce code, la fenêtre Swing s'affiche :

Pour plus d'information veuillez vous reporter à la section moteur Swing/CSS .

CSS Engine support

Properties

Voici un tableau récapiltatif qui liste les propriétés CSS supportés par la version courante des implemenatation des moteurs CSS. Les colonnes Swing et SWT indique si l'implémentation du moteur CSS est capable de supporter les propriétés CSS :

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