# Java > Interfaces Graphiques en Java > AWT/Swing >  Moteur de CSS pour Swing, SWT

## azerr

Bonjour,

Je me permets de poster un message concernant le moteur de CSS que je suis en train d'implmenter pour grer 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 gre 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 gnrique et surtout il suit les spcification w3c.

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

Concernant les rgles de slection 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 : 



```

```

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



```

```

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

Cette rgle utilise batik pour grer ceci, mais il est possible de creer ses propres rgles.

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

----------


## azerr

Bonjour,

Je pense que mes examples n'etaient pas assez pertinent car ca n'a pas l'air d'intresser 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 : 



```

```

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

Angelo

----------


## Alec6

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

Je n'aime pas les frameworks, je prfre avoir des petits outils.

J'ai dj 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 dplaisant.

Pour mon composant j'utilise la technique d'un couteur d'vnement AWTEventListener, sur les containers. Et  chaque composant ajout je calcul l'apparence CSS. C'est pas trs compliqu. 
Mon rve 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.

----------


## azerr

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 : 



```

```

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

La mthode 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 itrer 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 itre sur chacune des CSS rules et verifient que le Component vrifie la rgle.

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. 



```

```

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 rgles CSS. Des qu'un regle CSS est applicable, appliquer la regle CSS a l'aide d'une implementation de ICSSPropertyHandler.

Angelo

----------


## Alec6

Trs bien,

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

comment tu fais pour grer quand on ajoute des composants  la fentre aprs 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 mthode setName de Component pour une utilisation classique comme en HTML (malheureusement pas de setId).

----------


## azerr

> je n'est pas de connaissance sur la cration d'un renderer,


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




> il me manque donc l'application des slectors


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).




> comment tu fais pour grer quand on ajoute des composants  la fentre aprs 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 rflchir.
Ca arrive souvent que l'on ajoute au runtime des Component?



> 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 : 



```

```

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



```

```

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 : 



```

```

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 : 




> JLabel#MyId {
> 	color:blue;		
> }


Et dans ton code Java tu fais : 



```

```

Ou 



```

```

Angelo

----------


## azerr

Bonjour Alec6,

Tu m'a l'air d'avoir une bonne experience concernant les CSS, serais tu intress 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.




> Mon rve 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

----------


## Alec6

