Le Menu Contextuel

Le
but de cet article est de proposer une approche assez générale sur la
gestion du menu contextuel (le menu qui apparait quand on fait un
clique droit ;)) avec OpenLaszlo.

Pour illustrer cet article, j’ai préparé un exemple qui illustre la
majorité des cas d’utilisation des menus. Une zone comprend 2 carrés,
un rouge et un bleu, le reste de la zone étant considérée comme neutre.
Lorsque la souris est sur un des carrés, le menu nous permet de le
passer à vert et lorsque l’on est dans la zone neutre, le menu nous
permet d’agir sur la couleur des 2 carrés.

Comme c’est mon premier tutoriel avec OpenLaszlo 4.0, j’ai choisi de présenter l’exemple en Flash et en DHTML.

Version Flash 8
Version DHTML

1 - Le Principe

Pour obtenir ce résultat, le plus simple est de créer 3 menus différents (cntxtmenu_defaut, cntxtmenu_rouge et cntxtmenu_bleu),
au démarrage de l’application (événement “oninit” du canvas) on désigne
le menu contextuel “cntxtmenu_defaut” comme menu par défaut. Chaque
carré (objet LzView) à une action prédéfinit sur les événements
“onmouseover” et “onmouseout” (lorsque la souris est sur le carré et
lorsqu’il en sort), ainsi, lorsque la souris est sur le carré, on
assigne au canvas, le menu contextuel défini pour ce carré et lorsqu’il
est sort, on redéfinit le menu par défaut.

Pour faire suite à mon article précédent sur la création d’objet
avec OpenLaszlo, j’ai utilisé une petite fantaisie dans la création des
carrés, l’un a été créer avec id=” … ” et l’autre avec name=” … “, pour
illustrer les 2 méthodes d’accès à un objet.

2 - Méthodologie

Un objet gController est créé à partir de la classe
LzNode, ce sont les méthodes de cet objet qui agiront sur la couleur
des carrés. En suite, dans la partie <script/>, on
crée les “Delegate”, qui feront l’interface entre l’action sur un
élément du menu et une méthode de l’objet gController, dans ce même
script nous initialiserons nos 3 menus. On définit ensuite le menu par
défaut du canvas puis les 2 carrés et leurs événements “onmouseover” et
“onmouseout” associés.

3 - L’objet gController

Code LZX - l’objet gController

  1.  <?xml version="1.0" encoding="UTF-8" ?>
  2.  <canvas debug="false" width="200" height="150">
  3.     
  4.      <node name="gController">
  5.          <method name="rougeTovert">
  6.              vue_rouge.setAttribute('bgcolor',0x00ff00);
  7.          </method>
  8.         
  9.          <method name="bleuTovert">
  10.              canvas.vue_bleu.setAttribute('bgcolor',0x00ff00);
  11.          </method>
  12.      </node>

L’objet gController est extrêmement simple, il contient 2 méthodes
qui agiront sur l’attribut ‘bgcolor’ des carrés. Par exemple,
“gController. BleuTovert ()” changera la couleur du carré bleu à vert.

4 - Le script

Code LZX - script événements et menus

  1.  <script>
  2.      <![CDATA[
  3.          var rouge_vert = new LzDelegate(gController, "rougeTovert");
  4.          var bleu_vert = new LzDelegate(gController, "bleuTovert");
  5.         
  6.          // menu contextuel sur vue rouge *************
  7.          var cntxtmenu_rouge = new LzContextMenu();
  8.          cntxtmenu_rouge.addItem(new LzContextMenuItem("fond rouge en vert", rouge_vert));
  9.          //*********************************************
  10.         
  11.          // menu contextuel sur vue bleu *************
  12.          var cntxtmenu_bleu = new LzContextMenu();
  13.          cntxtmenu_bleu.addItem(new LzContextMenuItem("fond bleu en vert", bleu_vert));
  14.          //*********************************************
  15.         
  16.          // menu contextuel par defaut *************
  17.          var cntxtmenu_defaut = new LzContextMenu();
  18.          cntxtmenu_defaut.addItem(new LzContextMenuItem("rouge => vert", rouge_vert));
  19.          cntxtmenu_defaut.addItem(new LzContextMenuItem("bleu => vert", bleu_vert));
  20.          //*********************************************
  21.      ]]>
  22.      </script>

