sommaire
indexpage précédentepage suivante
imprimer
envoyer
marquer
Déclencher des actions et interagir avec une application: <interaction> |
Un élément <interaction> permet de définir une série d'actions, dont le rôle est de gérer dynamiquement le contenu d'une page web. Ces actions peuvent servir à activer ou désactiver des options, montrer ou masquer des blocs, ouvrir ou fermer des blocs, gérer des présentations, interagir avec l'Intranet, pré-remplir des formulaires, créer des paramètres, etc. Elles seront déclenchées en réponse à différents évènements: au chargement de la page, lorsqu'un lien hypertexte est activé, lors d'une transition dans une présentation, lorsqu'un bouton d'un formulaire est activé, etc. Ces actions peuvent être définie directement dans l'élément <interaction>, ou provenir d'une application extérieure, écrite en PHP par exemple. Cette application sera appelée au moment du chargement de la page, ou dynamiquement en réponse à une action de l'utilisateur (via un lien hypertexte, par exemple). L'application et la page web pourront ainsi interagir dynamiquement, sans devoir à chaque fois recharger le contenu du navigateur (la page reste affichée en permanence, seules des parties de celles-ci seront modifiées, grâce aux actions envoyées par l'application). L'exemple qui suit active une option o1 et désactive une option o2. Les actions sont exécutées lors du chargement initial de la page, grâce à la présence de l'attribut automatique="oui". Exemple <interaction automatique="oui"> <actions>activer:o1,désactiver:o2</actions> </interaction>
|
Définir les actions depuis une application webL'élément <interaction> peut posséder un lien hypertexte (attribut href, par exemple) donnant l'URL d'une application ou d'un fichier accessible par le web. La plupart du temps, il s'agira d'une application écrite en PHP, mais tout ce qui est accessible via une URL et qui retourne une chaîne de caractères (avec un type mime text/plain) peut faire l'affaire. Lorsque les actions de l'élément sont déclenchées, la page web se connectera à cette URL pour obtenir dynamiquement la liste des actions à exécuter (en utilisant AJAX et Javascript). Cette liste d'action prend la forme d'une chaîne de caractères où chaque actions est séparée des autres par des virgules ou des retours à la ligne. |
Cet exemple d'<interaction> va chercher les actions à exécuter dans une application PHP, donnée par l'attribut href. Exemple <interaction ancre="i1" href="http://www.ulb.ac.be/sitemanagerapps/samples/interaction.php"/> Ces actions ne seront exécutées que lorsque vous cliquerez sur le lien hypertexte ci-contre, qui utilise l'attribut cible suivant: Exemple <p><a cible="exécuter:i1">déclencher les actions</a></p> Le code utilisé dans l'application PHP est le suivant: Exemple <?php
header('Content-Type: text/plain;charset=UTF-8');
header("Access-Control-Allow-Origin: *");
echo "inverser:option1\n".
echo "inverser:option2\n";
?>La première ligne indique que l'application retourne une réponse de type texte (type mime text/plain) avec UTF-8 comme type d'encodage. La deuxième ligne indique au navigateur que la réponse de l'application peut être lue à partir de n'importe quelle page web, quel que soit le domaine auquel elle appartient (Cross-domain policy). Les deux dernières lignes renvoient les deux actions à exécuter (séparées par des retours à la ligne "\n"), qui inversent l'état des deux options. |
|
Passer des paramètres à l'applicationIl est possible de passer des paramètres à l'application distante, grâce à des éléments <paramètre nom="...">...</paramètre> placés au sein de l'élément <interaction>. La valeur de ces paramètres peut faire usage d'autres paramètres écrits entre accolades, comme le montre l'exemple qui suit. |
Dans cet exemple, deux paramètres date et langue sont passés à l'application distante. La valeur de ces paramètres est donné par les paramètres {server:date} et {page:lang} contenant respectivement la date courante et la langue dans laquelle la page est écrite. Exemple <interaction automatique="oui" set="result"
href="http://www.ulb.ac.be/sitemanagerapps/samples/delay.php">
<paramètre nom="date">{server:date}</paramètre>
<paramètre nom="langue">{page:lang}</paramètre>
</interaction>
<bloc bords="arrondis" style="colorBar4" options="dataOk">
<p>{result:data}</p>
</bloc> L'application crée un paramètre data dans l'ensemble de paramètres result et active une option dataOk. Le paramètre data contiendra une phrase en français ou en anglais (en fonction du paramètre langue) mentionnant la date additionnée d'un délai de 15 jours. La valeur de data est affichée dans un bloc, qui ne sera visible que lorsque l'option dataOk est activée (c'est-à-dire lorsque l'application aura renvoyé sa réponse). Le code de cette application est le suivant: Exemple <?php
header('Content-Type: text/plain;charset=UTF-8');
header("Access-Control-Allow-Origin: *");
$lang = $_REQUEST["langue"];
$darray = explode("/", $_REQUEST["date"]);
$date = date("d/m/Y", mktime(0,0,0,$darray[1],$darray[0]+15,$darray[2]));
$msg = "";
if ($lang=='fr') $msg = "derni\350re limite le ".$date;
else $msg = "deadline ".$date;
echo "ajouter:data=".rawUrlEncode($msg)."\n".
"activer:dataOk\n";
?>
|
Dans cet exemple, deux éléments <interaction>, déclenchés par deux liens, sont utilisés pour exécuter des actions données par la même application PHP. Le premier utilise par défaut le cache, le deuxième n'utilise pas de cache. Cette application crée un paramètre contenant l'heure courante sur le seveur web, qui est ensuite affiché dans une zone de saisie de texte (dans un formulaire). Le premier clic sur le premier lien ira chercher l'heure sur le serveur, tandis que tous les clics suivant réutilisont les actions en cache, et donc l'heure ne changera jamais (le paramètre sera recréé, mais toujours avec la même valeur). Par contre, un clic sur le deuxième lien - sans cache - changera l'heure à chaque fois, car l'application PHP sera à chaque fois appellé. Exemple <interaction ancre="fi1" href="http://www.ulb.ac.be/.../time.php" set="app"/> <interaction ancre="fi2" href="http://www.ulb.ac.be/.../time.php" set="app" cache="non"/> |
Exemple <interaction ancre="i2">
<actions>inverser:option1,inverser:option2</actions>
</interaction> On peut également écrire Exemple <interaction ancre="i2">
<actions>
inverser:option1
inverser:option2
</actions>
</interaction> |
|
Attribut exécuter="..." pour modifier l'ordre d'exécutionPar défaut, les actions définies dans ces éléments <actions> seront exécutées après celles données par l'application web (si celle-ci est définie). Il est possible de changer cela, grâce à un attribut exécuter qui peut valoir:
Pour plus de détails, consultez Ordre d'éxécution des actions Comment déclencher les actions ?Comme expliqué ci-dessus, les actions définies avec un attribut exécuter="démarrage" sont exécutées en tout premier lieu, lors du chargement de la page. Les autres actions ne seront exécutées que si elles sont déclenchées. Il existe plusieurs manières de les déclencher. Déclenchement automatique au moment du chargement de la pageElles peuvent être déclenchées automatiquement au moment du chargement de la page si vous placez un attribut automatique="oui" sur l'élément <interaction>. |
Dans cet exemple, deux actions seront déclenchées au moment du chargement de la page pour activer une option optionA et désactiver une option optionB. Exemple <interaction automatique="oui"> <actions>activer:optionA,désactiver:optionB</actions> </interaction> |
|
Déclenchement via un formulaireL'élément <interaction> peut être utilisé au sein d'un formulaire défini par un élément <formulaire>. Dans ce cas, l'envoi des données récoltées par le formulaire déclenchera les actions contenues dans cet élément <interaction>. Si cet élément va chercher les actions à exécuter dans une application externe, celle-ci recevra l'ensemble des paramètres contenant les données récoltées par le formulaire. Déclenchement via une actionSi l'élément <interaction> possède une ancre, il est possible de déclencher les actions qu'il contient à l'aide de l'action exécuter:xxxx où xxxx est l'ancre en question. |
Dans cet exemple, un lien hypertexte avec un attribut cible déclenche l'action executer:i3. Cette action va à son tour déclencher toutes les actions contenues dans l'élément <interaction ancre="i3"> Exemple <interaction ancre="i3"> <actions>inverser:option1,inverser:option2</actions> </interaction> ... <p><a cible="exécuter:i3">déclencher les actions</a></p> |
|
Comment s'exécutent les actions?Une fois déclenchées, les actions vont s'exécuter les unes après les autres, indépendament de l'élément déclencheur. Si cet élément déclencheur doit encore exécuter l'une ou l'autre tâche, il le fera sans tenir compte du déroulement des actions (cette tâche sera exécutée en même temps, "en parallèle", que les actions). Ordre d'exécution des actionsSi rien n'est précisé, les actions définies par l'application web seront exécutées avant les actions définies par les éléments <actions> internes (dans le cas où les deux méthodes sont utilisées). On peut modifier cet ordre des choses, en utilisant un attribut exécuter="démarrage", exécuter="avant" et exécuter="après" sur le ou les éléments <actions>. Lors du chargement de la page, les actions définies dans les éléments <actions exécuter="démarrage"> seront directement exécutées. Ces actions ont pour rôle d'initialiser certaines parties de la page (activer/désactiver des options, montrer/masquer des blocs, etc.). Elles ne pourront plus être déclenchées par la suite. Les autres actions devront être déclenchées pour être exécutées. Si l'élément <interaction> possède un attribut automatique="oui", ce déclenchement se fera automatiquement lors du chargement de la page (après les actions citées ci-dessus). Le déclenchement pourra également se faire grâce à l'action exécuter:xxxx. Lorsque ces autres actions sont déclenchées, elles seront exécutées dans l'ordre suivant:
Si un de ces groupes d'actions se termine en exécutant l'action terminer ou arrêter, les actions des autres groupes ne seront pas exécutées. Exécution synchrone et asynchroneLa plupart des actions sont exécutées les unes après les autres de manière synchrone: chaque action doit se terminer avant d'exécuter l'action suivante. Toutefois, certaines actions peuvent déclencher des opérations relativement "lentes". Dans ce cas, afin de ne pas ralentir l'affichage de la page, ces opérations vont s'exécuter de manière asynchrone. Cela veut dire que l'action va lancer l'opération et se terminer en passant à l'action suivante, tandis que l'opération va se dérouler de manière indépendante (l'opération va s'exécuter en même temps - en parallèle - que le reste des actions). Ces opérations asynchrones sont définies comme telle dans la liste des actions possibles. Exécution non-concurente ou concurrenteLes actions contenues dans un élément <interaction> peuvent prendre du temps à s'exécuter voire même ne jamais s'arrêter (si elles effectuent une boucle, par exemple). Par défaut, il sera impossible de déclencher ces actions si elles ont déjà été déclenchées et que leur exécution n'est pas encore terminée. Il est possible de modifier ce comportement en ajoutant un attribut exécution="multiple" à l'élément <interaction>. Dans ce cas, elles peuvent être déclenchées plusieurs fois de suite et se dérouleront en parallèle, de manière concurente (ce qui peut parfois entraîner des comportements bizarres dans la page). Le fonctionnement par défaut, si vous ne mettez pas l'attribut, est équivalent à utiliser un attribut exécution="simple". |
Dans cet exemple, les actions consistent à inverser deux options, attendre une seconde puis recommencer les actions depuis le début (vers-début). Après les avoir déclenchées, elles ne s'arrêteront pas tant que vous ne cliquez pas sur le deuxième lien. Tant qu'elles tournent, vous ne pourrez pas les déclencher une deuxième fois. Pour le faire, il faut d'abord les arrêter puis les relancer. Exemple <interaction ancre="i4"> <actions>inverser:o1,inverser:o2,délai:1000,vers-début</actions> </interaction> ... <p><a cible="exécuter:i4">déclencher les actions</a></p> <p><a cible="arrêter:i4">arrêter les actions</a></p> |
|
Dans cet exemple, similaire au précédent, les exécutions multiples sont autorisées. Cliquez plusieurs fois sur le premier lien pour déclencher les actions afin de voir le résultat (au premier clic, les options vont s'inverser une fois par seconde, au deuxième clic deux fois par seconde mais de manière irrégulière et ainsi de suite). Quand vous les arrêter, seule l'exécution la plus récente est stoppée. Pour les stopper toutes, il faut cliquer sur arrêter autant de fois qu'on a cliqué sur déclencher. Exemple <interaction ancre="i5" exécution="multiple"> <actions>inverser:o3,inverser:o4,délai:1000,vers-début</actions> </interaction> ... <p><a cible="exécuter:i5">déclencher les actions</a></p> <p><a cible="arrêter:i5">arrêter les actions</a></p> |
|
Créer un ensemble de paramètres via une <interaction>Si votre élément <interaction> possède un attribut set="xxxx", celui-ci créera un ensemble de paramètres vide, appelé xxxx. Ce sont les actions définies par cet élément qui vont servir à créer les paramètres dans l'ensemble en question. Cette création ne se fera que lorsque toutes les actions seront exécutées. Votre page web peut faire référence à l'un de ces paramètres, en écrivant {xxxx:yyyy} où yyyy est le nom du paramètre désiré. Ces références peuvent se faire, même si les paramètres n'existent pas encore (car les actions - qui proviennent d'une application PHP, par exemple - n'ont pas encore été exécutées). Ces références seront traitées plus tard, lorsque l'ensemble de paramètres sera finalisé (généralement, après avoir exécuté la dernière action ou exécuter une action finaliser). Consultez Les ensembles de paramètres pour plus de détails. Pour créer un paramètre, il faudra exécuter une action ajouter:yyyy=valeur, où yyyy est le nom du paramètre à créer et valeur est la valeur à donner à ce paramètre. Cette action peut être exécutée plusieurs fois de suite pour créer autant de paramètre que nécessaire. Dès que l'ensemble des actions déclenchées par l'élément <interaction> sont exécutées, l'ensemble de paramètres sera finalisé, et la valeur de ces paramètres replaceront tous les références {xxxx:yyyy} trouvées dans la page. |
Dans cet exemple, une interaction appelle une application écrite en PHP lors du chargement de la page. Les actions retournées par cette application vont servir a créer des paramètres dans l'ensemble de paramètres identifié par appli (grâce à set="appli"). Ces paramètres sont utilisés dans le texte d'un paragraphe ( {appli:nom} et {appli:prénom} ), ainsi que dans la valeur par défaut d'un champ de cases à cocher ( {appli:destinations} ), permettant de précocher certaines cases à partir de l'application PHP. Lorsque l'application PHP aura fourni sa réponse au navigateur, que les paramètres auront été créés et que l'ensemble de paramètres sera finalisé (après la dernière action), les paramètres seront remplacés automatiquement par leur valeur ({appli:nom} par Lampion, {appli:prénom} par Séraphin, etc.). Exemple <bloc style="class1">
<p>Bonjour {appli:prénom} {appli:nom},</p>
<input type="checkbox">
<libellé>Vous avez choisi les destinations suivantes:</libellé>
<valeur>{appli:destinations}</valeur>
<option valeur="brussels">Bruxelles</option>
<option valeur="berlin">Berlin</option>
<option valeur="london">Londres</option>
<option valeur="madrid">Madrid</option>
<option valeur="paris">Paris</option>
<option valeur="porto">Porto</option>
</input>
</bloc>
<interaction automatique="oui" set="appli"
href="http://www.ulb.ac.be/sitemanagerapps/samples/formulaire.php"/>L'application PHP renvoie une liste de trois actions à executer (sous la forme d'une chaîne de caractères, en utilisant le type mime text/plain). Ces trois actions vont servir à créer les trois paramètres nom, prénom et destinations. Le code PHP de cet exemple est le suivant: Exemple <?php
header('Content-Type: text/plain;charset=UTF-8');
header("Access-Control-Allow-Origin: *");
echo "ajouter:nom=Lampion";
echo "\n";
echo rawurlencode("ajouter:prénom=Séraphin");
echo "\n";
echo "ajouter:destinations=brussels|paris|london";
echo "\n";
?>Remarquez comment le deuxième paramètre est encodé via la fonction rawurlencode(), car son nom et sa valeur contiennent des caractères accentués. |
Bonjour {appli:prénom} {appli:nom}, |
Associer une option à l'élément <interaction> pour connaître son étatIl est possible d'associer une option à un élément <interaction>, grâce à un attribut activer-option. Si cet attribut vaut oui, le nom de l'option est donné par l'ancre placée sur cet élément. Dans le cas contraire, le nom de l'option sera donné par la valeur de cet attribut.
Grâce à cette option, vous pouvez modifier certaines zones de la page en fonction du déroulement des actions (en cours, terminées, suspendues...), comme le montre l'exemple suivant. |
Dans cet exemple, un élément <interaction> permet d'afficher en boucle le contenu de trois blocs avec un délai de 1500 millisecondes entre chaque bloc (les blocs étant placés dans un groupe, via l'attribut groupe="anim", ceux-ci seront mutuellement exclusifs: l'affichage d'un bloc provoque la fermeture des autres blocs). Exemple <interaction ancre="i6" activer-option="animation"> <actions>montrer:b1,délai:1500,montrer:b2,délai:1500,montrer:b3,délai:1500,vers-début</actions> </interaction> <bloc ancre="b1" groupe="anim" état="masqué" style="colorBar5" bords="arrondis"> <p>Date limite pour vous inscrire: le 30 septembre</p> </bloc> <bloc ancre="b2" groupe="anim" état="masqué" style="colorBar5" bords="arrondis"> <p>Au théatre ce soir: les dernières places disponibles</p> </bloc> <bloc ancre="b3" groupe="anim" état="masqué" style="colorBar5" bords="arrondis"> <p>Les horaires des examens bientôt disponibles</p> </bloc> <section options="-animation"> <p><a cible="exécuter:i6">déclencher les actions</a></p> </section> <section options="animation"> <p><a cible="suspendre:i6">suspendre les actions</a></p> </section> <section options="%animation"> <p><a cible="redémarrer:i6">relancer les actions</a></p> <p><a cible="arrêter:i6">stopper les actions</a></p> </section> Une option "animation" est associée à cet élément <interaction>. On se sert de cette option pour afficher trois sections optionnelles contenant des commandes pour exécuter, suspendre, redémarrer et arrêter les actions: la premiere lorsque l'option n'existe pas (tant que les actions ne sont pas déclenchées), la deuxième lorsque l'option existe et est active (lorsques les actions ont été déclenchées) et la troisième lorsque l'option existe et est inactive (lorsque les actions ont été suspendues). |
