Ecrans dans Flex/AS3

Version imprimable

06/09/2011, 11h35
Flamenco

Ecrans dans Flex/AS3

Bonjour à toutes et tous,

voici quelques temps que je me suis mis à l'apprentissage de l'AS3 en vu d'ado(be)pter Flex, Air, Flash et autres.
Du point de vue du langage, pas de soucis particulier, ni du côté de l'Ide (Flash Builder).

Mon gros soucis actuel vient des états (states) pour gérer les différents écrans.

Jusque là et avec différents langages, que ce soit en mode bureautique ou en mode web, j'avais la notion de forms, de pages, de documents...
Toutes mes applis ayant la même trame, le schéma général était (en faisant simple) :
- une page principale avec N boutons (et d'autres choses bien entendu et sans intérêt ici),
- bouton 1 appelle page 1,
- bouton 2 appelle page 2,
- bouton 3 appelle page 3,
chaque page contenant son propre code.

Or dans mon apprentissage de flex/as3, tous les exemples, tutos d'adobe ou autres, semblent se limiter à la notion d'état et imposer le modèle suivant, en reprenant l'exemple ci-dessus :

- une seule page avec 4 états
- état 1 = page principale
- état 2 = page 1
- état 3 = page 2
- état 4 = page 3
avec tout le code dans cette seule page (bien entendu on peut faire référence à des classes, des composants...., mais toute la logique d'enchainement des écrans se trouve dans ce seul fichier).
Ce qui me rappelle vaguement certaines sources en VB ou les développeurs trouvaient amusant de superposer des frames les unes sur les autres le tout sur une seule form, et où le debogage était une partie de plaisir sans nom.

Sachant qu'il s'agit d'un schéma simpliste, une application de gestion normale comprenant au bas mot une vingtaine de formulaires, je ne parviens pas à me satisfaire de cette solution.

Certain que vous avez de biens meilleures solutions à proposer, je suis tout ouïe, un très court projet flex illustrant simplement l'enchainement des écrans (2 écrans suffisent) serait idéal.

Merci d'avance, ne serait ce que pour votre lecture.
06/09/2011, 12h39
vilveq

Tu peux travailler avec des modules. Chaque page est un module avec son propre code.

Tu charges les modules dans un ModuleLoader.
06/09/2011, 14h08
Flamenco

Bonjour,

c'est la 1ère piste que j'avais pressentis mais pas réussis à mettre en œuvre. Peut être par manque d'xp sous AS.

J'attends de voir les différentes suggestions.

Merci dans tous les cas.
06/09/2011, 14h37
samy2525

Bonjour, personnellement je ne comprends pas ton étonnement ou bien ton insatisfaction sachant par exemple que la logique de navigation sous struts est mise dans un même fichier. Maintenant Flex se base sur des conteneur pour porter tes composants rien ne t'oblige à utilise le même conteneur pour afficher tes formulaires

NB : j'espère que j'ai bien compris ton besoin

Bon courage Samy
06/09/2011, 15h01
Madfrix

Bonjour,

tout dépend je dirais de la taille de ta future application. Pour une petite application, l'usage unique d'états peut être envisagé. Pour une application de taille moyenne, l'usage d'un viewstack ("pile de vues") peut être envisagé. Cette solution se rapproche le plus de ta stratégie actuelle. Enfin pour les grosses applis (portails...) l'usage de modules comme l'a dis vilveq est fortement conseillé.

Avantages :

-states : facile à mettre en oeuvre et pouvant être facilement "embellis" visuellement par les transitions par exemple

-viewstack : permet de charger les éléments de la pile immédiatement (au lancement de l'appli) ou bien à la demande de la vue par l'utilisateur.

-modules : les modules peuvent être chargés ou déchargés à volonté ce qui induit donc un gain significatif en terme de gain de mémoire et de chargement de l'appli.

Cependant, rien ne t’empêche de mixer ces approches.

Ex: un écran proposant un formulaire. Ce formulaire propose 3 vues (créer un compte, connexion et récupération de password) représentant les vues d'un viewstack. Chaque vue propose plusieurs états possibles (ex: création d'un compte de type user ou bien modérateur [désolé pour l'exemple bidon]). Une fois connecté et authentifié, tu es basculé vers l'espace perso lié à ton compte. Le formulaire et la gestion de ton espace perso peuvent être représentés par 2 modules distincts encapsulés dans la coquille (shell) réprésenté par ton appli (au sens conteneur). Intérêt : ne pas faire fuir un potentiel utilisateur de l'appli si elle se charge trop lentement (ie: si le formulaire et l'espace perso se charge en même temps). Avec l'utilisation de modules, seul le formulaire est chargé au préalable puis si la connexion est réussie, le module formulaire est viré de la mémoire et le module espace perso est chargé.

En espérant pas t'avoir trop embrouillé...
06/09/2011, 15h19
Flamenco

Ecrans dans Flex/AS3

Bonjour,

pas d'embrouille Madfrix, et je n'oublie pas les autres,

ces pistes rejoignent des infos glanées ici ou là mais dont je n'étais pas certain de la finalité ou de la compatibilité avec mes recherches.

Même si mon xp sous AS ne me permet pas encore de matérialiser ces pistes, dans tous les cas, cela me donne le fil à suivre et nul doute que la toile sera de nouveau ma meilleure amie.

D'ailleurs si je me fie aux divers articles du Web, le viewstack semble la piste la + sérieuse et la + adaptée à ma demande.

Je reste preneur d'autres pistes, à défaut je fermerais ce topic et creuserais dans ce sens.

D'ores et déjà merci.

Si tu veux un exemple d'utilisation de module, voici des bouts de code :

L'application principale :

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
 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="onCreationComplete()" width="100%" height="100%">
	<fx:Declarations>
		<!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
	</fx:Declarations>
		<fx:Script>         
		<![CDATA[                        
			import mx.collections.ArrayCollection;             
			[Bindable]             
			private var listDB:ArrayCollection=new ArrayCollection([                 
				{label: "Formulaire1", photo: "images/form1.png", title: "Formulaire1", module: "modules/Formulaire1.swf"},                 
				{label: "Formulaire2", photo: "images/form2.png", title: "Formulaire2", module: "modules/Formmulaire2.swf"},                   
				{label: "Formulaire3", photo: "images/form3.png", title: "Formulaire3", module: "modules/Formulaire3.swf"}                
							]);         
		]]>     
	</fx:Script> 
	<s:VGroup width="100%" height="100%">
		<s:List x="0" y="0" dataProvider="{listDB}"            
				itemRenderer="HListItem"            
				width="100%" id="hMenu" height="75" selectedIndex="0">         
			<s:layout>             
				<s:HorizontalLayout columnWidth="88"                                
									gap="0"/>         
			</s:layout>     
		</s:List> 
		<s:Group  width="100%" height="100%">
			<mx:ModuleLoader id="mod" width="100%" height="100%"  url="{hMenu.selectedItem.module}" applicationDomain="{ApplicationDomain.currentDomain}"/>
		</s:Group>
	</s:VGroup>
</s:Application>

Le HListItem que j'utilise pour faire joli :

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
 
<?xml version="1.0" encoding="utf-8"?> 
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"                
				xmlns:s="library://ns.adobe.com/flex/spark"                
				xmlns:mx="library://ns.adobe.com/flex/mx"                
				autoDrawBackground="true"                
				 width="100" height="100%"
				>     
	<s:states>         
		<s:State name="normal"/>         
		<s:State name="hovered"/>         
		<s:State name="selected"/>         
		<s:State name="default"/>     
	</s:states>     
	<s:layout>         
		<s:VerticalLayout horizontalAlign="center"/>     
	</s:layout>     
	<mx:Image source="{data.photo}"              
			  width="50"              
			  height="50"/>     
	<s:Label text="{data.label}"             
			 color="0x000000"             
			 color.hovered="0xf3f4de"             
			 color.selected="0x000000"/>   
</s:ItemRenderer>

Dans le cas ici, il faut avec un répertoire /images dans lequel tu dois mettre les picto à afficher, dans mon cas ils font 50x50

Et un répertoire (package) /modules dans lequel tu mets tes modules que tu appelles Formulaire1, Formulaire2, etc...

voilà, en gros .
Si tu as d'autres questions, n'hésite pas.

07/09/2011, 10h59
Flamenco

Ecrans dans Flex/AS3

Bonjour,

et merci à toi vilveq,

un bon exemple en pratique comme je les aime.

Les choses commencent à prendre forme, ne me reste plus qu'à appliquer.

J'en profite pour vous faire part d'un autre article trouvé sur le sujet avec la version 4.5 de flex :

http://www.flex-tutorial.fr/2010/11/...approche-hero/

Merci à tous.