12
mai
2008
Moteur CSS pour Swing et SWT
mai
2008
Un article de azerr
TK-UI utilise en interne un moteur CSS capable d’appliquer des styles CSS a des widgets comme dans le monde WEB.
Il est possible d’utiliser ces moteurs CSS independamment de TK-UI avec du pur SWT à l’aide du moteur CSS SWT ou du pur Swing à l’aide du moteur CSS Swing. Ces moteurs implémente une interface CSSEngine qui propose plusieurs méthodes pour charger des styles, appliquer des styles…
Vous pouvez telechargez les distribution CSS engine ici.
Voici un exemple basique de code Swing qui permet d’appliquer la feuille de style CSS :
JLabel {
color:red;
}
JTextField {
background-color:green;
}
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);
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 :
7 Commentaires + Ajouter un commentaire
Articles récents
- Conception d’un client Eclipse RCP et serveur OSGI avec Spring DM [step5]
- Conception d’un client Eclipse RCP et serveur OSGI avec Spring DM [step4]
- Conception d’un client Eclipse RCP et serveur OSGI avec Spring DM [step3]
- Conception d’un client Eclipse RCP et serveur OSGI avec Spring DM [step2]
- Conception d’un client Eclipse RCP et serveur OSGI avec Spring DM [step1]
Commentaires récents
- dans Conception d’un Editeur Eclipse de workflow XML [step 0]
- dans Conception d’un Editeur Eclipse de workflow XML [step 19]
- dans Conception d’un Editeur Eclipse de workflow XML [step 7]
- dans Conception d’un Editeur Eclipse de workflow XML [step 7]
- dans Conception d’un Editeur Eclipse de workflow XML [step 7]
Bonjour nicØB,
Merci de tes encouragements.
Concernant les performances, j’ai fait des tests avec des interfaces de moyennes complexité (environ 20 widgets dans l’ecran) et le temps moyen est de 200ms à la première application des styles. Apres ca met en moyenne 20 ms car le plus long c’est de créer les ressources (Image, Font, Color…).
Les tests que j’ai effectue utilisent une feuille de style qui contiennent environ 20 regles CSS (selectors).
Le moteur CSS met en cache les ressources, une fois que les ressources sont mises en cache, les performances tiennent la route.
Je n’ai pas testé encore avec des interfaces tres complexes, mais il y a encore possibilite d’optimiser le moteur CSS en mettant en cache le resultat des calculs des regles CSS.
Pour l’instant le moteur CSS tient la route avec les tests que j’ai pu effectuer, a voir si dans le futur si il y aurra besoin de l’optilmiser.
Angelo
Salut,
Félicitations pour ton projet. Je trouve que c’est une très bonne idée et il est déjà bien avancé.
Concernant les performances, ça donne quoi ? Ce n’est trop pas lourd à traiter ?
Bonjour benwit,
Merci pour ton post.
Aujourd’hui les moteurs CSS gerent les proprietes basiques CSS2 (excepte les layout). Tu as un tableau recapitulatif des proprietes CSS supportes sur http://tk-ui.sourceforge.net/fr/user-guide/cssengine.html#Properties
Mais il est tres facile d’ajouter ses propres proprietes CSS et de faire evoluer ainsi le moteur. J’ai sorti une distribution du moteur CSS qui gere les proprietes basiques Font, Color, Image et Cusror, car pour l’instant je pense que c’est suffisant dans un premier temps et je dois avancer sur TK-UI (decrire ses interfaces en XML (XUL, XHTML….))
Le moteur CSS s’appuie sur un parser SAC pour parser les CSS, et toutes les implementations existantes (flute, batik, easystate) supporte CSS2.
J’ai personnalise flute (jar flute-1.3) pour commencer a gerer CSS3 concernant les namespaces.
Cela permet de gerer le cas suivant :
@namespace ns1 « org.akrogen.tkui.css.swing.engine.namespace.ns1″
JLabel{
color:red;
}
ns1|JLabel{
color:green;
}
Tous les javax.swing.JLabel aurront une couleur rouge et tous les
org.akrogen.tkui.css.swing.engine.namespace.ns1.JLabel (JLabel personnalise) aurront uen couleur verte.
Angelo
Bonjour,
ça me semble intéressant ce que tu as fait.
Niveau CSS, tu supportes quelle version ?
J’ai fait un tour rapide sur ton site mais je n’ai va vu.
Merci de cette explication, c’est plus clair maintenant pour moi.
Bonne continuation !
Bonjour bassim,
Merci beaucoup de ton commentaire.
Le moteur CSS que j’ai developpe s’applique a du pur Swing ou du pur SWT.
Les projets Java existants bases sur Swing ou SWT peuvent facilement integrer le moteur CSS dans leur application pour gerer les font, color, images… à l’aide de style CSS comme on peut le faire avec des pages HTML.
Ca c’est pour le moteur CSS. Concernant TK-UI qui utilise ce moteur CSS, cette API permet de decrire dans n’importe quelle grammaire XML (XUL, XHTML, XForms…) une interface et la rendre ensuite en Swing, SWT (ou autres API de rendu Java).
JavaFX a sa propre grammaire pour decrire des interfaces. Je ne me permettrais jamais de concurrencer JavaFX (car je suis seul a developper l’API), mais TK-UI permet de decrire ses interfaces en XML. La plupart des gens connaissent le format XHTML par exemple, ce qui je pense est plus abordable que le format JavaFX.
Le format XML permet de beneficier des API DOM, SAX, XSLT. Par exemple, il est tres facile d’ecrire une XSLT qui transforme un fichier XML proprietaire en une interface XHTML et ensuite le rendre en SWT ou Swing a l’aide de TK-UI.
Cette exemple permettra par exemple de gerer un fichier XML proprietaire a l’aide d’une interface SWT ou Swing.
TK-UI gere un DOM Document qui est constitue d’Element W3c (textbox, input…). Il est ainsi possible de creer son UI a l’aide de l’API DOM
comme on peut faire en Javascript.
Element td = document.getElementById(« tdId »);
Element input = document.createElement(« input »);
td.appendChild(« td »);
ce qui permet d’ajouter un JTextField (pour Swing) ou un Text (SWT)
a son containeur (JPanel (pour Swing), Composite (pour SWT).
Angelo
Salut,
je te félicite pour le travail que t’as accompli,
même si je n’ai pas essayé ta librairie, j’ai une question:
ça ressemble beaucoup à du JavaFX, donc quelle est l’utilité d’un moteur CSS dans ce cas ? (intéropérabilité entre SWT et Swing ?)
Cordialement !