Moteur de CSS pour Swing, SWT

Bonjour,

Je me permets de poster un message concernant le moteur de CSS que je suis en train d'implémenter pour gérer n'importe qu'elle renderer Swing, SWT...
pour mon projet TK-UI.

Le moteur de CSS pourra s'appliquer soit sur un DOM (dans le cas de TK-UI) mais aussi sur du pur Swing ou du pur SWT.

Je sais qu'il existe des classes Swing qui gère les CSS (par contre je ne suis pas sur qu'il puisse lire des fichiers CSS standards), mais l'interet du moteur CSS est qu'il soit générique et surtout il suit les spécification w3c.

Pour parser un fichier CSS en suivant w3c, il faut utiliser un parser SAC ce que j'utilise (flute, batik...).

Concernant les règles de sélection des CSS, pareil j'utilise les recommandations w3c, et on peut par exemple utiliser l'implementations des Selectors du projet batik.

Vous pouvez trouvez deux capures d'ecrans :

swing.css : qui est la copie d'ecran Swing qui se base sur le css suivant :

Code:

---

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

JLabel { font-style: italic; font-weight:bold; font-family: "Arial"; color:black; }   JPanel JPanel JPanel JLabel { font-weight:normal; font-style: normal; }   H1, H2 {color: green }   JTextField { background-color:rgb(100,100,0); }

---

swt-css.png
qui est la copie d'ecran SWT qui se base sur le css suivant :

Code:

---

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

Label { font-style: italic; font-weight:bold; font-family: "Arial"; color:black; }   Composite Composite Label { font-weight:normal; font-style: normal; }   Text { background-color:rgb(100,100,0); }

---

Comme vous pouvez voir la regle CSS Composite Composite Label est géré
autrement dit elle s'applique a un Label SWT qui est dans un composite qui est lui meme dans un composite.

Cette règle utilise batik pour gérer ceci, mais il est possible de creer ses propres règles.

Si vous etes interesses pour tester ceci, vous pouvez telecharger le projet Eclipse
org.akrogen.tkui.core.css

et lancer
/test/org/akrogen/tkui/core/css/selectors/swing/TestSwingCSSSelectors.java
pour Swing et
/test/org/akrogen/tkui/core/css/swt/selectors/TestSWTCSSSelectors.java
pour SWT.

Le code peut paraitre tres complique, mais j'ai surtotu travaille sur les selectors et la possibilite d'utiliser n'importe quelle parser SAC.
La je dosi travailler sur les applications des Styles beuacoup plus proprement.

Si vosu etes interesses, n'hesitez pas a me solliciter.

Angelo

Bonjour,

Je pense que mes examples n'etaient pas assez pertinent car ca n'a pas l'air d'intéresser grand monde. J'ai continué a avancer sur l'implementation SWT du moteur de CSS.

Je vous joins 3 copies d'ecrans qui est le meme code SWT mais ou un fichier CSS est applique sur la fenetre SWT. J'espere que ces examples seront plus pertinent et donneront envie a certains.

Voici la feuille CSS pour le screen TestMatrix :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Tree { background-color: black; color: white; }   CTabFolder { background-color: black; color: white; }   SashForm, Shell { background-color: green; }   ToolBar { background-color: white, green, 100%; color: black; }   CLabel { background-color: black; color: white; }

---

Cet example est base sur un article Eclipse que j'ai decouvert.

Angelo

Personnellement je suis interressé par un module qui permettrait d'affecter une CSS à du Swing.

Je n'aime pas les frameworks, je préfère avoir des petits outils.

J'ai déjà fait un composant dans ce genre, et avec l'aide de SwingX, pour les images de fond.

Coder un ihm par du xml comme en web est à mon gout fort déplaisant.

Pour mon composant j'utilise la technique d'un écouteur d'évènement AWTEventListener, sur les containers. Et à chaque composant ajouté je calcul l'apparence CSS. C'est pas très compliqué.
Mon rêve étant de pouvoir faire comme dans zen css, mais à partir d'un contenu swing et non html.

Peux tu nous expliquer un peu comment tu t'y prends de ton coté.
Merci.

Bonjour Alec6,

Merci beaucoup de ton post. je me sentais un peu seul :)
J'en suis qu'au debut du developpement donc tout n'est pas supporte surtout concernant Swing, mais ca va etre le prochain developpement que j'envisage
pour gerer les font, les degrades comme dans l'exemple SWT que j'ai mis.

Tout d'abord voici le code pour appliquer une CSS a une JFrame :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// Instanciate Swing CSS Engine CSSEngine engine = new CSSSwingEngineImpl(); engine.parseStyleSheet(new FileInputStream(new File("swing.css")));   /*--- UI SWT ---*/ 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); ... /*--- End UI Swing ---*/   // Apply Styles engine.applyStyles(frame, true);   frame.pack(); frame.setVisible(true);

---

La methode parseStyleSheet parse le fichier CSS en utilisant un parse SAC w3c qui construit les CSS rules w3c et les stockent.

