Discussion :

[miya]

Bonjour à tous,

Je tente de créer un mini site web en flex, pour essayer de m'améliorer..

Tout bêtement, je structure mon site web avec un header (un simple Label), en dessous un menu (menuBar), et container (j'ai utilisé un Canvas) et un footer (tjs un simple Label), le tout construit avec des HBOX:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<mx:HBox top="20" height="30" >
			<mx:Label styleName="myLabelHeader" text="Welcome " textAlign="center" width="400" />	
		</mx:HBox>
		<mx:HBox top="80" textAlign="center"	>
			<mx:MenuBar styleName="myMenuBar" labelField="@label" width="400" textAlign="center"  useHandCursor="true" buttonMode="true">
				<mx:XMLList xmlns="">
					<item label="Accueil" textAlign="center" />
					<item label="Graph" textAlign="center" />
					<item label="Photo" textAlign="center" />
					<item label="Contact" textAlign="center" />
				</mx:XMLList>
			</mx:MenuBar>
		</mx:HBox>
		<mx:Canvas backgroundColor="black" >
 
		</mx:Canvas>
		<mx:HBox>
			<mx:Label text="copyright" textAlign="center" />	
		</mx:HBox>

J'ai créé un menu, et le but s'est de pouvoir naviguer avec celui.

Mais comment m'y prendre? Associer un bouton à une autre page .html avec du flex dedans? mais cela voudrait dire, que mon header/menu/footer est répété.. ou alors tout mettre dans la meme page, et faire en qqsorte un switch et il exécute le code en fonction du bouton pressé ?

Enfin plein de question dont je me pose....

Merci de vos éclaircissement

[Jim_Nastiq]

tu peux utiliser un viewstack qui contient autant de vue que tu as de pages. Construire ces vues depuis le mode design si tu te sens plus à l'aise au début.
Puis avec ton menuBar tu affectes une action sur chaque bouton, l'action en question consiste juste a placer l'index du viewstack sur la page qui correspond

[miya]

Bonjour Jim_Nastiq,

Merci pour ta réponse, tjs aussi clair.

J'ai avancé sur mon bout de code, et procédé comme tu me l'as dit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
		<mx:HBox top="20" height="30" >
			<mx:Label styleName="myLabelHeader" text="Welcome" textAlign="center" width="400" />	
		</mx:HBox>
		<mx:HBox top="80" textAlign="center">
			<mx:MenuBar styleName="myMenuBar" labelField="@label" 
						width="400" textAlign="center" 
						useHandCursor="true" buttonMode="true"  id="menuBar">
				<mx:XMLList xmlns="">
					<item label="Accueil" textAlign="center"  />
					<item label="Graph" textAlign="center" />
					<item label="Photo" textAlign="center" />
					<item label="Contact" textAlign="center"/>
				</mx:XMLList>
			</mx:MenuBar>
		</mx:HBox>
		<mx:ViewStack id="viewStack" width="200" height="200">
				<mx:Canvas label="accueil" width="100%" height="100%">
					<mx:Label text="accueil" />
				</mx:Canvas>
				<mx:Form label="graph" width="100%" height="100%">
					<mx:Label text="graph" />
				</mx:Form>
				<mx:Canvas label="photo" width="100%" height="100%">
					<mx:Label text="photo" />
				</mx:Canvas>
				<mx:Canvas label="contact" width="100%" height="100%">
					<mx:Label text="contact" />
				</mx:Canvas>
		</mx:ViewStack>

Il me reste à faire le lien entre les boutons et mon viewStack, comment procédé?

J'ai cru comprendre que je devais rajouter la propriété dataProvider au Menu, mais il me fait une erreur si je fais ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <mx:MenuBar dataProvider="{viewStack}" />

Peut etre n'est il pas possible d'utiliser un viewStack avec un menuBar ?
C'est l'interrogation que je me pose en lisant ceci :

Ensuite, il vous suffit d'assigner le ViewStack en tant que dataProvider d'une ButtonBar, LinkBar ou ToggleButtonBar:

src: http://www.flex-tutorial.fr/2008/11/...ator/#more-219

Merci de l'aide

[Jim_Nastiq]

En effet pas possible de passer ton menuBar en dataProvider de ton ViewStack, cependant tu peux utiliser les events dispatcher par ton MenuBar pour gérer dans leurs handler la mécanique qui consiste à changer de vue dans ton viewstack :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
tonViewStack.selectedIndex = index;

index étant a récupérer en fonction du menu

Sinon, si le MenuBar n'est pas indispensable passe sur un ButtonBar, LinkBar ou ToggleButtonBar

[miya]

Voila, j'avance doucement mais surement.

A mon menu, j'ai associé un Textinput, pour savoir comment utiliser mon selectedIndex, je suis arrivé a la :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
		<mx:HBox top="80" textAlign="center">
			<mx:MenuBar styleName="myMenuBar" labelField="@label" 
						width="400" textAlign="center" 
						useHandCursor="true" buttonMode="true"  id="menuBar"
						click="output.text = menuBar.selectedIndex.toString()">
				<mx:XMLList xmlns="">
					<item label="Accueil" textAlign="center"  />
					<item label="Graph" textAlign="center" />
					<item label="Photo" textAlign="center" />
					<item label="Contact" textAlign="center"/>
				</mx:XMLList>
			</mx:MenuBar>
		</mx:HBox>
 
		<mx:TextInput id="output" width="200" />

Maintenant, je dois arriver a faire le lien entre le viewStack et mon MenuBar

[Jim_Nastiq]

tu remplaces ton textinput par ton Viewstack et le tour est joué