[AS3] Création dynamique de boutons et de leur écouteur respectif

Question

Encore un problème...
j'entendais souvent que l'AS3 c'était super fastidieux, mais j'imaginais pas autant 
Mais c'est sympa de se prendre la tête parfois, non ? 

Bon, cette fois-ci mon problème est le suivant :

J'ai créé dynamiquement des boutons comme ceci ...


for (i = 0; i < 100; i++) {

// création des textes du bouton
var normal:TextField = new TextField();
var survol:TextField = new TextField();
var clic:TextField = new TextField();
normal.text survol.text clic.text = "bouton " + [i];

// Le texte du survol sera de couleur rouge
survol.textColor = 0xFF0000;
// Le texte du clic sera de couleur bleue
clic.textColor = 0x0000FF;
// création de l'instance du bouton
var unBouton:SimpleButton = new SimpleButton(normal, survol, clic, normal);

// création le la dynamique de positionnement des bouton
var baseY:Number = 100 ;
var baseZ:Number = 0.2 * baseY * i ;
var nouvY:Number = baseY + baseZ ;
unBouton.x = 100 ;
unBouton.y = nouvY ;

// affichage du bouton
addChild(unBouton);
}


Et j'aimerai faire en sorte que :
> quand je clique sur le bouton 0, il me renvoie la donnée a
> quand je clique sur le bouton 1, il me renvoie la donnée b
> quand je clique sur le bouton 2, il me renvoie la donnée c
... etc ...
Sachant que les données en question, provenant d'un xml, sont rangé dans un array tabGlobal[i] ...

Pour certain, l'évidence sautera aux yeux, mais bon, c'est pas mon cas . Par contre, j'ai essayé ça, toujours dans ma boucle :


// je créé un écouteur pour le clic sur ce bouton
unBouton.addEventListener(MouseEvent.CLICK, affichInfos);
// et je définis ma fonction "affichInfos"
function affichInfos(pEvt:Event):void {
trace (tabGlobal[i][1]);
}


... qui était censé me renvoyer une info, pour chaque clic sur un bouton, mais :
"TypeError: Error #1010: Un terme n'est pas défini et n'a pas de propriété.
at MethodInfo-1()"

... quelqu'un a une lampe torche là ?.. parce que j'y vois plus rien ^^

Merci d'avance pour ceux qui auront le courage de supporter mes caprices

pegase31 · Answer

Bonsoir,

Dans ta fonction déclenchée lors du clic, qu'est-ce que "i" ?

Peg'

vedelvetsyn · Answer

si c'est bien du i de "trace (tabGlobal[i][1]);" dont tu parles, c'est censé être le numéros de l'entrée dans mon tableau.

... j'aime pas ce genre de question.. c'est un piège ?

pegase31 · Answer

Aucun piège dans tout ça, mais tu le définis où ce numéro ? parce que l'erreur de flash vient bien de là ...

Peg'

vedelvetsyn · Answer

En fait mon code est comme ceci...
Mon "i" est définit dans ma boucle, mais déclaré juste avant :


var i:Number;
for (i = 0; i < 100; i++) {

// création des textes du bouton
var normal:TextField = new TextField();
var survol:TextField = new TextField();
var clic:TextField = new TextField();
normal.text survol.text clic.text = "bouton " + [i];

// Le texte du survol sera de couleur rouge
survol.textColor = 0xFF0000;
// Le texte du clic sera de couleur bleue
clic.textColor = 0x0000FF;
// création de l'instance du bouton
var unBouton:SimpleButton = new SimpleButton(normal, survol, clic, normal);

// création le la dynamique de positionnement des bouton
var baseY:Number = 100 ;
var baseZ:Number = 0.2 * baseY * i ;
var nouvY:Number = baseY + baseZ ;
unBouton.x = 100 ;
unBouton.y = nouvY ;

// affichage du bouton
addChild(unBouton);

// je créé un écouteur pour le clic sur ce bouton
unBouton.addEventListener(MouseEvent.CLICK, affichInfos);
// et je définis ma fonction "affichInfos"
function affichInfos(pEvt:Event):void {
trace (tabGlobal[i][1]);
}
}



... c'est grave docteur ?

pegase31 · Answer

sauf que lors que ta fonction est déclarée, i n'existe plus ... donc "Un terme n'est pas défini et n'a pas de propriété".

En AS3, une fonction déclenchée par un Event peut savoir quel est l'élément qui le déclenche, avec Event.currentTarget.
Ce qui permet de faire une seule fonction pour X éléments et réagir en fonction de l'élément déclencheur.

Peg'

vedelvetsyn · Answer

hum... je comprend pas tout ...

Comment se fait-il que "i" n'existe plus à ce moment, puisqu'on est toujours dans la boucle dont "i" et un paramètre ?

