Exemple Moteur CSS avec SWT

Bonjour,

je suis toujours en train de travailler sur le moteur CSS qui peut s'appliquer sur des widgets SWT ou Swing qui sera utilise dans TK-UI.

Je vous envoie une copie d'ecran du CSS editor qui montre ce que l'on peut faire avec le moteur CSS. Cetet copie d'ecran est un example de CSS Editor. A gauche le formulaire SWT et a doite le CSS editor qui permet de gerer les CSS.

Comme vous pouvez le voir, il est possible d'appliquer au runtime les CSS Property (degrade de couleur, color, cusror). le :focus est supporte (le style s'applique si le champs a le focus).

SI vosu etes interesses par le sujet, n'hesitez pas a me contacter.

Angelo

Salut Angelo,

Pour l'instant le moteur de CSS est utilisable uniquement dans TK-UI ?

Penses-tu qu'il soit possible de l'utiliser dans une application Eclipse RCP ?

Disons que pour chaque composant SWT, un décorateur ajoute la fonctionnalité feuille de style et qu'il soit possible d'exprimer le fait que je souhaite modifier le style d'un composant SWT.

Je ne sais pas si je suis clair mais bon, je trouverais cela très intéressant pour modifier l'apparence des composants sur des applications Eclipse RCP déjà existantes.

En tout cas, ton travail est très intéressant.

Petite question, TK-UI se dirige vers les besoins de l'E4 non ?

Mickael

Bonjour keulkeul,

merci beacoup de ton interet a mon psot.

Citation:

---

pour l'instant le moteur de CSS est utilisable uniquement dans TK-UI ?

---

En fait le moteur de CSS est un projet a part de TK-UI, autrement dit il est capable d'appliquer des styles CSS sur du pur SWT ou sur du pur Swing.
Une fois que le moteur CSS sera mis en place je l'integreraais a Tk-UI.

Rapidement pour appliquer une feuille de Style CSS le code est le suivant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Display display = new Display(); // Instanciate SWT CSS Engine CSSEngine engine = new CSSSWTEngineImpl(display); // Parse style engine.parseStyleSheet(new StringReader("Label {color:red;}"));   // Build SWT UI ..... // Label Label label1 = new Label(shell, SWT.NONE); label1.setText("Label 0");   // Apply Styles engine.applyStyles(shell, true); ...

---

Citation:

---

Penses-tu qu'il soit possible de l'utiliser dans une application Eclipse RCP ?

---

Oui puisqu'il est capable de travailler avec du pur SWT.

Citation:

---

Disons que pour chaque composant SWT, un décorateur ajoute la fonctionnalité feuille de style et qu'il soit possible d'exprimer le fait que je souhaite modifier le style d'un composant SWT.

---

A moins qu eje ne comprenne pas bien ta remarque, le moteur de CSS s'occupe de ca. Lors de l'appel engine.applyStyles(shell, true);, le shell est passe au moteur CSS. Le parametre true, indique que l emoteur CSS doit iterer sur tous ses Controls enfant et appliquer pour chacun deux le style.

Citation:

---

En tout cas, ton travail est très intéressant.

---

Merci.

Citation:

---

Petite question, TK-UI se dirige vers les besoins de l'E4 non ?

---

Je ne sais pas. Tu veux peut etre parler de RAP? Je ne connais pas bien E4, mais si tu peux me donner des infos dessus (surtout sur quoi tu pensais avec ta remarque), je susi preneur de l'info.

Angelo

Pour ma remarque, la réponse est donnée dans le code que tu as proposée qui est très clair.

J'ai juste une question technique. Quand tu fais

Citation:

---

engine.applyStyles(shell, true);

---

ça se passe comment pour la suite. Est-ce que tu parcours tous les composants créés pour une fenêtre et tu modifies les propriétés ? ou alors c'est au niveau du redraw de la fenêtre ?

Concernant E4 qui sera la nouvelle version d'Eclipse pour 2010, il est question que tout soit embarqué dans le navigateur. Pour l'instant, les démos que j'ai testé montré l'utilisation de flash mais une solution à base de JavaScript est à l'étude. C'est dans ce cas que je me disais que TK-UI via UFace pourrait intervenir.

Mickael

Citation:

---

ça se passe comment pour la suite. Est-ce que tu parcours tous les composants créés pour une fenêtre et tu modifies les propriétés ? ou alors c'est au niveau du redraw de la fenêtre ?

---

En fait je parcours tous les controls du shell. en appelant la methodes getControls. Mais tu n'est pas oblige de partir du shell, tu peu xpartir d'un autre Controle ou tu peux aussi appliquer un style juste sur une widget en particulioer :

