(la mise à jour de cette page est au programme, avec description de quelques nouveautés 3.3 et 3.4 : StylableWidget / HiddenWidget. -- stp)

Le Stylage Standard

Pour les dataforms

Le stylage standard à pour rôle l'amélioration de lisibilité d'un contenu dans les éditeurs (Note : ces stylages standard peuvent ensuite être surchargés par les attributs tagStyle dans sm:authoring/sm:formEditor des .model). Il y a donc à présent 3 possibilités de stylage standard des balises :

• property : style le plus léger dans une petite police et une couleur bleu-vert.
• content : style simple, police de taille normal, non gras, bleu.
• zoom : style de balise classique : police de taille normal, gras, bleu.

Dans dataFormPrim et titlePrim, le style appliqué est "property". Pour dataFormPrim, dans sm:authoring/sm:formEditor/@defaultStyle, il est possible de spécifier un des 2 autres styles standard pour chaque champ ou groupe de champ.

Pour les compositions

Dans compositionPrim, le style standard de chaque sm:part de la composition dépend de la valeur de sa family, il y a un style par défaut de plus :

• sub-level : le même style que zoom est choisi.

Le Stylage Personalisé

Vous pouvez appliquer des propriétées de type "style CSS", par exemple aux parts des compositions : Dans les tags sm:authoring -> sm:formEditor, pour chaque part à styler, mettez vos styles CSS dans les attributs tagStyle.

Dans l'exemple ci dessous :

font-size:16pt; font-family:Comic Sans,cursive; font-weight:bold; color:#7777FF; background-color:#000055;border-left:14px solid #7777FF; padding:4px;
font-size:16pt; font-family:Comic Sans,cursive; font-weight:bold; color:#77FF77; background-color:#005500;border-left:14px solid #77FF77; padding:4px;

Attention, même si le stylage ressemble a du CSS, il s'agit d'un stylage "Mozilla/XUL" qui dans les programmes SCENARI peuvent être différents :

• vous ne pouvez pas exprimer de tailles en % (utilisez -moz-box-flex:10000 si vous voulez émuler un width:100%)
• vous ne pouvez pas mettre de background image (utilisez sm:iconTag pour chaque part, ce n'est pas un background mais une icône affichée à gauche du nom du champ, pas de limite fixe de taille)
• vous pouvez utilisez certains attributs spéciaux de cette liste :  http://www.xulplanet.com/references/elemref/ref_StyleProperties.html

Quelques exemples :

• pour masquer complètement le titre (mais pas l'icone) : visibility: collapse;
• bleu sur fond bleu claire, en gros, avec bordure arrondie :

  font-size:18px; font-weight:bold; margin-top:8px; width:100%; background-color:#CCCCFF; color:#3333AA; -moz-box-flex:10000; -moz-border-radius:8px; padding-left:6px; padding-right:6px; padding-top:2px; padding-bottom:2px;
  

Stylage de l'onglet visualisation

Composition

Dans les compositions, l'affichage des parts pour l'onglet visualisation peut être controlé par les propriétées de sm:authoring > sm:htmlPreview, exemple :

<sm:block refCode="remark" display="true" displayLevel="true" displayPartName="false"> 
        <sm:iconBlock sc:refUri="/utc/ics/rapidlearning/webStaticGen/img/remarque.gif"/> 
        <sm:externalisedChildPreview itemName="hide" title="show" icon="hide" error="show" preview="show"/> 
</sm:block>

• @display : affiche/masque la part
• @displayLevel : affiche/masque la matérialisation du niveau courant (si=false, affichage direct des éléments fils sans matérialisation de la part)
• @displayPartName : afficha/masque le nom de la part (placé avant le titre)
• iconBlock :
  • si présent + sc:refUri -> affichage de l'icon spécifiée avant le titre de la part
  • si présent et pas de sc:refUri -> affichage d'une puce (différente par niveau) avant le titre de la part
  • si absent : pas d'affichage d'image ni de puce avant le titre de la part extenalisedChildPreview : paramètre l'affichage des items externalisés:

• @itemName : Affiche/masque le nom de l'item pointé
• @title : Affiche/masque le titre de l'item pointé
• @icon : Affiche/masque l'icône associé à l'item pointé
• @error : Affiche/masque une icône d'erreur quand l'item pointé est de type incorrect
• @preview : Affiche/masque une prévisualisation de l'item pointé. Attention, pris en compte uniquement pour les items de type 'image'

Remarque : on peut mettre @refCode=* pour déterminer les affichages par défaut et surcharger ensuite avec d'autres blocks moins génériques (@refCode="remark", ...).

Dataforms

Par défaut, les dataforms n'apparaissent pas en prévisualisation. Pour les faire apparaitre, il faut choisir l'un des 2 types d'affichage, dans authoring > htmlPreview :

• sm:contentView : affiche le contenu de la dataform directement dans l'onglet preview

• sm:popupView : affiche le titre de la dataform, et son survol donne accès a une popup précisant le contenu

Les propriétées suivantes sont disponibles :

<sm:popupView titleFormat="fullTitleText" popupLinkText=" (méta) "/>

• @titleFormat : affichage du titre long ou du titre court
• @popupLinkText : texte sur lequel on doit passer la souris pour afficher le popup

Différentes évolutions de l'onglet de visualisation sont envisagées pour les prochaines versions, afin de le rendre non-redondant avec l'onglet d'édition.