Comment styler le générateur OpaleWeb

Les Templates d'Opale

Le générateur Web d'Opale utilise 3 templates de pages:

• PDG : 1 template pour la page de garde

• Vue Plan/Contenu : 1 template pour le contenu du module Opale

• Vue Outils : 1 template pour les outils c'est-à-dire l'index, le glossaire, les références, la bibliographie, les articles de code et le crédit des resources

Principe de base - 2 niveaux de stylages:

L'iconographie d'un site Opale généré est répartie dans plusieurs dossiers.

D'une manière générale, il faut distinguer 2 types de stylage:

• un stylage "macro", c'est l'enveloppe, la carrosserie du site WEB (par exemple, les boutons de navigations, les logos permanents, etc...). Le stylage "macro" concerne généralement des éléments plutôt statique.
• un stylage "micro", c'est la mise en forme du contenu. Le stylage "micro" concerne généralement des éléments plutôt dynamique.

Opale utilise 3 templates différents pour générer un site Web:

• un template par défaut pour la vue contenu
• un template pour la page de garde
• un template outil pour la vue outil (permettant d'accéder à la liste des glossaires, acronymes, biblio, crédits des ressources, etc...)

Attention !
Pour chaque template, il y a 2 css correspondante :

• une CSS "macro" qui stylera, positionnera les boites/zones encapsulantes. Les CSS "macro" se trouve dans le dossier "tplRes" (dans un sous-dossier correspondant au template).
• une CSS "micro" qui stylera, positionnera le contenu de ces boites/zones. Les CSS "micro" se trouve dans le dossier "styles"(dans un sous-dossier correspondant au template).

Pour Opale, 3 templates nous donneront donc 6 CSS (3 "micro" et 3 "macro").Voici l'architecture d'un site Web généré par un générateur Web Opale:

Le Stylage - Modélisation ScenariBuilder

Il existe 4 manières avec SCBuilder d'insérer une icone/image dans un générateur Web:

Méthode 1 - Template:

Insertion d'une image dans un template

Méthode 2 - Transformeur:

Insertion d'une image dans un transformeur

Méthode 3 - CSS "Macro":

Image dans un dossier "xxx.uitemplate.doss/img" lié à un xxx.uistyle.xhtml

Méthode 4 - CSS "Micro":

Image dans un dossier "xxx.uistyle.doss/site/img_uistyle" lié à un xxx.uistyle.xhtml. La css est incluse dans le fichier "xxx.uistyle.xhtml".

Le Stylage - Génération ScenariChain

Voici le résultat des 4 méthodes en terme de génération via ScenariChain

Methode 1 - Template:

Si on insère une image directement dans un template (typiquement, l'insertion des icones/flèches de navigations), cette image sera automatiquement recopier dans le dossier "tplRes" dans le sous-dossier de même nom que le template.

Methode 2 - Transformeur:

Les images insérées dans un transformeur se retrouveront automatiquement dans un dossier "lib" (fils du dossier racine du module Opale).

Methode 3 - CSS "Macro":

Dans la génération finale, les css stylant la structure statique (la "carrosserie") d'un template se trouve dans un dossier "tplRes".

Ce dossier "tplRes" contient un sous-dossier par template.

Chaque sous-dossier contient une css "macro" et éventuellement un dossier "img" contenant l'iconographie concernant la structure. La css "macro" pointera sur une image/icone "macro" contenu dans le dossier "img" frère de la css.

Methode 4 - CSS "Micro":

Dans la génération finale, les css stylant le contenu dynamique d'un template se trouve dans un dossier "styles". Ce dossier "styles" contient un sous-dossier par template.

Chaque sous-dossier contient une css "micro".

On s'aperçoit dans ce cas que le dossier "img_uistyle" contenant les images pour styler le contenu dynamique d'un template et la feuille CSS appelant ces images ne se trouvent pas aux mêmes endroits dans SCENARIbuilder et dans une génération finale issue de SCENARIchain.

Pour accéder à une image depuis la css "micro", on pointera vers le dossier "img_uistyle" contenant l'iconographie concernant le contenu en utilisant le chemin relatif ("../../img_uistyle/xxxx.jpg").

Pour conclure - Mécanisme de stylage et Modélisation

Voilà un aperçu générale des mécanismes de stylage, de la modélisation dans SCENARIbuilder à la génération dans SCENARIchain.

Ces mécanismes expliquent pourquoi il existe plusieurs endroits dans un site Web généré (par SCENRAIchainV3 en générale et Opale en particulier) où l'on peut trouver des images.

L'endroit où on trouvera l'image/icone dans le site généré dépendra de la modélisation, de la nature de l'image et de la façon dont elle a été intégré dans SCENARIbuilder.

Ainsi, pour le stylage de la structure (le stylage "macro"), on utilisera les méthodes 1, 2 et 3. Pour le stylage du contenu (le stylage "micro"), on utilisera la méthode 4.