Sinon, pour le "Event.currentTarget" il se placerai comme ceci ?
function affichInfos(pEvt:Event.currentTarget):void { ...

pegase31 · Answer

Parce que tu crées ta fonction avec une variable .. qui n'est plus définie lorsque la fonction est appelée, puisque la boucle est finie lors de l'appel de cette fonction.
De plus, la définition de la fonction ne sert à rien dans la boucle, mais l'ajout de l'écouteur sur l'objet, si.

Pour la propriété event.currentTarget :

function maFonction(evt:Event):void {
trace (evt.currentTarget); //cible l'objet qui initialise l'Event
}

Peg'

vedelvetsyn · Answer

ok, l'histoire du "i", je vois, en fait c'est trop logique 

Mais j'essaye toujours de percer le brouillard qui m'entoure 

Donc si j'ai bien compris....
la création de l'écouteur étant dans la boucle et la fonction dehors, je vais avoir autant d'écouteur que de bouton. Ils seront donc tous "greffé" sur l'unique fonction.
Par cette fonction, il faut donc que je vérifie sur quel bouton j'ai cliqué (avec le evt.currentTarget ?) pour savoir quelle info je vais envoyer...


function affichInfos(evt:Event):void {
trace (evt.currentTarget); // renvoie [objet SimpleButton]
}



... mais pour ça, il ne fraudait pas avoir des noms de boutons différents ?
genre monBouton1, monBouton2, etc...
ou alors j'suis totalement à côté de la plaque ...

*regarde l'heure* ... 4h ... ouai, mais bon, j'crois que c'est plus le moment de réfléchir la dessus... demain, il fera jour ^^

pegase31 · Answer

Pour avoir un nombre simplement, il suffit de placer tes boutons dans un tableau, puis de récupérer leurs index à l'aide de :

monTableau.indexOf(evt.currentTarget);

Peg'

vedelvetsyn · Answer

Salut Peg'

Hier, j'ai essayé de plusieurs manières.
J'ai même tenté de faire avec une méthode de type :

monBt.name = 'monBt'+i;

Mais je n'y suis pas arrivé ... il doit y avoir un truc qui m'échappe, surement une logique particulière dans cette articulation de données.
Le manque d'habitude surement.

Je suis donc revenu à ton idée et actuellement j'ai ça :


for (i = 0; i < nEnt; i++) {

//je créé un sous tableau pour accueillir les infos de mon entrée
tabGlobal[i] = new Array();
tabGlobal[i].push (listing.pers[i].num, listing.pers[i].nom, listing.pers[i].img);

// création des textes du bouton
var normal:TextField = new TextField();
var survol:TextField = new TextField();
var clic:TextField = new TextField();
// Le bouton aura pour label la variable txtPers
var txtPers:String = tabGlobal[i][0] + " - " + tabGlobal[i][1];
normal.text survol.text clic.text = txtPers;
// Le texte du survol sera de couleur rouge
survol.textColor = 0xFF0000;
// Le texte du clic sera de couleur bleue
clic.textColor = 0x0000FF;

// création de l'instance du bouton
var unBouton:SimpleButton = new SimpleButton(normal, survol, clic, normal);

// création le la dynamique de positionnement des boutons
var baseY:Number = 100 ;
var baseZ:Number = 0.2 * baseY * i ;
var nouvY:Number = baseY + baseZ ;
unBouton.x = 100 ;
unBouton.y = nouvY ;

// je range mon instance de bouton dans mon tableau
// (tableau créé avant le lancement de ma boucle)
tabBt.push (unBouton);
// je récup l'index de ma donnée
var numVarBt:int = tabBt.indexOf(evt.currentTarget);

// j'affiche le bouton
addChild(unBouton);

// je créé un écouteur pour le clic sur ce bouton
unBouton.addEventListener(MouseEvent.CLICK, affichInfos);
}

// une fois les écouteurs créés, je définis ma fonction "affichInfos"
function affichInfos(evt:Event):void {
trace (evt.currentTarget); //cible l'objet qui initialise l'Event ( ici [object SimpleButton])
trace (numVarBt);
}



... et mon probleme, c'est que trace (numVarBt); ne me renvois pas le numero d'index du bouton sur le quel je clique, mais la donnée "-1"

pegase31 · Answer

tu dois récupérer le numéro du bouton qui déclenche l'évènement dans la fonction de bouton ... pas dans la fonction qui initialise le bouton ...

Peg'

vedelvetsyn · Answer

YAY ! 
Ca fonctionne !

Un très très très grand merci a toi, vraiment !

pegase31 · Answer

pas de quoi, mais as-tu compris la différence entre les deux ? Et surtout où était le soucis ?

Peg'

vedelvetsyn · Answer

oui, oui ...
En fait pour ce dernier point, c'était surtout une erreur d'inattention.

c'est clair que récupérer le num du bouton durant sa phase de fabrication, non seulement ca ne me sert a rien, mais en plus ça risque pas de fonctionner. C'est bien APRES, une fois que mes boutons sont créés, que j'ai besoin de savoir ce num pour l'associer au num de mon entrée de donnée.

pegase31 · Answer

alors je suis content d'avoir pu t'aider et que tu ais compris ;)

Peg'

cs_irt · Answer

Je suis assez intéressé par ton code vedelvetsyn pourrais-tu mettre en ligne ta derniere version qui marche?Merci.

[AS3] Création dynamique de boutons et de leur écouteur respectif

16 réponses

Votre réponse

Discussions similaires