Factoriser pour mieux régner

On a vu dans le didacticiel précédent que l'affichage d'un bouton peut être un peu compliqué. C'est dommage parce que on sera peut-être amené à utiliser souvent des boutons dans nos projets.

Qu'à cela ne tienne, ToloWebStudio vous offre la possibilité de définir des éléments complexes dans des fichiers différents. Dans notre cas, par exemple, il nous suffit de créer le fichier bouton.yml comme ceci :

left: 0%
top: 80%
width: 50%
height: 20%
Sub:
 - position: relative
   display: table
   width: 100%
   height: 100%
   Sub:
     - Text: Non
       position: relative
       display: table-cell
       top: 0
       left: 0
       width: 100%
       height: 100%
       font-size: 200%
       color: yellow
       text-align: center
       vertical-align: middle
       background: "#333"
       border: "medium solid #777"
 - left: 0
   top: 0
   width: 100%
   height: 60%
   border-radius: 0 0 50% 50%
   background: "#ffe"
   opacity: 0.5

Et pour l'utiliser dans notre fichier main.yml, il suffira d'utiliser la clef Ext qui permet d'inclure et d'étendre (extend en anglais) un élément provenant d'un autre fichier.
En voici le code :

background: white
color: black
font-size: 150%
left: 0
top: 0
width: 100%
height: 100%
Sub:
 - Text: "<html>Êtes vous vraiment sûr de vouloir faire ce que vous vous apprêtez à faire ?<hr/>C'est peut-être bien une annerie, vous savez ?"
   text-align: justify
   left: 10%
   top: 10%
   width: 80%
   height: 30%
 - Ext: bouton
 - Ext: bouton
   left: 50%

On remarque trois choses :

il ne faut pas spécifier l'extension du fichier (on écrit bouton et pas bouton.yml),

il est possible de modifier une propriété de style définie par l'élément étendu (ici, on a utilisé left: 50% pour le second bouton, sans quoi ils auraient été superposés),

malheureusement, les deux boutons affichent le même texte.

Pour régler ce problème, nous allons devoir utiliser une nouvelle notion : les attributs. Les attributs ressemblent aux propriétés de style au sens où ils sont hérités par les sous-éléments. Mais la différence est qu'un attribut ne fait rien d'autre que porter une valeur. Cette dernière ne modifie ni l'affichage, ni le comportement de l'élément qui le porte. Ils ont quand même un intérêt, bien sûr : leur valeur peut être affectée à la valeur de n'importe (presque) quelle clef.

Pour déclarer un attribut, il suffit de faire commencer le nom de la clef par un $. Et pour lire la valeur d'un attribut, il faut utiliser la syntaxe suivante : Text: att(caption).

Voici ce que devient le fichier bouton.yml :

$caption: Click...
left: 0%
top: 80%
width: 50%
height: 20%
Sub:
 - position: relative
   display: table
   width: 100%
   height: 100%
   Sub:
     - Text: att(caption)
       position: relative
       display: table-cell
       top: 0
       left: 0
       width: 100%
       height: 100%
       font-size: 200%
       color: yellow
       text-align: center
       vertical-align: middle
       background: "#333"
       border: "medium solid #777"
 - left: 0
   top: 0
   width: 100%
   height: 60%
   border-radius: 0 0 50% 50%
   background: "#ffe"
   opacity: 0.5

Et voici le fichier main.yml qui l'utilise :

background: white
color: black
font-size: 150%
left: 0
top: 0
width: 100%
height: 100%
Sub:
 - Text: "<html>Êtes vous vraiment sûr de vouloir faire ce que vous vous apprêtez à faire ?<hr/>C'est peut-être bien une annerie, vous savez ?"
   text-align: justify
   left: 10%
   top: 10%
   width: 80%
   height: 30%
 - Ext: bouton
   $caption: Non.
 - Ext: bouton
   left: 50%
   $caption: Oui !
 - Ext: bouton
   top: 60%

Dans cet exemple, on a ajouté un bouton pour voir ce qui arrive quand on ne déclare par d'attribut caption.