Citation:

---

Text text = new Text(shell, SWT.NONE);
engine.applyStyles(text, false);

---

Citation:

---

Concernant E4 qui sera la nouvelle version d'Eclipse pour 2010, il est question que tout soit embarqué dans le navigateur. Pour l'instant, les démos que j'ai testé montré l'utilisation de flash mais une solution à base de JavaScript est à l'étude. C'est dans ce cas que je me disais que TK-UI via UFace pourrait intervenir.

---

Il va falloir que je regarde ca, ca m'a l'air tres interessant, merci pour l'info.
Dans UFace, je sais qu'ils ont on parle de E4 dans leur forum.

Si tu es interesse pour tester le moteur CSS, dis le moi et j'essaierai de faire uen distribution et je pourrais t'envoyer les jar. Je vais commencer a rediger en ODT OpenOFfice un user et dev guide.

Pareil si tu es interesse, n'hesite pas a me demander.

Sinon un sujet qui n'a rien avoir, tu as commence a rediger quelque chose concernant JFace Databinding. Une fosi le moteur CSS bien stablise et integre a TK-UI je continuerai mon travail avec Jface Databinding (notemment pour gerer ce que j'ai appele le DBEL Databinding Expression Language qui permet de decrire un bindin entre une UI et un objet (Javascript, POJO) sous forme de string), pour avoir la meme chose qu'en XAML, ce qui donnerait

Code:

---

1 2 3 4 5 6 7 8 9 10

<script> function Person() { this.name = ''; } var p = new Person(); p.name="bla bla bla" </script>   <textbox value="{Binding src=p Path=name}"

---

Angelo

Salut Angelo,

Code:

---

1 2	En fait je parcours tous les controls du shell. en appelant la methodes getControls

---

Par conséquent, si tu fais des interfaces dynamiques (ajout de contrôle à la demande), il ne faut pas oublier de faire appel à engine.applyStyles(shell, true); quand tu penses que l'IHM est stabilisée ?

Citation:

---

Si tu es interesse pour tester le moteur CSS, dis le moi et j'essaierai de faire uen distribution et je pourrais t'envoyer les jar. Je vais commencer a rediger en ODT OpenOFfice un user et dev guide.

---

C'est très intéressant mais tu connais le manque de temps ...

Concernant l'article sur JFace Databinding, malheureusement je n'ai pas commencé mais ça ne devrait pas tarder puisque mon dernier support de cours est pratiquement terminé. Je t'avais averti il ne faut pas être pressé :mouarf:

Mickael

Citation:

---

Par conséquent, si tu fais des interfaces dynamiques (ajout de contrôle à la demande), il ne faut pas oublier de faire appel à engine.applyStyles(shell, true); quand tu penses que l'IHM est stabilisée ?

---

Tres bonne remarque! En fait le moteur de CSS a plusieurs modes et si tu utilises le mode lazy, en faisant

Code:

---

CSSEngine engine = new CSSSWTEngineImpl(display, true);

---

la tu n'as plus besoin de gerer toi meme le apply styles. En fait en mettant le mod elazy, ca ajout un filter sur le Display sur SWT.Resize qui gere le apply pour chacune des widgets :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

