Wikilivres

Programmation Flex/Applications avancées

< Programmation Flex
Programmation_Flex
Applications avancées
Applications avancées
Sommaire
Controles
Layout
Navigator
Adobe Air
Charts
Liens
Modifier ce modèle

Un gestionnaire d'articles Flex/XML

modifier

Ce gestionnaire comprend 2 sections :

1. la fenêtre liste des articles
2. la fenêtre de détail pour chaque article

Cette interface communiquera par HTTPService avec un fichier XML pour la lecture des articles. Pour pouvoir modifier les articles (le prix par exemple), il faudra communiquer par un WebService.

Objectif :

Composer une interface simple pour le "check and get" de données en mode applicatif de bureau.
Il faudra donc créer un projet sous flashbuilder en mode application de bureau (exécution dans Adobe Air)

Besoins :

1. un répertoire avec des images d'articles
2. un xml listant les articles

Les données

modifier

Pour commencer on modélise les données en XML. 

<?xml version="1.0" encoding="UTF-8" ?> 
  <root>
    <author>Hello test name</author> 
    <article id="pois">
      <nom>pois</nom>
      <prix>2,84</prix> 
      <conditionnement>sachet</conditionnement> 
      <quantite>3kg</quantite>
      <image>image/pois.jpg</image>
    </article>
    <article id="serviette">
      <nom>serviette</nom>
      <prix>1,25</prix> 
      <conditionnement>sachet</conditionnement> 
      <quantite>1 piece</quantite>
      <image>image/serviette.jpg</image> 
    </article>
    <article id="eponges">
      <nom>eponges</nom>
      <prix>2,50</prix> 
      <conditionnement>sachet</conditionnement> 
      <quantite>3 pieces</quantite>
      <image>image/eponges.jpg</image>
    </article>
  </root>
  • On sauve ce fichier XML sous articles.xml

Les premiers tests

modifier 
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
	
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	horizontalAlign="center"
	verticalAlign="middle">
	
	<mx:HTTPService id="srv" url="articles.xml"/>
	
	<mx:DataGrid dataProvider="{srv.lastResult.root.article}" width="100%" height="100%">
		
		<mx:columns>
			
			<mx:DataGridColumn dataField="nom" headerText="article"/>
			<mx:DataGridColumn dataField="conditionnement" headerText="conditionnement"/>
			<mx:DataGridColumn dataField="quantite" headerText="quantite" textAlign="left"/>
			<mx:DataGridColumn dataField="prix" headerText="prix" textAlign="center"/>
			
		</mx:columns>
		
	</mx:DataGrid> 
	
	<mx:Button label="afficher" click="srv.send()"/>
	
</mx:WindowedApplication>
  • Notre application est WindowedApplication qui signifie que c'est une application Adobe Air.
  • On définit un objet HTTPService qui comprend nos articles.
  • Le dataProvider du datagrid prend la dernière invocation du service HTTPService pour actualiser les données, on descend jusqu'à article.
  • Les "dataField" des colonnes prennent les noms de nœuds XML.
  • On a une liste d'articles. Reste maintenant à ajouter les images des produits.


Pour mettre les images

modifier
  • On rajoute un "Nouveau dossier" image en cliquant droit sur "src" dans l'explorateur de package
  • On nomme ce répertoire image et place les images dedans comme dans le XML sous le nœud image
  • On rajoute un mx:DataGridColumn en dessous du "nom"
	<!-- IMAGE -->
	<mx:DataGridColumn itemRenderer="ImageRenderer" headerText="image"/>
  • À la place de datafield on a itemRenderer avec ImageRenderer qui est le nom d'un nouveau MXML
  • On crée le ImageRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center"
		 horizontalScrollPolicy="off" verticalScrollPolicy="off"
		 paddingTop="4" paddingBottom="4">
	
	<mx:Image source="{data.image}" width="30" height="30"/>
	<mx:Label text="{data.nom}" top="80"/>
	
</mx:VBox>
  • Il y a deux données "data.image" et "data.nom"
  • On exécute et on a bien les images


Pour avoir une sortie directe des articles on rajoute un creationComplete à l'application. 

<mx:WindowedApplication 
	
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	horizontalAlign="center"
	verticalAlign="middle"
	creationComplete="srv.send()">


Pour gérer les états de la vue cela se passe avec les mx:states 

