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é

[miya]

Merci Jim_Nastiq pour toutes tes réponses

C'est enfin terminé, je met le code, car toutes les sources que j'ai vu sur internet (pour un débutant) semblait vraiment compliqué, obligé de passer par de l'AS (bien que je n'ai rien contre loin de la), mais pour un premier approche Flex c'était loin d'être évident.

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
 
<mx:HBox top="80" textAlign="center">
			<mx:MenuBar styleName="myMenuBar" labelField="@label" 
						width="400" textAlign="center" 
						useHandCursor="true" buttonMode="true"  id="menuBar"
						click="viewStack.selectedIndex = menuBar.selectedIndex">
				<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%" id="accueil" >
					<mx:Label text="accueil" />
				</mx:Canvas>
				<mx:Form label="graph" width="100%" height="100%" id="graph">
					<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>

Sinon, je me demandais, si la méthode que j'ai effectué était propre? Car je n'en ai trouvé aucune (ou j'ai peut etre mal cherché) de ce type.

De plus, j'ai préféré utiliser un menubar qu'un ToggleButtonBar , car je trouvais que cela faisait plus propre en tant que menu.

Une derniere question, de la facon d'implémenter le menuBar, cela signifie que tout mon code se situera dans la meme page, ce qui deviendra vite illisible si le site devient plus important, non? étant pro MVC, ca me parait bizarre ^^"

Dans tous les cas, je te remercie beaucoup pour ton aide

[Jim_Nastiq]

oui je t'encourage à utiliser au moins différent composant MXML/AS pour séparer tes vues. Ensuite, pour aller plus loin sur un projet plus complexe, évidement l'utilisation d'un framework MVC devra se poser, et la tu devras faire le choix entre PureMVC et Cairngorn

[miya]

Flex est limité alors? Ce n'est pas la meilleur solution pour coder une application?

[Jim_Nastiq]

hein? quoi ?

euh je ne comprends pas pourquoi tu conclus cela avec ce que je t'ai dit

[miya]

Désolé de tirer des conclusions trop hâtive, mais beaucoup de choses sont flou, bien que je lis énormément de tuto/blog sur la toile.

J'ai commencé il y a quelque jour mon site web. Il est plus ou moins avancé (sans liaison bd pour l'instant).

Il est donc construit très simplement, comme je l'ai dis au premier post :

-----------><mx:HBox> header ( = Label) </mx:HBox>
--------> <mx:HBox> menu (composé de 4 élement) </mx:HBox>
-----> <mx:HBox> viewstack (pour afficher mes vues) </mx:HBox>
--> <mx:HBox> footer ( = Label) </mx:HBox>

Le menu est composé de 4 pages : accueil / graph / photo / contact

J'ai plus ou moins terminé de coder l'ensemble des pages, j'ai en gros 200 lignes. Cela commence à faire long, surtout que je n'ai pas fini. Il faudrait donc que je sépare mon code. Une vue pour chaque page, pour mon header, mon footer, mon menu, et mon index appel toutes ces vues.

Si tu as des conseils/liens n'hésite pas, je suis preneur.

Dans tous les cas merci encore, et tjs de ton aide.

[Jim_Nastiq]

relis mon post plus haut , je t'explique que tu peux utiliser des composants et utiliser sur un gros projet des frameworks MVC (PureMVC, Cairngorn)