display.addFilter(SWT.Resize, new ResizeListener());   private class ResizeListener implements Listener {   public void handleEvent(Event event) { // On resize, apply styles (on the first resize) Widget widget = event.widget; if (!isWidgetAlreadyAdded(widget)) { widget.setData(WIDGET_ALREADY_ADDED, WIDGET_ALREADY_ADDED); if (engine != null) { engine.applyStyles(widget, false); } } } }

---

Citation:

---

C'est très intéressant mais tu connais le manque de temps ...

---

Oui je connais tres bien ce probleme :)

Citation:

---

Concernant l'article sur JFace Databinding, malheureusement je n'ai pas commencé mais ça ne devrait pas tarder puisque mon dernier support de cours est pratiquement terminé. Je t'avais averti il ne faut pas être pressé

---

Super. JE te posais a tout hasard la question, loin d emoi l'idee de te mettre la pression.

En tout cas merci de me repondre et de t'interesser a mon post. J'ai pas l'impression que le CSS + SWT interesse grand monde.

Angelo

Citation:

---

J'ai pas l'impression que le CSS + SWT interesse grand monde

---

Il s'agit tout de même d'une question assez technique et pointue. Même si tu n'as que très peu de réponse, je pars du principe que
- tu fais cela pour le plaisir
- que ça pourra aider un jour une personne dans le besoin
- ça permet de faire évoluer la plateforme Eclipse RCP

Mickael

Bonjour keulkeul

Citation:

---

- tu fais cela pour le plaisir

---

Exactement et ca me permet d'apprendre plein de choses aussi.

Citation:

---

- que ça pourra aider un jour une personne dans le besoin

---

Ca serait genial.

Citation:

---

- ça permet de faire évoluer la plateforme Eclipse RCP

---

J'espere que ca se fera un jour :)

Merci encore de tes encouragements.

Angelo

Bonjour azerr et keulkeul,

Cette discussion est-elle toujours active ? Car j'aimerais beaucoup recevoir ta doc sur les moteur CSS SWT.
En effet, je regarde actuellement la possibilité de faire des "look and feel" en swt, et les feuilles de styles css me semble assez bien indiquées.


Cordialement.

Bonjour haribo91,

J'ai eu l'incroyable chance que le moteur CSS SWT de TK-UI soit aujourd'hui integre dans le projet Eclipse E4. Il est cependant possible de l'utiliser avec Eclipse 3.x.

Par contre au niveau documentation il va falloir pecher un peu sur les differents blogs pour savoir comment mettre en place le moteur CSS dans ton application RCP. Voici un lien interessant http://www.eclipse.org/forums/index.php/m/665056/

Bon courage.

Angelo

Citation:

---

Envoyé par azerr

Il est cependant possible de l'utiliser avec Eclipse 3.x.
Angelo

---

Bonjour azerr,

Oui j'ai effectivement utilisé le moteur CSS sous 3.4 et tout marche bien ! (Merci pour le lien Tk-UI ^^ ).

D'après ce que j'ai pu voir, css swt semblerai bien moins complet que css html, notamment au niveau des images, et encore moins "puissant" que le look and feel en swing. Mais je vais continuer mes recherches ;).


Haribo91.

Bonjour à tous les deux,

Tu peux regarder du côté des sources de l'outil Bonita. Ils l'ont intégré dedans également.

Mickael

Je suis arrivé sur ce lien

http://www.w3schools.com/Css/css_examples.asp

Mais il s'agit de css "html". Savez-vous s'il existe TOUTES ces propriétés en swt ? Ou si elles se limitent à celle citées dans Tk-UI ?

Merci.

Haribo91.

Bonjour,

Le moteur CSS ne supporte pas toutes les propriétés, notemment celle concernant les layout. Il faudrait les implementer mais c'est assez compliqué je pense a faire.

En gros c'est celle de TK-UI plus quelques autres (comme ceux de CTabFolder http://wiki.eclipse.org/E4/CSS/SWT_Mapping).

Angelo

Salut keulkeul,

Ca fait plaisir de te retrouver:) Je ne savais pas que Bonita ait intégré le moteur CSS de E4. Merci beaucoup pour cette information.

Angelo

@Angelo

J'ai remarqué sur le forum que tu avais donné qu'ils en parlent. Je ne sais pas par contre comment ils l'ont intégré.

D'un autre côté, à l'époque quand j'avais regardé le code source il y avait plusieurs points intéressants qui méritaient le coup d'oeil. L'avantage du code source !!!

Mickael

Hello,

Un merci à vous deux pour vos réponses ! Si je fais de grandes découvertes sur les moteurs CSS SWT je n'hésiterais pas à vous en faire part ^^.


Haribo91.

Une autre petite question :

Lorsque je fais, dans mon appli RCP (dans le "createPartControl")
engine.applyStyles(parent.getShell(), true, true);
et que je lance l'appli et que dans un menu préférence je change de style, une petite fenêtre apparaît, permettant d'ajouter une vue...
Mais je voudrais bien ne plus l'avoir ! Alors quand j'utilise
engine.applyStyles(parent, true, true);
cette fenêtre n'apparaît pas, mais je n'ais plus acces à tous mes composants...

Auriez-vous une idée de comment ne plus avoir cette fenêtre ?

Bonjour azerr,

Je continue d'utiliser le moteur css swt et un problème survient :