...
	<mx:states>
		
		<!-- état Liste des articles -->
		<mx:State name="listeBox">
			<mx:AddChild relativeTo="{stateBox}">
				
				<mx:DataGrid dataProvider="{srv.lastResult.root.article}" width="100%" height="100%">
					
					<mx:columns>
						
						<mx:DataGridColumn dataField="nom" headerText="article"/>
						<!-- IMAGE -->
						<mx:DataGridColumn itemRenderer="ImageRenderer" headerText="image"/>
						<mx:DataGridColumn dataField="conditionnement" headerText="conditionnement"/>
						<mx:DataGridColumn dataField="quantite" headerText="quantite" textAlign="left"/>
						<mx:DataGridColumn dataField="prix" headerText="prix" textAlign="center"/>
						
					</mx:columns>
					
				</mx:DataGrid> 
				
			</mx:AddChild>
		</mx:State>

		<!-- état Detail des articles -->
		<mx:State name="detailBox">
			<mx:AddChild relativeTo="{stateBox}">
				

				<mx:Label text="detail" />

			</mx:AddChild>
		</mx:State>
		
	</mx:states>

	<!-- boite d'affichage des états -->
	<mx:Box id="stateBox">
		
	</mx:Box>

	<!-- boutons de gestion des etats -->
	<mx:Button label="liste" click="currentState='listeBox'"/>
	<mx:Button label="détail" click="currentState='detailBox'"/>
...
  • Le bouton liste active le state "listeBox" dans l'id "stateBox"
  • Le bouton détail active le state "detailBox" dans l'id "stateBox"
  • Dans chaque état il faut rajouter le pointage sur la boite de destination comme ici : <mx:AddChild relativeTo="{stateBox}">


Pour activer l'état "detailBox" en cliquant sur la liste il faut mettre un itemClick dans le datagrid 

     <mx:DataGrid dataProvider="{srv.lastResult.root.article}" width="100%" height="100%" itemClick="datagrid1_itemClickHandler(event)">
  • Et en dessous de <mx:AddChild relativeTo="{stateBox}"> mettre la fonction datagrid1_itemClickHandler()
<mx:Script>
	<![CDATA[
                import mx.events.ListEvent;

		protected function datagrid1_itemClickHandler(event:ListEvent):void
		{
			// TODO Auto-generated method stub
			currentState='detailBox';
		}
	]]>
</mx:Script>
  • L'import : import mx.events.ListEvent; devrait se rajouter automatiquement en mettant la fonction datagrid1_itemClickHandler() en mode dynamique (c'est à dire en laissant insérer le nom de fonction par flex).


Pour améliorer les états

  • On commente les trois boutons
	<!-- boutons de gestion des etats
	<mx:Button label="liste" click="currentState='listeBox'"/>
	<mx:Button label="detail" click="currentState='detailBox'"/>
	-->
	
	<!--
	<mx:Button label="afficher" click="srv.send()"/>
	-->
  • On rajoute un bouton de changement d'etat dans le state : "detailBox"
	<!-- etat Detail des articles -->
	<mx:State name="detailBox">
		<mx:AddChild relativeTo="{stateBox}">
			
			<mx:Box>
			
				<mx:Label text="detail" />
				<mx:Button label="fermer" click="currentState='listeBox'"/>
				
			</mx:Box>
		
		</mx:AddChild>
	</mx:State>
  • On fait un creationComplete avec une fonction d'initialisation
...
<mx:WindowedApplication 
	
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	horizontalAlign="center"
	verticalAlign="middle"
	creationComplete="initialiser()">
	
	<mx:Script>
		<![CDATA[
			import mx.events.ListEvent;
			
			protected function initialiser():void
			{
				srv.send();
				currentState='listeBox';
			}
		]]>
	</mx:Script>
...

La vue de notre application est maintenant fonctionnelle.

Passer des données du datagrid à des champs

modifier

Les éléments d'un datagrid peuvent être pointés par selectedItem sur l'id. L'id constituant le principal moyen dans flex pour pointer sur un objet mxml. Il faudra donc mettre un id au datagrid, dans notre exemple "listeGrid".

Pour obtenir le {nom} pointé dans notre liste il faudra donc avoir l'expression {listeGrid.selectedItem.nom}

Pour obtenir l'{image}, c'est avec l'objet mx:image en mettant la valeur {listeGrid.selectedItem.image} dans la source comme en html avec la balise <img .. />


On modifie donc le state "detailBox" en : 

	<!-- état Détail des articles -->
	<mx:State name="detailBox">
		<mx:AddChild relativeTo="{stateBox}">
			
			<mx:Box width="100%" height="100%">
			
				<mx:Image source="{listeGrid.selectedItem.image}" />
				
				<mx:Label text="{listeGrid.selectedItem.nom}" />
				<mx:Label text="{listeGrid.selectedItem.conditionnement}" />
				<mx:Label text="{listeGrid.selectedItem.quantite}" />
				<mx:Label text="{listeGrid.selectedItem.prix}" />
				
				
				<mx:Button label="fermer" click="currentState='listeBox'"/>
				
				
			</mx:Box>
			
		</mx:AddChild>
	</mx:State>

Et voici notre application de présentation des articles en mode "liste" et "détail" terminée.

Récupérée de « https://fr.wikibooks.org/w/index.php?title=Programmation_Flex/Applications_avancées&oldid=684690 »