Discussion :

[azerr]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[azerr]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Alec6]

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.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Alec6]

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

[azerr]

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.

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

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?

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

JLabel#MyId {
color:blue;
}

Et dans ton code Java tu fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Angelo

[Alec6]

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.

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

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.

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

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

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