[Flash 8.0] Didacticiel création d'un menu objet/xml (Etape 2)
Salut,
Je reprends mon précédent Post sur lequel j'avais expliqué comment récupérer le 1er Niveau d'un Menu hiérarchique.
Méthode entièrement dynamique, tous les clips sont et seront créés par code (très pratique donc).
L'étape 2 consiste à rendre la procédure récursive pour que le nombre de menu ne soit plus limité, ni en nombre d'élément, ni en profondeur.
L'étape 3 consistera à permettre l'escamotage des fils d'un élément à la façon d'un arbre.
Je rappelle les éléments :
Source XML (J'y ai ajouté 1 niveau pour en obtenir 3)
Le fichier s'appelle Menus.xml
(Il sera remplacé plus tard par une page XML Dynamique ASP dot Net 2.0 C# (et peut-être VB Dot Net).
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<Root_Element>
<Menus>
<Menu caption="Accueil" open="clpPannel001Accueil"/>
<Menu caption="Tchat" open="clpPannel002Tchat"/>
<Menu caption="Messagerie" open="clpPannel003Messagerie">
<SousMenus>
<Menu caption="Envoyés" open="clpPannel003Messagerie01"/>
<Menu caption="Recus" open="clpPannel003Messagerie02">
<SousMenus>
<Menu caption="Lus" open="clpPannel003Messagerie0201"/>
<Menu caption="NonLus" open="clpPannel003Messagerie0202"/>
</SousMenus>
</Menu>
</SousMenus>
</Menu>
<Menu caption="A propos" open="clpPannel004APropos"/>
</Menus>
</Root_Element> |
Source de la classe menu qui hérite MovieClip
Le fichier s'appelle clMenu.as
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
/*
Class : clMenu
Auteur : Laurent Jordi
Modifée le : 24/09/2006
Copyright : Laurent Jordi
Description : La classe permet de définir un élément du menu dynamique
*/
class clMenu extends MovieClip
{
//Variables de liaison
public static var id:String = "__Packages.clMenu";
private static var _isSymbolLinked:Boolean = Object.registerClass(id, clMenu);
//Variables d'occurence privée
private var __index:Number;
private var __caption:String;
private var __link:String;
private var __childrenMenus:Array;
private var __maxChildrenIndex:Number = -1;
private var __previousMenu:MovieClip;
//Constructeur
//******************************************************
public function clMenu() {
var intTop:Number;
var tf = this.createTextField("txtCaption",this.getNextHighestDepth(),0,intTop,this._parent._width,10);
tf.autoSize = "left";
}
//******************************************************
public function get index():Number {
return this.__index;
}
public function set index(value:Number):Void {
this.__index = value;
}
//******************************************************
public function get caption():String {
return this.__caption;
}
public function set caption(value:String):Void{
this.__caption = value;
//Mise à jour du champ texte
this["txtCaption"].text = value;
}
//******************************************************
public function get link():String {
return this.__link;
}
public function set link(value:String):Void{
this.__link = value;
}
//******************************************************
public function get maxChildrenIndex():Number {
return this.__maxChildrenIndex;
}
public function set maxChildrenIndex(value:Number):Void{
this.__maxChildrenIndex = value;
}
//******************************************************
public function get previousMenu():MovieClip {
return this.__previousMenu;
}
public function set previousMenu(value:MovieClip):Void{
this.__previousMenu = value;
}
} |
Source a mettre dans la première image d'un clip vide.
Le fichier s'appelle TestMenu.fla mais peut s'appeler comme vous voulez.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import clMenu;
//Variables globales
var maxChildrenIndex:Number = -1;
var menuVerticalIndent = 0;
var menuHorizontalIndent = 15;
// Chargement du XML
var menuXML:XML = new XML();
var szSourceXLM:String = "Menus.xml"
menuXML.onLoad = menuXML_onLoad;
menuXML.ignoreWhite = true;
menuXML.load(szSourceXLM);
//Fonction récursive de parcours des frères d'un Node XML (récursion sur les sous menus)
function loadMenus(currentNode,parentMenu,yOffset,xOffset) {
var currentMenu:MovieClip;
var currentMenuName:String;
var TMPprevMenuIndex:Number;
while (currentNode!=null) {
switch (currentNode.nodeName) {
case "Menu": //Utilisation d'un switch pour une éventuelle évolution ultérieure
parentMenu.maxChildrenIndex++;
currentMenuName = "MenuItem" + parentMenu.maxChildrenIndex;
currentMenu = parentMenu.attachMovie(clMenu.id,currentMenuName,parentMenu.getNextHighestDepth());
currentMenu.index = parentMenu.maxChildrenIndex;
currentMenu.caption = currentNode.attributes.caption;
trace(currentMenu._height);
if (_root.menuVerticalIndent==0) {_root.menuVerticalIndent = currentMenu.txtCaption._height}
currentMenu.link = currentNode.attributes.open;
if (currentMenu.index==0) {
currentMenu.previousMenu = null;
currentMenu._y = yOffset;
trace(yOffset);
} else {
TMPprevMenuIndex = currentMenu.index - 1
currentMenu.previousMenu = parentMenu["MenuItem" + TMPprevMenuIndex];
currentMenu._y = currentMenu.previousMenu._y + currentMenu.previousMenu._height;
}
currentMenu._x = xOffset;
switch (currentNode.childNodes[0].nodeName) {
case "SousMenus":
//La fonction s'appelle elle même
loadMenus(currentNode.childNodes[0].childNodes[0],currentMenu,_root.menuVerticalIndent,xOffset + _root.menuHorizontalIndent)
break;
}
break;
}
currentNode = currentNode.nextSibling;
}
}
//Appel de la récursion depuis l'évennement on Load de l'objet XML
function menuXML_onLoad(success) {
var cN;
_root.createEmptyMovieClip("clpMainMenu01",1);
var pM:MovieClip = _root["clpMainMenu01"];
pM.maxChildrenIndex = -1;
if (success) {
cN = menuXML.firstChild.childNodes[0].childNodes[0]; // Liste des menus
loadMenus(cN,pM,0,0);
}
} |
Voila... chez moi ça marche...
La suite la semaine prochaine (si j'ai le temps de m'en occuper...)
Vos commentaire sont bien entendu, les bienvenus...
@+
Laurent Jordi
Site CV
Ezlogic.mc
On en est qu'à la 2eme étape...
Convention de nommage personnelle
Salut,
C'est simplement une convention personnelle. Je trouve que c'est un peu plus lisible et c'est une habitude que j'ai depuis un certain temps.
Concernant le niveau, j'aimerais qu'à terme nous ayons créé un véritable composant pro qui pourra servir à notre communauté. De plus je dirais que la combinaison des compétences de développeur objet et de bidouilleur flash donne souvent de très bons résultats. Enfin, le fait de travailler sur des composant qui ne nécessitent aucun clip préfabriqués me parait tout indiqué pour créer des applications qui seront directement paramétrées à partir de serveurs web évolués comme IIS 6/Dot Net Framework 2.0.
Je crois que cette plateforme sera très puissante car je reste convaincu que l'ASP dot net 2.0 est inadapté au développement web coté client pour faire des applications hébergées crossplatform. C'est compliqué, et le fait que le Framework génère lui même le code HTML un peu à sa guise pose souvent des problèmes.
Si nous parvenons à créer une couche cliente en flash qui pourrait être directement paramétrée à l'aide de pages ASP dot Net, cela nous ouvrirait des perspectives plus qu'intéressantes.
Je n'ai pas d'environnement PHP ou J2EE à ma disposition mais il serait intéressant que, lorsque nous nous attaquerons à la couche serveur, que d'autres développeurs implémentent tout ça dans ces environnements afin de disposer d'exemples plus complets.
Merci pour vos participations
Laurent
Je préfère comprendre ce que je fais.
Salut,
Merci pour ta réponse. L'objectif étant de créer un composant, j'aimerais bien comprendre ce que je fais, toutefois je regarderais ces produits.
Il est clair que pratiquement tout a déja été développé mais dans ce cas, ne serions nous plus que des joueurs de Légos ?
Merci encore
Laurent
