Programmation Flex/Applications avancées

Un gestionnaire d'articles Flex/XML.
Ce gestionnaire comprend 2 sections :
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 :
Besoins :
Les données.
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>
Les premiers tests.
<?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>
Pour mettre les images.
 <!-- IMAGE -->
 <mx:DataGridColumn itemRenderer="ImageRenderer" headerText="image"/>
<?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>
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'"/>
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)">
<mx:Script>
 <![CDATA[
 import mx.events.ListEvent;
 protected function datagrid1_itemClickHandler(event:ListEvent):void
 // TODO Auto-generated method stub
 currentState='detailBox';
 ]]>
</mx:Script>
Pour améliorer les états
 <!-- 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()"/>
 <!-- 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>
<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.
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 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.

Scheider-Kreuznach
Goerz (Allemagne)
Photographie/Personnalités/S/Jean-Baptiste Sabatier-Blot

Jean-Baptiste Sabatier-Blot était un photographe français,photographe français, mort en 1881.

Louis Daguerre
Programmation Flex/Liens
Didacticiels.
Un site très complet présentant énormément d'exemples

Goélette Cardabela/Présentation
Le choix des couleurs.
But de la construction :
Naviguer en haute mer et remonter les grands fleuves : le Nil, la Casamance, l'Amazone. Certains de ces cours d'eau coulent dans des pays maintenant peu fréquentables. Il y a cependant encore des possibilités sur le fleuve Amazone en ce début d'année 2012 ; au sud de la Colombie, était plutôt rassurant, bien que loin de la mer.
Aucun navire de plaisance n'avait été construit pour supporter les risques de collision dans les grands fleuves qui charrient toutes sortes d'objets, surtout des végétaux et des arbres. Par conséquent, la goélette Cardabela a été conçue pour supporter ces chocs violents sur son avant grâce à son bulbe d'étrave qui peut éclater et absorber une énergie importante. Des cloisons étanches ont été construites à l'étrave et à la poupe avec un remplissage en mousse expansée de polyuréthane.
La construction est de conception entièrement amateur : plans, construction, aménagements. Les plans ont été élaborés en partie sur le plateau du Larzac où poussent des chardons au ras du sol les "Cardabelles", Cardabela en occitan. En 1976 le programme de navigation de cette goélette était de remonter les fleuves et les rivières, d'où son faible tirant d'eau (0,80 m) et la possibilité de coucher les mâts sans trop de difficultés afin de passer les obstacles aériens. La construction du prototype a commencé en 1979 pour se terminer en 1999 avec le passage aux douanes, et par les Affaires maritimes pour obtenir la première catégorie de navigation.
Choix des matériaux : 
Choix des couleurs :