Stylage WUI⚓

Écran : Présentation des items UI⚓

Le stylage WUI apporte avec lui son lot de nouveaux items. Passons-les rapidement en revue :

Remarque :

On peut faire le parallèle de ces items avec les items de publication et plus particulièrement avec ceux des générateurs web.

editor ≈ generator
wedlingList ≈ transfList
wedling ≈ transf

wedEditor
boxWed/outlineWed
wedlingList
wedlings

wedEditor⚓
Il est le point d'entrée du stylage WUI. Il permet de déclarer son éditeur et de paramétrer ses différentes vues (vue principale, vue "Rendu", vue "Niveaux de titres").
boxWed/outlineWed⚓
Il s'agit des vues ajoutées dans le wedEditor.
Il permet de déclarer des wedlingLists ou des wedlings, de modifier les thèmes, d'ajouter du code CSS partageables (sharedCSS) etc.
wedlingList⚓
Il permet de lister des wedlings.
wedlings⚓
Ce sont ces items qui permettent de lier les .model et de leur donner des règles d'affichage.
Il y en a autant qu'il y a de .model différents (dataForm, text, binary, remote etc.)

Étude d'un exemple de structuration HTML de l'éditeur⚓

Truc & astuce : Panneau de développement⚓

Il est possible depuis SCENARItest d'ouvrir un panneau de développement

Cette vue permet d'accéder facilement à la structure HTML de l'éditeur ainsi qu'aux CSS associés. Ce panneau sera très important afin de tester ses modifications de même que de trouver les bonnes classes à styler.

Truc & astuce :

Ouvrez les Outils de développement de votre navigateur lorsque vous aurez lancé SCENARItest pour accéder aisément à la structure HTML de l'éditeur comme aux CSS associées. Cet outil sera très important pour tester ses modifications ainsi que de trouver les bonnes classes à styler.

Regardons en détail la structure du bloc Introduction de l'item Astre.

Une balise de type box-collaps qui possède plusieurs propriétés (skin, skinOver, collapsMode, class, wed-name etc.)

Cette balise appelle un stylage CSS défini par des data-code correspondant aux propriétés skin et skinOver.

Il est ensuite composé d'une div.head (correspondant au titre de la balise) et d'une div.body (correspondant à son contenu)

Remarque : La classe content est intimement liée au family du .model correspondant.

Comment styler ce bloc ?⚓

Deux méthodes complémentaires :

Il est possible de styler ce bloc depuis un .wdl qui appelle le bon .model
- layout : permet de définir si l'affichage du bloc sera vertical ou horizontal
- collapsed et collapsedMode : permettent de définir si le bloc peut être refermé et de quelle façon
- style : permet d'ajouter du code CSS
- class : permet d'ajouter une class au bloc qui pourra ensuite être stylé via la deuxième méthode
- appendSharedCssKey : permet d'ajouter un sharedCSS au bloc qui pourra être stylé via la deuxième méthode
- ifAbsent : ajoute un bouton si le bloc n'est pas encore renseigné
Il est possible de styler plus globalement l'éditeur depuis le fichier .wed et plus particulièrement dans la partie uiGuidelines
On retrouve ici le sharedCSS : nous pouvons associer du CSS à une key par défaut (box/head-body ; box/head-body/block, etc.) ou à une key définie via la première méthode. C'est cette valeur qu'on retrouve dans la propriété skin de l'éditeur. Les règles posées ici peuvent soit être en mode append pour indiquer que ce code est rajouté au code par défaut (il le complète, mais ne le remplace pas) ou alors en mode replace.

Conseil : Pour résumer⚓

On commence par la seconde méthode afin de mutualiser le plus de stylage. Puis, pour aller plus en détail selon les items, on utilise la première méthode.

Truc & astuce :

Le sélecteur :host fait référence à la racine du widget.