lorsque je créer de nouveaux shells (sur appui d'un bouton, je fais simplement

Code:

---

1 2 3

Shell shell = new Shell(); ... shell.open();

---

J'arrive bien à appliquer les styles CSS dessus, mais lorsque je ferme ces Shells et que je veux ré-appliquer un nouveau style sur mon application (à travers un menu de préférence), une erreur survient (voir image en pièce jointe).

Les logs semblent indiquer que cela vient du "reset()" du moteur CSS :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

org.eclipse.swt.SWTException: Widget is disposed at org.eclipse.swt.SWT.error(SWT.java:3777) at org.eclipse.swt.SWT.error(SWT.java:3695) at org.eclipse.swt.SWT.error(SWT.java:3666) at org.eclipse.swt.widgets.Widget.error(Widget.java:446) at org.eclipse.swt.widgets.Widget.checkWidget(Widget.java:384) at org.eclipse.swt.widgets.Widget.getData(Widget.java:500) at org.akrogen.tkui.css.swt.selectors.DynamicPseudoClassesSWTHoverHandler.dispose(DynamicPseudoClassesSWTHoverHandler.java:79) at org.akrogen.tkui.css.swt.selectors.AbstractDynamicPseudoClassesControlHandler.dispose(AbstractDynamicPseudoClassesControlHandler.java:52) at org.akrogen.tkui.css.core.impl.engine.AbstractCSSEngine.reset(AbstractCSSEngine.java:872) at cssPreference.View.getCSSEngine(View.java:285) <==== correspond à engine.reset(); at cssPreference.View.access$3(View.java:276) at cssPreference.View$1.propertyChange(View.java:93)

---

Ça te dit quelque chose ??

Cordialement.
Haribo91.

Bonjour haribo91,

Ca fait plus d'un an que je n'a plus touché au moteur CSS de Eclipse E4 (mais d'autres personnes d'IBM contribuent) car je suis sur d'autres projets Open Source et j'ai plus le temps de m'investir sur Eclipse E4.

Par contre je te conseille de creer des bugs sur le bugzilla d'Eclipse avec des exemples simples qui montrent ton problème en action.

Bon courage.

Angelo

Désolé les gars, mais les version de Bonita actuellement releasé n'embarquent pas le moteur CSS. Je ne sais pas ce qu'il en est de celles qui suivront.

On avait essayé et on était arrivés a un résultat plutot pas mal du tout, mais au final, ca n'a pas été intégré car c'est toujours resté dans le fond de la file de priorité.

C'était fort inspiré de ca: http://www.toedter.com/blog/?p=295 et d'une discussion avec Kai pendant l'ESE 2010. Il y a un patch ici qui faisait marcher le CSS : http://www.bonitasoft.org/bugs/view.php?id=2500

Gosso modo le trick c'est:
1. Faire comme Kai explique dans le blog: checkouter les sources, enlever 2 ou 3 trucs liés a e4 mais pas nécessaires
2. Activer le service de CSS dans ton appli RCP car tu n'a pas d'injection dans 3.x. Dans ton Workbench Advisor ou a un moment équivalent:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

public void initialize(IWorkbenchConfigurer configurer) { super.initialize(configurer); initCSS(); configurer.setSaveAndRestore(true); }   /**          *          */ protected void initCSS() { Bundle b = FrameworkUtil.getBundle(getClass()); BundleContext context = b.getBundleContext(); ServiceReference serviceRef = context .getServiceReference(IThemeManager.class.getName()); IThemeManager themeManager = (IThemeManager) context .getService(serviceRef);   final IThemeEngine engine = themeManager.getEngineForDisplay(Display .getCurrent()); String themeId = Platform.getProduct().getProperty("cssTheme"); // ou un autre theme/css engine.setTheme(themeId, true); if (serviceRef != null) { serviceRef = null; } if (themeManager != null) { themeManager = null; } }

---

Citation:

---

Désolé les gars, mais les version de Bonita actuellement releasé n'embarquent pas le moteur CSS. Je ne sais pas ce qu'il en est de celles qui suivront.

---

Oups, je crois que j'ai dit une bêtise :mouarf:

Merci beaucoup Mickael pour ces précisions.

J'espère que ça aidera haribo91 à résoudre son problème. En tout cas si j'ai le temps, je ferai bien un billet pour expérimenter ta manipulation

Mickael

Mickael

Bonjour à tous !

Je "relance" la discussion car j'ai une question à laquelle j'ai du mal à trouver une réponse :
dans les feuilles de styles CSS (utilisées avec le moteur CSS Engine de tkui), est-il possible qu'une classe qui hérite d'une autre bénéficie de toutes ces propriétés déclarés dans la feuille de style ?

Exemple:
j'ai une classe NewButton extends Button (composant SWT) et dans ma feuille de style CSS on spécifie par exemple un fond vert pour les composants SWT Button.
Est-ce que ma classe NewButton peut bénéficier de cette propriété ? Si oui, comment ?

Car il semblerait qu'a chaque nouvelle classe fille, on doive ré-écrire toutes les propriétés de la classe mère pour cette nouvelle classe fille dans la feuille de style afin qu'elle puisse bénéficier des mêmes propriétés que sa classe mère.. Du coup la feuille de style devient très vite "lourde"..

J'espère que ma question apparaît assez claire..

Merci.

Haribo91.