En faite ton projet et certains de mes projets ont des problmatiques 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 ---> gnration d'IHM
- skinning d'une IHM par une CSS (ca devrait tre un Jar diffrent).
Et il ne doit pas forcment y avoir de dpendance 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 tte (enfin qui demande une expertise), et se veut tre un projet de recherche sur les IHM. L'ide est de faire l'introspection d'un model de donnes pour gnrer l'IHM qui convient  sa manipulation (pas nouveau dans l'ide). 

L'ide nouvelle c'est de ne pas produire un XML qui dcrit la structure de l'IHM mais un XML qui dcrit la structure du dialogue que l'IHM doit matrialis.

En effet un IHM permet  l'homme de dialoguer avec le systme en ayant des question et des rponses, des sujets et sous sujets, des notifications etc...
Pour un mme dialogue plusieurs structure d'IHM sont possibles mais certaines sont plus cohrentes que d'autre (il faut lire les rfrentiels de l'ergonomie).

J'ai donc:
- Data Model  --> XML (structure du dialogue=mtamodle d'IHM)
- XML --> IHM 
(le CSS est un plus mais c'est interressant)
Et en rponse  un commit
- IHM --> XML (dialogue en retour, donc avec des questions rpondues)
- XML --> Data Model

Tu vois le problme commun avec les rendereurs !

J'ai donc des parties indpendantes:
- Data Model --> XML (on peu imaginer n'importe quel langage) donc pas de dpendance avec la suite.
- XML --> IHM (comme tu le fais), mais il faut des jars diffrents 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 indpendantes que possible et pour chaque partie crit une procdure 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 succs.

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.

----------


## azerr

Bonjour,




> 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 ---> gnration d'IHM
> - skinning d'une IHM par une CSS (ca devrait tre un Jar diffrent).


Le moteur de CSS est completement indpendant de TK-UI (- parsing d'un flux xml ---> gnration 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.




> En effet un IHM permet  l'homme de dialoguer avec le systme en ayant des question et des rponses, des sujets et sous sujets, des notifications etc...
> Pour un mme dialogue plusieurs structure d'IHM sont possibles mais certaines sont plus cohrentes que d'autre (il faut lire les rfrentiels 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 estdcrite en XML.




> En somme morcelle ton projet en autant de parties indpendantes que possible et pour chaque partie crit une procdure 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)...



> 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

----------


## azerr

> Tu vois le problme 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 problmatique des renderers.

Angelo

----------


## azerr

Bonjour alec6,




> 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

----------


## Alec6

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.

----------


## azerr

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 : 



```

```

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





> 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

----------


## Alec6

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  grer les problmes de layout des CSS ?

----------


## azerr

> 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.




> 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. 




> Est ce que tu arrives  grer les problmes 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

----------


## Alec6

Voici des ides et problmes  rsoudre, 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  dj 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 sduisant 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 rcuprer 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).

----------


## thfaure

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

----------


## azerr

> - 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  dj 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 ide. 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.




> - La mise en forme du texte est du fond est de loin l'aspect le plus sduisant 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.




> Il faudrait pouvoir rcuprer 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 : 



```

```

Ou 



```

```

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

----------


## azerr

Bonjour Theodore,




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


La premire 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.




> 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

----------


## azerr

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  : 



```

```

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.



```

```

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



```

```

Met en vert uniquement les JCheckBox.

J'ai aussi gere les backround image.


```

```

Permet d'ajouter un icone sur les JButton.

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

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.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

----------


## Alec6

Je peux pas encore mettre la tte 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 spcialis, en dtournant Flying Saucer.

Ensuite pour tes balises custom vas y molo en faite; 
L'idal c'est de penser au travail en quipe. Moi j'ai une application swing, pour l'aquelle j'ai fait la maonnerie. 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 problme avec l'hritage, car tu fais une property JButton (comme si c'tait un tag html). Mais comment tu gres l'hritage avec un JTogglePanel (si ca hrite bien  :8O: ) par exemple.
Ca donnerait d'office JButton.JTogglePanel { }.

En somme laisse les dveloppeurs swing appliquer leur noms de classes.
Solution plus intressante peut tre:  cot de la css pure et dure il faudrait un XML par exemple qui face l'intermdiaire en disant tout les JButton je veux qu'il ait le style de la class perlimpimpin dfinie dans la CSS (un XML de mdiation 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 ds que possible. 
PS: je suis chiant parait-il en quipe.

----------


## azerr

Bonjour Alec6,

Merci pour t arponse.




> Je peux pas encore mettre la tte 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.




> 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 spcialis, en dtournant Flying Saucer.


Je vais rflechir  cette problmatique. 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.




> Ensuite pour tes balises custom vas y molo en faite; L'idal 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 implmentant 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.




> 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, grer ce cas : 

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




> 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.




> Mais comment tu gres l'hritage avec un JTogglePanel (si ca hrite 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   {....}




> En somme laisse les dveloppeurs swing appliquer leur noms de classes.


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




> Solution plus intressante peut tre:  cot de la css pure et dure il faudrait un XML par exemple qui face l'intermdiaire en disant tout les JButton je veux qu'il ait le style de la class perlimpimpin dfinie dans la CSS (un XML de mdiation en somme). Ca permettrait aussi d'etre plus souple en fonction de Swing ou de SWT.


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



```
JButton  {...}
```




> Je suis encore emmerd par un projet, mais j'arrive ds que possible.


Cool!




> 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 implmenter la mthode 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

----------


## azerr

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 : 



```

```

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

----------


## azerr

Bonjour Alec6,

J'ai tudi le cas que tu souhaiterais gr avec le HTML dans un JLabel.
J'ai pens  une solution mais avant de l'implmenter je souhaiterais connatre ton avis. 

Prenons un cas simple : 



```
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 : 


```

```

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 : 



```
<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 tche des que tu m'aurras donn une rponse positive.

Bonne journe

Angelo

----------


## azerr

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 :



```

```

On peut appliquer la CSS suivante : 



```

```

Et le resultat se trouve sur ce screenshot.

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

Merci

Angelo

----------


## Alec6

C'est super.

Rien de plus  dire.

----------


## azerr

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'implmentation 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

----------


## Alec6

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'idal dans le code serait peut tre de faire une classe par property (BackgroundImage, BackgroundColor etc) en passant la valeur de la proprit CSS, 
et le Component  passer. Ca en fait 80 je sais au final. Mais ca permet d'ajouter facilement des proprits pour la CSS3 et autres... Pour les proprits composer il faut peut etre un pattern genre dcorator.

Ensuite le deuxime idal c'est d'avoir c'est classe dans un dossier externe au jar, ou dans le jar par dfaut mais en avoir d'autre  l'extrieur. L'ide est d'avoir un ClassLoader dynamique qui permet comme un plugin de rcuprer ces classes.

Je pense que si tu te focalise plus sur plus de gnricit, 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 paramtrer le moteur, c'est  dire avoir un XML ou on dit: tel proprit 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. (trs bon en swing, chez sun).

En tout cas bravo.

----------


## azerr

Bonjour Alec6,




> 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 dsole pour toi et je te souhaite bon courage. Mais bon tu m'as l'air d'avoir de tres forte comptence, donc tu devrais trouver rapidement un job. Enfin je te le souhaite.




> Alors bonne chance  tous les deux.


Merci!




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


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 rflechir.




> Ensuite le deuxime idal c'est d'avoir c'est classe dans un dossier externe au jar, ou dans le jar par dfaut mais en avoir d'autre  l'extrieur. L'ide est d'avoir un ClassLoader dynamique qui permet comme un plugin de rcuprer 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.




> Je pense que si tu te focalise plus sur plus de gnricit, 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 paramtrer le moteur, c'est  dire avoir un XML ou on dit: tel proprit 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

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



```

```

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


```

```



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




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


Ca serait gnial 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

----------


## Beginner.

Bonjour,

Un fil bien intressant ! 

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

----------


## azerr

Bonjour Beginner,

Merci de t'interesser a ce post, cependant j'ai abandonn TK-UI car le moteur CSS que j'avais dvelopp a intrs la fondation Eclipse et aujourd'ui il a t intgr dans Eclipse E4.

J'ai t commiteur Eclipse E4 pendant plusieurs annes, mais j'ai du arrter car je n'ai plus de temps aujoud'ui.

Angelo

----------


## CoderInTheDark

Bonjour,

Je suis dsol 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 dbut de la recherche Google.
C'est pourquoi je me permets de vous questionner.

Pour ma part j'ai un projet legacy en Swing.
Mon problme est que j'ai beaucoup de JTable diffrentes en plus avec leur JModel, JtablleModel...

Je voudrais faire un composant universelle, pour lire un document XML avec les donnes 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'amne  ici.
Pour la mise en forme je pensais utiliser le CSS, car je vais devoir rendre portable les documents vers un navigateur web et peutre pass  Fx.
C'est pourquoi CSS me semble adapt pour mes diffrents 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 deuxime temps l'appliquer aux colonnes et aux lignes.

Et pour le web gnrer 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

----------