La méthode applyStyles, appliquent les styles CSS a la frame et a ses enfants (applyStyles est appele avec true qui indique que les Component enfant de la JFrame doivent etre itérer et que l'on doit appliquer un style a chacun des Component).

Ca c'et le principe de base des applications des styles CSS pour n'importe quel renderer SWT ou Swing (ou autres).

Lors de l'application des styles parses sur un Component, le moteur CSS itère sur chacune des CSS rules et verifient que le Component vérifie la règle.

Pour tester si le CSS rule courant doit s'appliquer, j'utilise les Selector w3c SAC. Je n'ai pas implementer ces Selector et j'utilise ceux implementer par batik (mais on peu implementer ses propres selectors si besoin) qui travaille avec des w3c Element.

Pour travailler avec des w3c Element, j'ai cree une classe SwingElement qui implemente w3c Element est qui est lie a un Component Swing. Tout ceci c'est le moteur CSS qui s'en occupe. Du coup on peut utiliser les selectors batik pour gerer le selectors CSS du type

JPanel JPanel JLabel qui indique que seuls les Jlabel qui sont contenus dans un JPanel qui est lui meme contenu dans un JPanel doit avoir la regle applique.

Ca c'est pour savoir si la regle CSS courante doit s'appliquer sur le Component courant.

Si la regle CSS doit s'appliquer, celle ci appelle des implementation de ICSSPropertyHandler, qui permet d'appliquer la regle background-color sur un JComponent Swing.

Code:

---

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

public class CSSPropertyColorSwingHandler implements ICSSPropertyColorHandler {   public void handle(Object element, String property, CSSValue value, String pseudo) { JComponent control = getJComponent(element); if (value.getCssValueType() == CSSValue.CSS_PRIMITIVE_VALUE) { Color color = CSSSwingHelpers.getColor((CSSPrimitiveValue) value); if (color == null) return;   // if (control instanceof Control) { if ("background-color".equals(property)) { control.setBackground(color); }

---

Je ne sais pas si j'ai ete assez clair, mais c'est assez diffcile d'expliquer le fonctionnement d'un moteur CSS par un message.

Le moteur de CSS que je susi en train d'implementer suit toutes les recommandations w3c.

Pour conclure, le fonctionnement est :

1. Parser les feuilles de styles a l'aide d'un parser SAC qui construit des CSS rules.
2. Iterer sur les JComponent de la JFrame et pour chacun des JComponent, iterer sur les règles CSS. Des qu'un regle CSS est applicable, appliquer la regle CSS a l'aide d'une implementation de ICSSPropertyHandler.

Angelo

Très bien,

je n'est pas de connaissance sur la création d'un renderer, il me manque donc l'application des sélectors, je l'ai fait à la main, j'ai comme toi l'équivalent d'un propertyhandler (logique).

comment tu fais pour gérer quand on ajoute des composants à la fenêtre après avoir fait engine.applyStyles(frame, true); (d'ou mon utilisation du AWTEventListener).

Autre chose que j'ai pas compris c'est pour tes CSS; est tu obligé d'utiliser des tags JPanel, JLabel... moi j'utilise la méthode setName de Component pour une utilisation classique comme en HTML (malheureusement pas de setId).

Citation:

---

je n'est pas de connaissance sur la création d'un renderer,

---

En fait quand je parlais de renderer, je parlais de Swing ou SWT.

Citation:

---

il me manque donc l'application des sélectors

---

Les selectors peuvent etre tres complexe, mais comme j'utilise ceux de batik, c'est deja tout fait et ca gere tous les types de selectors w3c (j'ai pas encore tout teste).

Citation:

---

comment tu fais pour gérer quand on ajoute des composants à la fenêtre après avoir fait engine.applyStyles(frame, true); (d'ou mon utilisation du AWTEventListener).

---

Tres bonne remarque, ca je ne le gere pas encore. Mais je vais y réfléchir.
Ca arrive souvent que l'on ajoute au runtime des Component?

Citation:

---

Autre chose que j'ai pas compris c'est pour tes CSS; est tu obligé d'utiliser des tags JPanel, JLabel...

---

En fait j'ai fait ce choix pour l'implementation Swing et SWT d'utiliser les nom des classes. Ceci est gere dans la classe SwingElement :

Code:

---

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

public class SwingElement extends ElementAdapter { ... public String getLocalName() { // The localName is simple class name // of the Swing component. For instance // for the javax.swing.JLabel // localName is JLabel // CSS selector will use this localName // ex : JLabel {background-color:red;} Component component = getComponent(); Class clazz = component.getClass(); String name = ClassUtils.getSimpleName(clazz); return name; } }

---

Mais tu peux utiliser ta propre classe MySwingElement qui retourne ce que tu veux, ce qui donnerait :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

public class MySwingElement extends ElementAdapter { ... public String getLocalName() { Component component = getComponent(); if (component instanceof JLabel) return "label"; if (component instanceof JTextField) return "input"; return ""; } }

---

Concernant le ID, il faut implementer aussi dans le SwingElement la methode getId (qu'un Condition Selector w3c que j'ai implemente utilise).

Je l'ai implemente comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10

public String getId() { Component component = getComponent(); if (component instanceof JComponent) { Object id = ((JComponent) component).getClientProperty("id"); if (id != null) return id.toString(); } return component.getName(); }

---

autrement dit il va d'abord chercher si dans l'id a ete enregistre avec la methode putClientProperty (avec la cle id)
sinon il retourne le name du Component :

Apres tu peux utiliser la regle CSS :

Citation:

---

JLabel#MyId {
color:blue;
}

---

Et dans ton code Java tu fais :

Code:

---

1 2	JLabel label2 = new JLabel(); label2.setName("MyId");

---

Ou

Code:

---

1 2	JLabel label2 = new JLabel(); label2.putClientProperty("id", "MyId2");

---

Angelo

Bonjour Alec6,

Tu m'a l'air d'avoir une bonne experience concernant les CSS, serais tu intéressé pour tester mon moteur de CSS et si jamais si il te plait, serais tu interesser pour contribuer? J'ai plein d'idee (comme pouvoir changer au runtime les styles apres avoir choisi une feuille CSS, avoir un editeur de CSS simple ou il y aurrait a droite de l'ecran une JTextArea qui afficherait les styles CSS et des que l'on modifie un style, ca met a jour l'ecran....)

Je ne maitrise pas Swing, pourrais tu s'il te plait developper sur ton idee de AWTEventListener. Merci.

Citation:

---

Mon rêve étant de pouvoir faire comme dans zen css, mais à partir d'un contenu swing et non html.

---

Pourrais tu developper s'il te plait ton idee. J'espere qu'un jour mon moteur de CSS aboutir a tes attentes :P

Angelo

En faite ton projet et certains de mes projets ont des problèmatiques techniques en commun.

J'ai un soucis avec ton projet c'est que le code n'est pas divisé en sous projets.
Il y a en gros deux parties:
- parsing d'un flux xml ---> génération d'IHM
- skinning d'une IHM par une CSS (ca devrait être un Jar différent).
Et il ne doit pas forcément y avoir de dépendance de l'un vers l'autre (ou bien il faut une librairie tierce)

Notamment je viens d'ouvrir un projet dans la partie Desktop chez sun qui s'appel UGC. C'est pour formaliser un projet que j'étudie depuis un moment et qui est un casse tête (enfin qui demande une expertise), et se veut être un projet de recherche sur les IHM. L'idée est de faire l'introspection d'un model de données pour générer l'IHM qui convient à sa manipulation (pas nouveau dans l'idée).

L'idée nouvelle c'est de ne pas produire un XML qui décrit la structure de l'IHM mais un XML qui décrit la structure du dialogue que l'IHM doit matérialisé.

En effet un IHM permet à l'homme de dialoguer avec le système en ayant des question et des réponses, des sujets et sous sujets, des notifications etc...
Pour un même dialogue plusieurs structure d'IHM sont possibles mais certaines sont plus cohérentes que d'autre (il faut lire les référentiels de l'ergonomie).

J'ai donc:
- Data Model --> XML (structure du dialogue=métamodèle d'IHM)
- XML --> IHM
(le CSS est un plus mais c'est interressant)
Et en réponse à un commit
- IHM --> XML (dialogue en retour, donc avec des questions répondues)
- XML --> Data Model

Tu vois le problème commun avec les rendereurs !

J'ai donc des parties indépendantes:
- Data Model --> XML (on peu imaginer n'importe quel langage) donc pas de dépendance avec la suite.
- XML --> IHM (comme tu le fais), mais il faut des jars différents et sans doute le savoir faire de JSF pour la customization des rendereurs (avec des XML de configuration).

En somme morcelle ton projet en autant de parties indépendantes que possible et pour chaque partie écrit une procédure du genre:
- vous voulez rajouter un Rendereur (fait ci faite ca, et placer le la dedans...); comme si tu parlais à des novices.

Je pense que tu auras plus de succès.

Pour le CSS, c'est un peu un autre projet que j'ai, et effectivement je vais regarder ton projet, et contribué si possible. Mais please morcelle.

Bonjour,

Citation:

---

J'ai un soucis avec ton projet c'est que le code n'est pas divisé en sous projets.
Il y a en gros deux parties:
- parsing d'un flux xml ---> génération d'IHM
- skinning d'une IHM par une CSS (ca devrait être un Jar différent).

---

Le moteur de CSS est completement indépendant de TK-UI (- parsing d'un flux xml ---> génération d'IHM), autrement dit le projet org.akrogen.tkui.core.css contient le moteur de CSS et ne fait reference a aucun autre projet de TK-UI qui permet de decrire une IHM en XML. En d'autres termes l emoteur CSS peut s'appliquer sur du pur code Swing ou SWT.

Citation:

---

En effet un IHM permet à l'homme de dialoguer avec le système en ayant des question et des réponses, des sujets et sous sujets, des notifications etc...
Pour un même dialogue plusieurs structure d'IHM sont possibles mais certaines sont plus cohérentes que d'autre (il faut lire les référentiels de l'ergonomie).

---

Je vais peut etre dire uen betise, mais j'ai l'impression que c aressemble a l'idee de XForms ou tu as une instance dans le model (XML) et ensuite la gestion des evts estdécrite en XML.

Citation:

---

En somme morcelle ton projet en autant de parties indépendantes que possible et pour chaque partie écrit une procédure du genre:
- vous voulez rajouter un Rendereur (fait ci faite ca, et placer le la dedans...); comme si tu parlais à des novices.

---

C'est ce que j'ai tente de faire. Tu as le core TK-UI (qui gere le chargement d'un XML et qui gere le Databinding, le lien entre l'UI et le DOM....). Tu as ensuite un projet par implementation de renderer (Swing, SWT...) Tu as un projet de moteur de CSS (independant de TK-UI)...

Citation:

---

Pour le CSS, c'est un peu un autre projet que j'ai, et effectivement je vais regarder ton projet, et contribué si possible. Mais please morcelle.

---

Genial. Mais j'ai decoupe TK-UI en plusieurs projets.

Tu peux trouver une breve description des projets ici.

Angelo

Citation:

---

Tu vois le problème commun avec les rendereurs !

---

Oui je le voies tres bien. En fait pour l'instant j'ai implemente mes propres renderer SWT et Swing.

Mais a termes j'aimerais bien integrer ceux de UFace qui propose une API ou les UI sont des interfaces et ou ils ont implementes plusieurs renderers comme Swing SWT et GWT.

Je contribue a ce projet concernant le Databinding avec JFace (qui est super puissant ) pour gerer le Databinding avec Swing, Rhino (Javascript) et DOM.

TK-UI utilise en interne le Databinding DOM pour synchroniser l'UI (Swing, SWT...) avec le DOM.

UFace est en cours de developpement, mais peut etre que ca pourrait repondre a ta problématique des renderers.

Angelo

Bonjour alec6,

Citation:

---

Je ne maitrise pas Swing, pourrais tu s'il te plait developper sur ton idee de AWTEventListener.

---

Ok je viens de comprendre ce que tu as fait. Ta classe elle ne s'appelerait pas SwingWatcher que l'on puet trouver dans cette article?

Je ne matrise pas super bien Swing et je commence a bloquer sur pas mal de point technique Swing comme par exemple gerer le backgrounde des TreeNode d'un JTree sans passer par un TreeCellRenderer.

Si tu as l'envie de m'aider a implementer le moteur CSS de Swing, j'en serai ravi.

Angelo

Effectivement c'est bien l'article de Josh, voir d'autres dans les Cours et tutoriels pour apprendre CSS

Je vais voir ce que je peux faire avec mes moyens temporels.

Ok je viens d'implementer l'idee du AWTEventListener dans la classe CSSSwingLazyEngineImpl (qui lance CSSSwingApplyStylesListener (comme SwingWatcher) qui herite de CSSSwingEngineImpl (qui elle n'applique pas le style quand le Swing component est ajoute).

Par contre dans le cas du SwingWatcher, ca marche tres bien car RuleManager est un singleton. Dans mon cas j'ai une instance de CSS par JFrame et pas un singleton RuleManager.

J'ai utilisé la classe que j'adore et qui me sauve tout le temps : ThreadLocale ou je stocke le moteur de CSS dans une ThreadLocale.

Du coup le code est encore plus simplifie (uniquement pour Swing), ce qui donne :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

// Instanciate Swing CSS Engine CSSEngine engine = new CSSSwingLazyEngineImpl(); engine.parseStyleSheet(css);   /*--- UI SWT ---*/ JFrame frame = new JFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);   JPanel panel = new JPanel(); frame.getContentPane().add(panel); ...

---

Il n'y a plus besoin d'appeler la methode engine.applyStyles(frame, true); et du coup l'iteration sur les Component ne doit plus s'effectuer.

Merci de m'avoir parle de ton idee. La ca marche nickel.

Le test se trouve dans la classe TestCSSLazyEngine

Citation:

---

Je vais voir ce que je peux faire avec mes moyens temporels.

---

Oui je connais tres bien ce probleme. En tout cas si on peut bosser ensemble ca serait cool. Tu as un site ou on pourrait voir ton projet UGC?


Angelo

Et non j'ai pas de site:

je suis pas doué dans ce genre de plomberie (mise en place d'un serveur SVN etc)

A mon avis je ne pourrais pas remettre les pieds sur le projet CSS avant une semaine.

Est ce que tu arrives à gérer les problèmes de layout des CSS ?

Citation:

---

je suis pas doué dans ce genre de plomberie (mise en place d'un serveur SVN etc)

---

C clair que ca prend du temps. Moi j'utilise Sourceforge, et j'en suis tres content. Tu as un serveur CVS ou SVN, tu peux as un site avec ton url du projet. Sourceforge te fait ca pour toi.

Citation:

---

A mon avis je ne pourrais pas remettre les pieds sur le projet CSS avant une semaine.

---

Pas de souci, n'hesites pas a me contacter des que tu as envioe de bosser dessus.

Citation:

---

Est ce que tu arrives à gérer les problèmes de layout des CSS ?

---

Non je n'ai pas gerer le cas des layout, car je n'ai pas encore fini d'implementer les styles basiques. De plus la je susi en train de mettre en place la possibilite d'appliquer un style au runtime ce qui signifie qu'il faut reseter le style applique precedemment avant d'appliquer le nouveau style.

De plus je ne sais pas trop comment je vais gerer les layout (avec MigLayout?). J'ai en effet vu que le projet SwingWatcher proposait cette fonctionnalite. Mais promis je regarderais comment on pourrait faire.

Angelo

Voici des idées et problèmes à résoudre, en tant que pro du Swing:
- pour le layout: le layout de swing et le mieux, cependant on a parfois besoin de laisser la tache à la css car on veut qu'un graphiste dispose d'une certaine liberté.
Je pense qu'il faudrait soit regarder si un container à déjà un layout (gridbag, grid etc...) avec d'appliquer une property de layout, soit dans les clients properties dire que le layout doit etre fixe (par swing). Un mix des deux sans doute, la pratique le dira.
- La mise en forme du texte est du fond est de loin l'aspect le plus séduisant des CSS pour Swing (plus que le layout et les bordures). Et c'est surtout bien plus pratique qu'un fichier property. Il faudrait pouvoir récupérer le texte d'un JLabel et le modifier, et notamment parser du HTML dans un JLabel pour appliquer les styles dedans (je crois que c'est imporant ca).

Bonjour

Comment te difference tu par rapport au projet jaxx : http://www.jaxxframework.org : qui entre autre applique des css sur des composants swing?

Autre question :
Par rapport a ton projet Akrogen : qui si j'ai bien compris permet la generation de wizard pour eclipse
Envisage tu de l'utiliser pour la generation de wizard ou autre pour Netbeans?

A+
Theodore

Citation:

---

- pour le layout: le layout de swing et le mieux, cependant on a parfois besoin de laisser la tache à la css car on veut qu'un graphiste dispose d'une certaine liberté.
Je pense qu'il faudrait soit regarder si un container à déjà un layout (gridbag, grid etc...) avec d'appliquer une property de layout, soit dans les clients properties dire que le layout doit etre fixe (par swing). Un mix des deux sans doute, la pratique le dira.

---

Ok je comprends ton idée. En fait j'aimerais bien gerer les 2 cas (Layout de Swing) et (layout de MigLayout) car dans TK-UI j'utilise MigLayout pour gerer les layout Swing et SWT.

Citation:

---

- La mise en forme du texte est du fond est de loin l'aspect le plus séduisant des CSS pour Swing (plus que le layout et les bordures). Et c'est surtout bien plus pratique qu'un fichier property.

---

Oui je susi entierement d'accord.

Citation:

---

Il faudrait pouvoir récupérer le texte d'un JLabel et le modifier, et notamment parser du HTML dans un JLabel pour appliquer les styles dedans (je crois que c'est imporant ca).

---

Tu veux parler des styles inlines? Si c'est le cas je viens de gerer ce cas.
Tu peux faire :

Code:

---

1 2 3 4

JLabel label1 = new JLabel(); label1.putClientProperty("style", "color:blue;");

---

Ou

Code:

---

1 2	JLabel label1 = new JLabel(); engine.parseAndApplyStyleDeclaration(label1, "color:red;");

---

Pardon je n'ai pas bien compris l'interet de gerer le text du JLabel dans un CSS? Mettre en dur le text d'un JLabel ne me parait pas tres international. Mieux vaut les gerer dans des ficheirs de prorietes? Mais peut eter que je n'ai pas bien compris ton idee.

Angelo

Bonjour Theodore,

Citation:

---

Comment te difference tu par rapport au projet jaxx : http://www.jaxxframework.org : qui entre autre applique des css sur des composants swing?

---

La première difference est que le moteur de CSS puisse gerer SWT et Swing. Je n'en ai pas trouve actuellement qui fasse ca. La deuxieme difference est que mon moteur de CSS est execute au runtime alors que JAXX (d'apres ce que j'ai pu lire) part d'un fichier XML (d'UI) et compile des classes Java Swing.

Du coup tu peux utiliser le moteur CSS dans une application Swing existante.

Citation:

---

Autre question :
Par rapport a ton projet Akrogen : qui si j'ai bien compris permet la generation de wizard pour eclipse
Envisage tu de l'utiliser pour la generation de wizard ou autre pour Netbeans?

---

Akrogen ne genere pas des Wizard Eclipse, il interprete un fichier XUL/XML qui decrit ton interface et t'affiche le wizzard. Dans cette description XML de ce wizard tu infique le template (Freemarker, XSL, Velocity) que tu veux utiliser (ou une tache ANT).

Lorsque tu cliques sur le bouton Finish les valeurs saisies dajns le wizards sont fucionnes avec le template pour generer le code que tu souhaites (Class Java, PHP, XML...)

L'interet d'interpreter le XUL (au lieu de generer le code Wizard Eclipse) est que tu modifie ton fichier XUL des que tu as envie, tu reouvres ton wizard et ton wizard s'affiche avec ta nouvelle description (pas besoin de compiler).

Concernant Netbeans, tu as tappe dans le mile. En fait aujourd'hui Akrogen est base sur Wazaabi pour interpreter le XML/XUL en SWT. Mais il ne gere pas Swing, ni les CSS...

C'est pour cela que j'ai cree TK-UI
qui permet de decrire une UI en XML (XUL, XHTML...) et le rendre en Swing et SWT (ou autres).

Une fois que j'aurrais finalise TK-UI je m'attaquerais au module Netbeans, mais d'ici la je pense qu'il va y avoir pas mal de temps qui va s'ecouler car je suis tout seul a faire le developpement.

Dans TK-UI, j'utiliserai aussi le moteur CSS que je suis en train de mettre en place donc on pourra decrire des wizard en XUL, XHTML...et CSS avec du binding (comme en XAML).

Si tu es interesse par le sujet, n'hesite pas à me solliciter :P.

Angelo

Bonjour,

Je vous tiens au courant de l'etat d'avancement de mon moteur CSS.
J'ai bien avance concernant SWT, moins sur Swing car je ne suis pas un expert et je commence a sentir mes limites.

J'ai bien avance sur la partie selector, et on peut ajourd'hui utilisé la plupart des selectors de w3c.

Par exemple :

Code:

---

1 2 3

JCheckBox[visible="true"] { background-color:green; }

---

Signifie que les JCheckBox qui sont visible ont le style applique vert (meme si ca n'a aucun sens).

J'ai commence aussi a travaille sur les selectors de type HTML.
Je vais donc proposer par defaut les selectors de type Swing (ex : JTextField) et de type HTML (ex : input). Mais il est bien sur possible de personnaliser ces selectors.

Code:

---

1 2 3

input { background-color:green; }

---

Met en vert tous les composants JCheckBox, JtextField... comme en HTML.

Code:

---

1 2 3

input[type=checkbox] { background-color:green; }

---

Met en vert uniquement les JCheckBox.

J'ai aussi gere les backround image.

Code:

---

1 2 3 4

JButton { background: url(./images/icons/type/class.gif); }

---

Permet d'ajouter un icone sur les JButton.

Une fois que j'aurrais bien finalise ca, je m'attaquerai a 2 fonctionnalites importantes :

1. possibilite de recuperer les styles initiaux des Widgets avant d'appliquer un style (ex : background-color...) pour pouvoir ensuite appliquer une CSS au runtime. Avant d'appliquer une CSS, la Widget s'initialisera avec son style initial (pour annuler les styles deja applique par une CSS) puis la nouvelle CSS s'appliquera.
   
2. les pseudo classes dynamiques, pour gerer le cas suivant
   
   JTextField:focus {backround-color:red;} qui permet de mettre en rouge les JTextField que si elle a le focus.

J'espere que cela donnera envie a certain.

Alec6 si tu es interesse par mon travail, n'hesite pas a me contacter. Je suis pas super bon en Swing, et j'aimerais bien que tu juges de mon code.
Et encore mieux si tu peux m'aider ca serait genial.Merci.

Angelo

Je peux pas encore mettre la tête dans ton code, mais envoi toujours les questions pour swing.

Sinon pour le texte dans les JLabel, je disais que dans un JLabel tu peux mettre du html (notamment pour faire un multilignes).
Je sais pas si on peux appliquer la CSS au texte dans le JLabel. Sinon faudra peut etre faire un composant JLabel spécialisé, en détournant Flying Saucer.

Ensuite pour tes balises custom vas y molo en faite;
L'idéal c'est de penser au travail en équipe. Moi j'ai une application swing, pour l'aquelle j'ai fait la maçonnerie. Ca marche et c'est moche. Je sors des captures d'écran et dessus j'écris pour le designer les nom des class. Donc pour les bouttons par exemple on affecte rarement un style à tout les bouttons mais à une class et moi dans mon swing le met le nom de la classe en clientProperty.

Il faudrait en somme pouvoir travailler avec une css pure. Pour mon styliser mon but était de faire le html de css zen garden en swing (http://www.csszengarden.com/tr/francais/ si tu connais pas), et d'y appliquer les feuilles de styles. Pour ce faire il faut rester CSS2 voir 3 stricto senso.

Tu dois aussi avoir, je pense, un problème avec l'héritage, car tu fais une property JButton (comme si c'était un tag html). Mais comment tu gères l'héritage avec un JTogglePanel (si ca hérite bien 8O) par exemple.
Ca donnerait d'office JButton.JTogglePanel { }.

En somme laisse les développeurs swing appliquer leur noms de classes.
Solution plus intéressante peut être: à coté de la css pure et dure il faudrait un XML par exemple qui face l'intermédiaire en disant tout les JButton je veux qu'il ait le style de la class perlimpimpin définie dans la CSS (un XML de médiation en somme). Ca permettrait aussi d'etre plus souple en fonction de Swing ou de SWT.

Je suis encore emmerdé par un projet, mais j'arrive dès que possible.
PS: je suis chiant parait-il en équipe.

Bonjour Alec6,

Merci pour t aréponse.

Citation:

---

Je peux pas encore mettre la tête dans ton code, mais envoi toujours les questions pour swing.

---

En fait j'attends de voir avec toi ce que l'on peut faire avec mon moteur CSS et je te dirais comment j'ai implementer les choses pour voir si c'est bon (ex : j'ai gerer le backround-image qui marche par exemple avec un JPanel sans etre oblige d'etendre le JPanel et la methode paint.

Citation:

---

Sinon pour le texte dans les JLabel, je disais que dans un JLabel tu peux mettre du html (notamment pour faire un multilignes).
Je sais pas si on peux appliquer la CSS au texte dans le JLabel. Sinon faudra peut etre faire un composant JLabel spécialisé, en détournant Flying Saucer.

---

Je vais réflechir à cette problématique. En effet aujourd'hu la CSS s'appliquer a un composant mais si on peut mettre du HTML dedans, je ne sais pas comment ca gerer ce cas la aujourd'hui.

Citation:

---

Ensuite pour tes balises custom vas y molo en faite; L'idéal c'est de penser au travail en équipe.

---

Penser en équipe, je suis tout a fait d'accord!!!! Et le but de mon post était effectivement de trouver des personnes (comme toi) pour mettre en place le moteur CSS.

J'ai tente au mieux que le moteur CSS soit le plus configurable possible. Et pour la gestion des selectors (ex : JTextField ou input[type=text]...) ceci est configurable. Tu choisis comment tu veux gerer tes selectors, en implémentant le getLocalName d'un SwingElement (je t'expliquerai en detail si tu le souhaite).

Moi par defaut je propose deux implementations. Celle de Swing (ex : JTextField) et celle de HTML (ex : input[type=text]=). Mais apres tu peux avoir ta propre implementation et gerer les selctors comme tu le souhaite.

Citation:

---

Donc pour les bouttons par exemple on affecte rarement un style à tout les bouttons mais à une class et moi dans mon swing le met le nom de la classe en clientProperty.

---

Ca c'est bon je l'ai gerer. En fait tu peux gerer ce cas exactement comme en HTML, autrement dit, gérer ce cas :

1. avec une class (.blueClass{background-color:blue}) et affecter la classe avec le client proprerty (button.putClientProperty("class", "blueClass").
2. avec un id (JButton#MyId{background-color:blue}) et affecter l'id avec le client proprerty (button.putClientProperty("id", "MyId").
3. avec un style inline et affecter le style avec le client proprerty (button.putClientProperty("style", "background-color:blue")

Citation:

---

Il faudrait en somme pouvoir travailler avec une css pure.

---

Oui c'est mon but final aussi. Apres il y a les widgets plus complexes comme le tree ou les table. La je vais utiliser la grammaire XUL pour les selector. Autrement dit (JTRee => (selector=tree), JTable => (selector=listbox)). Mais bien sur ceci pourra etre reconfiguré.

Citation:

---

Mais comment tu gères l'héritage avec un JTogglePanel (si ca hérite bien ) par exemple.

---

Je pense que tu veux parler du JToggleButton. En fait les selectors se base sur le nom de la classe. Donc tu peux ecrire JButton et JToogleButton.
L'avantage de cette solution c'est que tu peux distinguer JButton et JToogleButton, par contre si tu veux que le style s'applique a un JButton et a un JToogleButton, il faut écrire le selector
JButton , JToogleButton {....}

Citation:

---

En somme laisse les développeurs swing appliquer leur noms de classes.

---

Comme je t'ai dit plus haut tu gérer ca comme tu veux comme en CSS avec HTML.

Citation:

---

Solution plus intéressante peut être: à coté de la css pure et dure il faudrait un XML par exemple qui face l'intermédiaire en disant tout les JButton je veux qu'il ait le style de la class perlimpimpin définie dans la CSS (un XML de médiation en somme). Ca permettrait aussi d'etre plus souple en fonction de Swing ou de SWT.

---

Pardon je ne comprends pas trop l'interêt d'utiliser un fichier XML. Ca tu peux le faire en CSS.

Code:

---

JButton {...}

---

Citation:

---

Je suis encore emmerdé par un projet, mais j'arrive dès que possible.

---

Cool!

Citation:

---

PS: je suis chiant parait-il en équipe.

---

Cool! J'aime bien quand il y a des debats sur les choix d'architectures. Apres il n'existe jamais LA solution et il faut savoir faire des concessions. Mais je tente d'etre le plus ouvert possible et si tu trouves que le moteur CSS est tout pourri, je suis pres a faire un refactoring.

Pour info, je suis en train de faire une classe abstraite AbstractCSSEditor ou l'on doit implémenter la méthode createContents ou tu mets les widgets que tu veux voir a ton ecran.

Une fosi lance, ca t'affiche a gauche ton interface avec tes widgets et a droit une textarea ou tu peux sasisir ta CSS.Tu saisis ta CSS dans la textarea, tu appuis sur le bouton Apply Styles et ca t'applique les styles saisies dans la textarea. J'ai commence a l'implementer en SWT. Je vais bien finaliser cette classe pour ensuite la creer pour Swing (peut etre que tu seras interesse de l afaire?).

Donc il est possible d'appliquer au runtime des styles, le seul probleme est que aujourd'hui il n'est pas possible de reseter le dernier style applique. Mais ca je vais m'en occuper la semaine prochaine.

Bonne journee

Angelo

Bonjour,

J'ai bien avance sur le moteur de CSS et maintenant il est possible d'appliquer une feuille de style au runtime (Avant d'appliquer la nouvelle CSS, les widgets sont reinitialise avec les style par defauts de SWT ou Swing).

J'ai aussi gere la pseudo classes dynamique focus qui permet de mettre en style lorsque la widget a le focus. Ca s'ecrit comme un CSS standard :

Code:

---

1 2 3 4

JTextField:focus { background-color: red; color:black; }

---

Ceci permet de mettre en rouge un JTextField lorsqu'il a le focus. C'est pas encore tres optimise, mais ca marche.

J'ai aussi cree un mini editeur de CSS en SWT et Swing que vous pouvez voir ici.
Cet editeur est super moche mais il permet de valider le moteur de CSS.

La textarea a droite permet d'afficher la CSS qui s'applique aux widgets qui sont a gauche de l'ecran. Lorsque la textarea est modifie, le moteur de CSS prend le contenu de la textarea est parse le CSS et l'applique au widgets.

Ceci permet de montrer qu'il est possible de changer une CSS au runtime. De plus ca permet de stresser le moteur de CSS, car a chaque caracteres saisies, le moteur de CSS est executes.

La premire fois le moteur de CSS met 250 ms en moyenne mais apres il met
en moyenne 15 ms pour parser et appliquer les styles.

Il est aussi possible de saisir sa CSS soit avec des selectors SWT/Swing ou HTLM.

Il reste encore beaucoup de chose a faire, mais l'architecture de l'API du moteur commence a bien se statbliser.

N'hesitez pas a me solliciter si vous avez des questions.
Merci de votre attention.

Angelo

Bonjour Alec6,

J'ai étudié le cas que tu souhaiterais géré avec le HTML dans un JLabel.
J'ai pensé à une solution mais avant de l'implémenter je souhaiterais connaître ton avis.

Prenons un cas simple :

Code:

---

JLabel label = new JLabel("<html><font>bla bla bla...</font></html>");

---

Donc ce que l'on souhaiterais, c'est de pouvoir assigner un style a l'element HTML font à l'aide d'une CSS, comme ceci :

Code:

---

1 2 3 4

font { color:red; }

---

En fait ce que je te propose, c'est au lieu de surcharger le component JLabel pour pouvoir utiliser les JLabel standard de Swing, c'est que le moteur de CSS modifie le text du JLabel comme ceci :

Code:

---

<html><font color="red" >bla bla bla...</font></html>

---

Pour faire ceci, il faut charger dans un DOM le contenu HTML du JLabel puis ajouter l'attribut color avec la value red dans tous les elements Font. En terme de performance je ne sais pas trop ce que ca peut donner, mais ca permettrait d'utiliser les JLabel standard.

Que pense tu de cette solution? Si tu la trouves bien, je me mets à la tâche des que tu m'aurras donné une réponse positive.

Bonne journée

Angelo

Bonjour,

J'ai avance sur le moteur de CSS et maintenant il est possible d'appliquer des styles sur le conteu HTML d'un JLabel.

Avec le contenu HTML dans un JLabel :

Code:

---

1 2 3

JLabel label1 = new JLabel(); label1.setText("<html><font>bla bla bla...</font><br /><br /><font id=\"MyId\">bla bla bla2...</font>" + "<font class=\"purpleClass\">bla bla bla...</font><br /><br/></html>");

---

On peut appliquer la CSS suivante :

Code:

---

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

font { color:red; }   font#MyId { color:yellow; font-size:5; }   .purpleClass { color:purple; font-weight:bold; font-style:italic; }

---

Et le resultat se trouve sur ce screenshot.

Les > sont du au HTML <br />
Je ne sais pas comment resoudre ce problème aujourd'hui. Si un pro de Swing peut m'aider je suis preneur de l'information.

Merci

Angelo

C'est super.

Rien de plus à dire.

Merci Alec6,

La je suis en train de bosser sur les psuedos classes dynamiques pour gerer le cas JTextField:focus, JTextField:hover...

Je vais commencer a faire aussi un user guide pour utiliser le moteur CSS avec l'aide d'une autre personne. Elle va aussi m'aider a finaliser les selectors SWT, Swing et HTML.

L'implémentation de Swing n'atteint pas encore celle de SWT, si tu as un peu de temps a me consacrer (et surtout l'envie), je serais ravi que tu testes le moteur CSS et que l'on voit ensemble les choses a faire en Swing

Merci de ton aide.

Angelo

J'aurai bien voulu participer mais comme tu le verra sur le forum licenciement j'ai des soucis.

Alors bonne chance à tous les deux.

PS: l'idéal dans le code serait peut être de faire une classe par property (BackgroundImage, BackgroundColor etc) en passant la valeur de la propriété CSS,
et le Component à passer. Ca en fait 80 je sais au final. Mais ca permet d'ajouter facilement des propriétés pour la CSS3 et autres... Pour les propriétés composer il faut peut etre un pattern genre décorator.

Ensuite le deuxième idéal c'est d'avoir c'est classe dans un dossier externe au jar, ou dans le jar par défaut mais en avoir d'autre à l'extérieur. L'idée est d'avoir un ClassLoader dynamique qui permet comme un plugin de récupérer ces classes.

Je pense que si tu te focalise plus sur plus de généricité, c'est a dire que tu prends en charge le moteur de CSS dynamique comme tu viens de le faire et que tu permes de paramétrer le moteur, c'est à dire avoir un XML ou on dit: tel propriété se rendre sur la classe tartempion, tu feras encore plus d'heureux.
Je vais essayer de voir si Santosh Kumar peut venir jeter un oeil à ton projet. (trés bon en swing, chez sun).

En tout cas bravo.

Bonjour Alec6,

Citation:

---

J'aurai bien voulu participer mais comme tu le verra sur le forum licenciement j'ai des soucis.

---

Non je n'avais pas remarqué. Je suis désole pour toi et je te souhaite bon courage. Mais bon tu m'as l'air d'avoir de tres forte compétence, donc tu devrais trouver rapidement un job. Enfin je te le souhaite.

Citation:

---

Alors bonne chance à tous les deux.

---

Merci!

Citation:

---

PS: l'idéal dans le code serait peut être de faire une classe par property (BackgroundImage, BackgroundColor etc) en passant la valeur de la propriété CSS,
et le Component à passer. Ca en fait 80 je sais au final. Mais ca permet d'ajouter facilement des propriétés pour la CSS3 et autres... Pour les propriétés composer il faut peut etre un pattern genre décorator.

---

C'est exactement comme ca que ca marche :)
Par contre pour les prorietes composes il est vrai que je n'ai pas encore reflechi a ce probleme. Je vais y réflechir.

Citation:

---

Ensuite le deuxième idéal c'est d'avoir c'est classe dans un dossier externe au jar, ou dans le jar par défaut mais en avoir d'autre à l'extérieur. L'idée est d'avoir un ClassLoader dynamique qui permet comme un plugin de récupérer ces classes.

---

Comme je t'ai dit, la notion de property est gere. Pour le color ou le backgroundcolor, la classe qui gere ca en SWT est CSSPropertyColorSWTHandler, y a la meme en Swing CSSPropertyColorSwingHandler.

Ces handlers s'occupe d'appliquer le style color ou backround color et de recuprer le style par defaut de la widget.

Par contre je n'ai aps bien compris l'interet d'avoir un classloader dynamique. J'ai deja cree un classeloader (inspire tres fortement de ANT) qui permet de charger un jar, une classe de n'importe quelle endroit. Donc je peux utiliser cette classe pour gerer ton cas. Mais je ne comprends pas l'interet du classloader. Peut eter que ce que tu veux dire, c'est d'avoir une Application ou tu selectionne un jar (qui contient les MyCSSPropertyColorSWTHandler) provenant de ton disque (et qui n'est pas dans le classpath). C'est ca ton idee?

SI c'est ca, je pense qu'avec la classe AkrogenClassLoader que j'ai developpe on peut s'en sortir.

Citation:

---

Je pense que si tu te focalise plus sur plus de généricité, c'est a dire que tu prends en charge le moteur de CSS dynamique comme tu viens de le faire et que tu permes de paramétrer le moteur, c'est à dire avoir un XML ou on dit: tel propriété se rendre sur la classe tartempion, tu feras encore plus d'heureux.

---

En fait c'est possible de faire ca, mais avec du code JAVA, autrement dit :

Tu as deux methodes sur le moteur CSS

1. registerCSSProperty(String propertyName,Class propertyHandlerClass)
   qui permet d'associer une propriete CSS avec une interface ICSSPropertyHandler. Ex :
   
   
   Code:

   ---

   1 2	engine.registerCSSProperty("background-color", ICSSPropertyColorHandler.class);

   ---

   qui permet de dire que la propriete background-color est traite par une impl de ICSSPropertyColorHandler.
2. Ensuite chque impl (Swing SWT) du moteur CSS enregistre l'implementation des ICSSPropertyHandler. En SWT
   
   Code:

   ---

   1 2 3

   engine.registerCSSPropertyHandler(ICSSPropertyColorHandler.class, CSSPropertyColorSWTHandler.INSTANCE);

   ---

Apres il est possible d'enregistrer ta proprietes CSS et ton implementation Handler.

Citation:

---

Je vais essayer de voir si Santosh Kumar peut venir jeter un oeil à ton projet. (trés bon en swing, chez sun).

---

Ca serait génial car je suis vraiment une buse en Swing, ce qui du coup ne met pas trop en valeur Swing par rapport a SWT car je suis vraiment novice en Swing.

Merci de tes idees, et je te souhaite bon courage pour ton taf.

Angelo

Bonjour,

Un fil bien intéressant !

Quelles sont les limites du "CSS pour swing/SWT" par rapport au CSS classique pour les pages HTML ?

Est-ce que par exemple on peut rendre transparent un widget ?

EDIT : Je viens de voir cela : http://tk-ui.sourceforge.net/fr/user...tml#Properties

Bonjour Beginner,

Merci de t'interesser a ce post, cependant j'ai abandonné TK-UI car le moteur CSS que j'avais développé a intérésé la fondation Eclipse et aujourd'ui il a été intégré dans Eclipse E4.

J'ai été commiteur Eclipse E4 pendant plusieurs années, mais j'ai du arrêter car je n'ai plus de temps aujoud'ui.

Angelo

Bonjour,

Je suis désolé de venir avec plus de 10 ans de retard.
Es-ce que votre projet a abouti ?
Est-il toujours d'actualité.

Mais en recherchant des informations sur un projet permettant de combiner Swing et CSS, cette discussion était au début de la recherche Google.
C'est pourquoi je me permets de vous questionner.

Pour ma part j'ai un projet legacy en Swing.
Mon problème est que j'ai beaucoup de JTable différentes en plus avec leur JModel, JtablleModel...

Je voudrais faire un composant universelle, pour lire un document XML avec les données et leur mise en forme.
Cela pour supprimer ces composant redondants.
Une Jtable pour visualiser tous mes états, qui seraient des documents XML.

Le document reposerait sur 4classes.
Une Classe grille comme une feuille Excel , avec des classes cellules, colonne et lignes, sauf que le document est calculé une fois à l'ouverture.

Et voila le point qui m'amène ici.
Pour la mise en forme je pensais utiliser le CSS, car je vais devoir rendre portable les documents vers un navigateur web et peuêtre passé à Fx.
C'est pourquoi CSS me semble adapté pour mes différents supports cibles.

Est-ce que votre projet permettrai d'appliquer la mise en forme à une JTable ?
Le plus important pour moi :
- les bordures des cellules
- la couleur de fond de la cellule
-le texte de la cellule

et dans un deuxième temps l'appliquer aux colonnes et aux lignes.

Et pour le web générer un tableau HTML avec <table> et sa veuille de style ou juste l'appliquer à une <div> ou la balise table
Peut être exprimer la hauteur des lignes et des colonnes. en points

Cordialement