Nous continuons ici sur la lancée de notre article sur la personnalisation des menus contextuels. Après avoir abordé la construction d'un menu pour l'ensemble de l'application Flash, nous allons personnaliser notre approche.

Flash MX 2004 permet en effet non seulement de créer un menu contextuel global, mais également des menus plus précis pour certains éléments graphiques. Par ailleurs, certaines options peuvent être ajoutée de manière conditionnelle...

Trois éléments possibles
L'attribut .menu, nécessaire pour assigner un menu contextuel à un élément graphique, est disponible pour trois classes d'éléments : MovieClip, Button et TextField. C'est ce dernier qui nous allons voir ici.
Reprenons le code de notre article précédent : nous y avons construit un ensemble de deux images-clés possédant chacun un menu contextuel envoyant la tête de lecture à l'autre image-clé.
A partir de cette base, ajoutez un champ textuel simple sur la première image-clé, et baptisé-le de manière très originale "champ", et disposant d'un variable "champTexte1". Ouvrez ensuite la fenêtre des Actions et opérez-y quelques ajouts :

stop();
reculer = function () {
  nextFrame();
  };

remplir = function() {
  champTexte1 = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem. Nulla porttitor faucibus metus. Nam sodales felis non elit. Phasellus pharetra massa sit amet arcu. Vivamus ultricies. Mauris eros mi, egestas in, volutpat in, pulvinar vitae, lorem.";
  }

monMenu = new ContextMenu();
monMenu.hideBuiltInItems();
options1 = new ContextMenuItem("Page suivante", reculer);
monMenu.customItems.push(options1);
_root.menu = monMenu;

txtMenu = new ContextMenu();
txtMenu.hideBuiltInItems();
options1 = new ContextMenuItem("Page suivante", reculer);
options2 = new ContextMenuItem("Remplir avec 'Lorem Ipsum...'", remplir);
txtMenu.customItems.push(options1);
txtMenu.customItems.push(options2);
champ1.menu = txtMenu;

Nous avons ici ajouté une fonction (remplir()) qui permet de remplir un champ avec un texte prédéfini (en l'occurrence, le séculaire "Lorem ipsum...").
Parce que nous voulons que cet élément ne s'affiche que pour le menu attaché à champ1, nous avons construit le menu txtMenu, et y avons placé notre option (qui appelle remplir()). De plus, parce que nous voulons quand même que l'utilisateur puisse avoir accès au menu général (contenant l'option "Page Suivante"), nous avons ajouté à txtMenu cette option présente dans monMenu.

Poser une condition
Il est également possible de construire dynamiquement le contenu d'un menu, en fonction de ce qui se trouve sur la scène (ou de l'état de l'objet auquel appartient le menu). Pour cela, nous faisons appel à la méthode onSelect de l'objet ContextMenu(). Complétons notre exemple :

stop();
reculer = function () {
  nextFrame();
  };

remplir = function () {
  champTexte1 = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sem. Nulla porttitor faucibus metus. Nam sodales felis non elit. Phasellus pharetra massa sit amet arcu. Vivamus ultricies. Mauris eros mi, egestas in, volutpat in, pulvinar vitae, lorem.";
  };

vider = function () {
  champTexte1 = "";
  };

vider();

monMenu = new ContextMenu();
monMenu.hideBuiltInItems();
options1 = new ContextMenuItem("Page suivante", reculer);
monMenu.customItems.push(options1);
_root.menu = monMenu;

txtMenu = new ContextMenu();
txtMenu.hideBuiltInItems();
options1 = new ContextMenuItem("Page suivante", reculer);
txtMenu.customItems.push(options1);
options2 = new ContextMenuItem("Remplir avec 'Lorem Ipsum...'", remplir, true);
txtMenu.customItems.push(options2);
options3 = new ContextMenuItem("Vider", vider, true);
txtMenu.customItems.push(options3);

txtMenu.onSelect = function() {
  options3.visible = false;
  options2.visible = false;
  if (champTexte1.length >= 1) {
    options3.visible = true;
  } else {
    options2.visible = true;
  }
};

champ1.menu = txtMenu;

Nous avons ajouté l'option "Vider", qui appelle la fonction du même nom et place une chaîne vide dans notre champ texte (donc, le vide).
Notre but ensuite est de proposer "Remplir avec 'Lorem Ipsum'..." quand le champ est vide, et "Vider" quand il contient du texte. Pour cela nous utilisons donc la méthode .onSelect, au sein de laquelle, après s'être assuré que les deux options ne sont pas affichées, nous testons la longueur de la chaîne contenue dans champTexte1, et affichant l'élément idoine.
Pour s'assurer de ne pas obtenir une longueur undefined, nous vidons directement le champ au lancement de l'application.

Forum

Réagissez dans les forums de JDN Développeurs

Construire un menu contextuel et dynamique est donc extrêmement simple dans l'environnement Flash. On pourra même envisager de coupler cela avec un langage côté serveur, qui pourrait produire le contenu du menu en fonction de l'activité de l'utilisateur. Une voie à suivre.