Nous commençons par créer les 2 objets “delegate”, ce sont en faite
2 nouveaux événements appelés “rouge_vert” et “bleu_vert”. Si on prend
le cas de “rouge_vert”, lorsque l’événement est déclenché, il appellera
la méthode “rougeTovert” de l’objet “gController”.

Vient ensuite la création de menu contextuel, 2 classes sont utilisées pour créer nos menus, LzContextMenu et LzContextMenuItem.
La première crée le menu en lui même (la zone qui contiendra les
éléments) et la seconde définit les éléments rattachés au menu qui
déclencheront les événements.
Pour attacher un élément à un menu, on utilise la méthode “addItem” de
l’objet LzContextMenu, qui prend en paramètre un objet
LzContextMenuItem.
L’objet LzContextMenuItem prend en paramètre, le texte à afficher ainsi que l’événement à déclencher lors de sa sélection.

5 - initialisation de l’application

Code LZX - Initialisation

  1.  <handler name="oninit" >
  2.          canvas.setDefaultContextMenu(cntxtmenu_defaut);
  3.      </handler>

Pour définir un menu au lancement de l’application, on utilise tout simplement un &lt;handler&gt; sur l’événement “oninit” du canvas.
Dans cette handler on utilisera la méthode “setDefaultContextMenudu” canvas, qui prend en paramètre un objet “LzContextMenu”, ici, le menu par défaut (zone neutre).

6 - Les carrés

Code LZX - Carrés

  1.  <view id="vue_rouge" width="30" height="30" bgcolor="0xff0000">
  2.          <handler name="onmouseover" >
  3.              canvas.setDefaultContextMenu(cntxtmenu_rouge);
  4.          </handler>
  5.         
  6.          <handler name="onmouseout" >
  7.              canvas.setDefaultContextMenu(cntxtmenu_defaut);
  8.          </handler>
  9.      </view>
  10.     
  11.      <view name="vue_bleu" width="30" height="30" bgcolor="0x0000ff">
  12.          <handler name="onmouseover">
  13.              canvas.setDefaultContextMenu(cntxtmenu_bleu);
  14.          </handler>
  15.         
  16.          <handler name="onmouseout">
  17.              canvas.setDefaultContextMenu(cntxtmenu_defaut);
  18.          </handler>
  19.      </view>

Les carrés sont des objets LzView de 30×30 avec une couleur de fond (attribut bgcolor) à rouge ou bleu.
Pour chaque carré, on déclare un &lt;handler&gt;
sur les événements “onmouseover” et “onmouseout” qui utiliseront la
même méthode que pour l’initialisation, mais avec leur menu propres. À
la sortie du carré, on réinitialisera le menu par défaut ( en sortant
d’un carré, on entre dans la zone neutre).

7 - le bouton Reset et fin

Code LZX - Bouton Reset

  1.  <button text="reset">
  2.          <method event="onclick">
  3.              vue_rouge.setAttribute('bgcolor',0xff0000);
  4.              canvas.vue_bleu.setAttribute('bgcolor',0x0000ff);
  5.          </method>
  6.      </button>
  7.     
  8.      <simplelayout axis="x" spacing="20"/>
  9.  </canvas>

Pour faciliter l’utilisation de l’exemple, j’ai ajouté un bouton qui
n’aura pour seul effet que de ré-attribuer les couleurs d’origine des
carrés. La balise &lt;simplelayout/&gt; permet de définir
la mise en page des éléments situés au même niveau qu’elle. Ici, les
carrés seront alignés sur l’axe X et espacés de 20 pixels.

L’utilisation des menus contextuels est très simple à mettre en
place en OpenLaszlo, je n’ai volontairement pas abordé certains aspects
des menus (ajout d’un séparateur, masquage des options par défaut de
flash, événement à l’ouverture du menu…) car une fois le concept
assimilé ces options sont très facile à implémenter grâce à la doc.

Pour ceux qui auraient encore du mal à saisir les interactions entre
les méthodes, événements et objets, j’ai créé un MindMap de mon
application (disponible au format FreeMind ou PDF),
j’utilise de plus en plus cette méthode pour assimiler le
fonctionnement de codes complexes et réutiliser des concepts de
programmations qui m’ont plus, c’est le cas de l’objet “gController”
(mais je ne sais plus de quel code cela provient, désolé pour l’auteur :( ) je trouve cette technique plus conviviale que l’UML.