Tout élément peut réagir au click de souris ou au touché du doigt. Il est même possible de localiser ce click et d'agir en conséquence.
Pour tout cela, il faut utiliser les clefs Click et MapClick. La première réagit à un click sur un élément quelque soit l'endroit où il advient. La deuxième permet de définir des régions rectangulaires à l'intérieur de l'élément.
Pendant qu'on y est, remarquons que les clefs qui commencent par une majuscule ont des actions spéciales. Nous avons déjà vu Text, Sub et Ext. Maintenant vous en connaissez deux nouvelles et nous allons tout de suite les illustrer par des exemples.

1. Click

La valeur de la clef Click est simplement le nom de la page vers laquelle il faut aller quand l'utilisateur clique sur cet élément. Copiez ce code dans le fichier main.yml et testez le :
Sub:
  - Text: Cliquez ici pour aller au Nord.
    top: 0
    Click: nord
  - Text: Cliquez ici pour aller au Sub.
    bottom: 0
    Click: sud
Vous remarquez le bel écran rouge qui apparaît quand vous cliquez sur l'un des textes ? Il vous indique simplement que la page destination n'existe pas. Il faut donc créer les pages manquantes. Voici le code de nord.yml, je vous laisse faire l'autre :
Sub:
  - Text: Cliquez ici pour aller au Nord.
    top: 0
    Click: nord
  - Text: Cliquez ici pour aller au Sub.
    bottom: 0
    Click: sud
Remarquez le nom de la page dans le Click de cette nouvelle page : @BACK. C'est une pseudo page qui permet de revenir d'où on vient. Il existe une autre pseudo-page : @THIS. Celle-ci permet de réafficher la page courante.

2. MapClick

Dans le répertoire de votre projet, mettez l'image ci-contre avec le nom boussole.jpg. Pour la récupérer, cliquez dessus avec le bouton droit et choisissez "Enregistrer l'image sous...". Puis créez le fichier main.yml avec le code suivant :
background: white
color: black
font-size: 150%
left: 0
top: 0
width: 100%
height: 100%
Sub:
 - Text: "Cliquez sur un point cardinal"
   text-align: center
   vertical-align: middle
   left: 0
   top: 0
   width: 100%
   height: 10%
   background: "#eee"
   border-bottom: 1px solid black
 - Tag: img
   @src: boussole.jpg
   left: 0
   top: 10%
   width: 100%
   height: 90%
   MapClick:
     - [null]
Normalement, quelque chose devrait vous intriguer dans ce code. A vrai dire, deux choses devraient vous interroger. Les clefs Tag et @src.
Je les ai mises ici pour vous montrer que cela existe, mais en fait vous ne devriez pas avoir souvent besoin de les utiliser. Mais il faut avouer que ça simplifie les choses. La clef Tag permet de déterminer le type d'élément HTML qui va être créé. Par défaut, ToloWebStudio suppose que vous voulez créer des DIV (vous pouvez voir cela en utilisant la combinaison de touches Ctrl-Shift-I dans Google Chrome), mais puisque nous avions envie d'ajouter une image, on a simplement spécifié que nous préférions avoir un élément IMG. Ensuite, cet élément IMG s'attend à avoir un attribut nommé src. Et pour le créer, nous utilisons la clef @src. Le "@" signifie que notre clef correspond à un attribut HTML. Si vous voulez en savoir plus sur les éléments HTML et leurs attributs, référez vous ici.
Revenons à notre MapClick. Dans le code précédent, observez les deux dernières lignes. La valeur de cette clef est une liste dont chaque élément est une liste. L'utilisation des crochets permet de définir une sous-liste (une liste imbriquée dans une autre liste, en somme). Dans ce code, nous avons un null qui signifie qu'il ne faut rien faire quand on clique. Mais alors, quel intérêt me direz-vous ? Hé bien, de cette façon, on a quand même indiqué à ToloWebStudio que nous voulions créer une carte de click et l'élément va quand même réagir aux clicks, mais à sa manière, c'est-à-dire en écrivant les coordonnées du click dans la zone de debug. Vous pouvez voir celle-ci en pressant simultanément les touches du clavier Ctrl-Shit-I dans Google Chrome. Voici un exemple de ce que vous devriez voir (si vous cliquez sur le bouton en haut à droite : console).
Pour définir un rectangle actif, il faut indiquer les coordonnées du coin supérieur gauche et celles du coin inférieur droit. Le plus simple est donc de cliquer sur l'image et de lire les coordonnées qui s'affichent dans la zone de debug. Les coordonnées affichées sont extrèmement précises, mais vous ne serez jamais obligé d'aller si loin et la plupart du temps, des coordonnées entières feront très bien l'affaire. Voici ce que l'on peut définir pour avoir 4 rectangles actifs sur notre boussole :
background: white
color: black
font-size: 150%
left: 0
top: 0
width: 100%
height: 100%
Sub:
 - Text: "Cliquez sur un point cardinal"
   text-align: center
   vertical-align: middle
   left: 0
   top: 0
   width: 100%
   height: 10%
   background: "#eee"
   border-bottom: 1px solid black
 - Tag: img
   @src: boussole.jpg
   left: 0
   top: 10%
   width: 100%
   height: 90%
   MapClick:
     - [31,27,50,43, nord]
     - [50,22,70,41, est]
     - [26,48,50,70, ouest]
     - [55,47,75,60, sud]
Un peu d'interactivité
12 janvier 2013
Sommaire général