Ajouter

Tutorial – Utilisation de Flex & PHP dans Flash Builder 4 / Flex Gumbo – Part 2

Posté le 5 octobre 2009 à 2:35 | Tags: Data Services, Flash Builder 4 Beta, Flex, Gumbo, Php

Dans cette suite du tutorial traitant le sujet de la gestion de Flex & PHP dans Flash Builder 4 / Flex Gumbo, nous allons voir comment apporter des possibilités d'ajout/édition de données, et enregistrement de celles-ci en base de données.

Points clés de cette seconde partie du tutorial :

1. Créer une possibilité d'ajout d'enregistrement d'un nouvel Author via un formulaire
2. Ajout d'une possibilité d'édition et de sauvegarde des données dans le projet Flex Gumbo
3. Conclusion

1. Créer une possibilité d'ajout d'enregistrement d'un nouvel Author via un formulaire

Passez tout d'abord en mode design et glissez un nouveau bouton (Spark Button) sur le Stage, renommer le en   »New ». Nous allons ensuite utiliser un assistant qui va nous permetre de générer le formulaire pour l'édition (création) de ce nouvel enregistrement.

Pour ce faire, développer la ligne « Data Type » dans le panel Data/Services, faites ensuite une clique droit sur la ligne intitulée « VOAuthor » puis cliquez sur le choix : « Generate Form ». Un assistant va alors s'ouvrir pour la configuration du nouveau formulaire. Dans le premier panel de l'assistant, cochez la case « Make form editable » puis cliquez sur suivant (cf. screen ci-dessous).

Dans le second panel de cet assistant, désélectionnez la propriété « id_aut« . En effet, cette valeur n'est pas requise car elle est automatiquement incrémentée au moment de l'ajout dans MySQL. Cliquez ensuite sur « Finish » pour valider la création de votre formulaire.

Après la génération du formulaire, vous pourrez ajuster sa position en déplaçant l'objet Form en mode design (ou code) ou vous le souhaitez, par exemple sous les boutons.

Par ailleurs, petit point noir de cette Beta d'Adobe Flash Builder, il y a un petit bug dans la génération du formulaire, les champs générés ne sont pas des Halo TextInput mais des composants Text, vous devez donc effectuer les changements pour rendre les champs complètement éditables en les passant en TextInput.

Ensuite, donnez un ID à ceux-ci afin de pouvoir récupérer leurs valeur pour les Bindings (que nous allons faire par la suite) puis ajoutez un bouton ayant pour label « Add » dans une nouvelle balise mx:FormItem (Button qui nous permettra de valider notre enregistrement par la suite)

Nous souhaitons maintenant que notre formulaire s'affiche uniquement quand on a cliqué sur le bouton « New ». Nous allons, pour ce tutorial, utiliser un technique simple pour masquer un composant via l'attribut visible. Placez-vous donc au coeur de la balise mx:Form et définissez l'attribut visible avec la valeur false. Vous devriez alors avoir un code qui ressemble à ceci :

 MXML | 
 Copier le code
 
<s:Button x="224" y="220" label="New" click="myForm.visible = true"/>
<mx:Form x="46" y="277" id="myForm" visible="false">
         <mx:FormItem label="First Name:">
             <mx:TextInput id="fname" text=""/>
         </mx:FormItem>
         <mx:FormItem label="Last Name:">
             <mx:TextInput id="lname" text=""/>
         </mx:FormItem>
         <mx:FormItem>
             <s:Button label="Add"/>
         </mx:FormItem>
</mx:Form>

Si vous regardez maintenant un peu plus haut dans le code source de notre Application Flex, vous remarquerez qu'un nouvel object a été créé, cf code ci-dessous :

 MXML | 
 Copier le code
 
<authors:VOAuthor id="vOAuthor"/>

Nous allons utiliser cette instance de l'objet de valeurs (value object) VOAuthor pour envoyer le nouvel enregistrement au serveur (rappelez-vous la méthode saveData() qui accepte uniquement des objets de type VOAuthor dans notre fichier Authors.php.

Pour ce faire, nous avons besoin des créer un lien (binding) entre les deux champs de texte (Halo TextInput) et les propriétés fname_aut et lname_aut de notre objet VOAuthor, comme représenté dans le code ci-dessous :

 MXML | 
 Copier le code
 
<fx:Binding destination="vOAuthor.fname_aut" source="fname.text"/>
<fx:Binding destination="vOAuthor.lname_aut" source="lname.text"/>

La dernière chose qu'il nous reste maintenant à faire est de sauvegarder les données l'occurence vOAuthor pour l'insertion en base de données.

La pièce manquante est donc l'appel à la méthode saveData(). Cette partie est relativement simple, nous allons ajouter un click event sur notre bouton « Add », event dans lequel nous allons faire appel à la méthode saveData() en lui passant comme paramètre notre occurence vOAuthor, comme ci-dessous :

 MXML | 
 Copier le code
 
<s:Button label="Add" click="authors.saveData(vOAuthor)"/>

Notre formulaire d'ajout est maintenant terminé !

 

2. Ajout d'une possibilité d'édition et de sauvegarde des données dans le projet Flex Gumbo

Nous avons vu dans la partie précédente comment ajouter un nouvel enregistrement à notre base de données des « Authors » mais nous ne pouvons, par contre, pas encore éditer et sauvegarder une ligne de notre Halo DataGrid. Penchons-nous donc sur ce point !

Pour éditer un item se trouvant dans le DataGrid, nous allons avoir besoin d'un peu plus de code en comparaison à l'ajout simple d'un item.

En premier lieu, nous allons devoir ajouter un listener (écouteur) sur la DataGrid qui va se déclencher à la suite de l'édition d'un champ.

Commençons donc par ajouter l'écouteur ItemEditEnd comme ci-dessous :

 MXML | 
 Copier le code
 
<mx:DataGrid x="44" y="37" id="dataGrid" dataProvider="{getDataResult.lastResult}" 
             itemEditEnd="dataEdited(event)" editable="true">

Définissons ensuite notre fonction dataEdited(). Ajoutez le code suivant dans une section de votre page :

 MXML | 
 Copier le code
 
 private function dataEdited(event: DataGridEvent):void 
 {
      vOAuthor = event.itemRenderer.data as VOAuthor;
 }

Ce code utilise l'instance du value object VOAuthor pour stocker les données (data) de la ligne qui vient d'être éditée dans le Halo DataGrid en utilisant l'occurrence vOAuthor qui a été créée grâce au formulaire plus haut dans ce tutorial.

Les deux dernières choses qu'il nous reste à faire sont de créer dans une fonction appelée saveData() qui va être appelée quand on va cliquer sur un bouton « Save Data« , et d'ajouter un code d'initialisation (initialization) pour l'objet vOAuthor pour ne pas avoir des problèmes de croisement de données quand l'utilisateur clique sur le Bouton « New« .

Le Code de la fonction (function) saveData() est le suivant :

 MXML | 
 Copier le code
 
private function saveData():void {
    if (vOAuthor != null)
       authors.saveData(vOAuthor);
 }

Et le petit ajout de l'initialisation pour l'ajout est le suivant :

 MXML | 
 Copier le code
 
<s:Button x="224" y="220" label="New" 
     click="myForm.visible = true; vOAuthor = new VOAuthor()"/>

Vous devriez maintenant avoir un code qui ressemble à ceci :

 MXML | 
 Copier le code
 
<?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/halo" 
                minWidth="1024" minHeight="768" 
                xmlns:authors="services.authors.*"
                >
     <fx:Script>
         <![CDATA[
             import mx.events.DataGridEvent;
             import services.authors.VOAuthor;
             import mx.events.FlexEvent;
             import mx.controls.Alert;
 
             protected function getData():void
             {
                 getDataResult.token = authors.getData();
             }
 
             private function dataEdited(event: DataGridEvent):void 
             {
                 vOAuthor = event.itemRenderer.data as VOAuthor;
             }
 
             private function saveData():void {
                 if (vOAuthor != null)
                     authors.saveData(vOAuthor);
             }
 
         ]]>
     </fx:Script>
     <fx:Binding destination="vOAuthor.fname_aut" source="fname.text"/>
     <fx:Binding destination="vOAuthor.lname_aut" source="lname.text"/>
     <fx:Declarations>
         <s:CallResponder id="getDataResult"/>
         <authors:Authors id="authors" destination="Authors" endpoint="http://localhost/flexPHPAMF-debug/gateway.php" 
             fault="Alert.show(event.fault.faultString)" 
             showBusyCursor="true" source="Authors"/>
         <authors:VOAuthor id="vOAuthor"/>
     </fx:Declarations>
     <mx:DataGrid x="44" y="37" id="dataGrid" dataProvider="{getDataResult.lastResult}" 
         itemEditEnd="dataEdited(event)" editable="true">
         <mx:columns>
             <mx:DataGridColumn headerText="id_aut" dataField="id_aut"/>
             <mx:DataGridColumn headerText="fname_aut" dataField="fname_aut"/>
             <mx:DataGridColumn headerText="lname_aut" dataField="lname_aut"/>
         </mx:columns>
     </mx:DataGrid>
     <s:Button x="43" y="220" label="Get Data" click="getData()"/>
     <s:Button x="129" y="220" label="Save Data" click="saveData()"/>
     <s:Button x="224" y="220" label="New" click="myForm.visible = true; vOAuthor = new VOAuthor()"/>
 
     <mx:Form x="46" y="277" id="myForm" visible="false">
         <mx:FormItem label="First Name:">
             <mx:TextInput id="fname" text=""/>
         </mx:FormItem>
         <mx:FormItem label="Last Name:">
             <mx:TextInput id="lname" text=""/>
         </mx:FormItem>
         <mx:FormItem>
             <s:Button label="Add" click="authors.saveData(vOAuthor)"/>
         </mx:FormItem>
     </mx:Form>
 
 </s:Application>

 

3. Conclusion

Il vous reste maintenant à créer la fonction de suppression. Grâce à ce tutorial (partie 1 et 2), cette opération ne devrait pas être compliquée sachant que vous disposez maintenant de toutes les méthodes pour y parvenir facilement. Le principe est de récupérer les données d'une ligne du DataGrid, d'alimenter l'objet vOAuthor avec ses données, puis d'appeler la fonction authors.deleteData(vOAuthor)…

Grâce à ce tutorial, vous pouvez maintenant entrevoir l'immensité des possibilités qui s'offrent à vous…  le PHP, les classes, les accès MySQL sont des choses relativement simple à mettre en place grâce à l'implémentation du Zend Framework, à la méthode remoting, et surtout grâce à l'implémentation d'un support dans Adobe Flash Builder 4 / Flex Gumbo, pour l'utilisation de celles-ci.

Si vous souhaitez récupérer les sources de ce projet, vous pourrez le faire en cliquant sur le lien ci-dessous (vous trouverez les fichiers PHP et le dump pour la base de données dans le dossier service de l'archive) :

 Télécharger le projet du Tutorial Flex & PHP

Autre(s) source(s) proche(s) de ce sujet :

1. Tutorial – Geocoding avec l'API Google MAP dans Flash Builder 4 / Flex Gumbo – Part 1
2. Tutorial – Chargement de Markers personnalisés via PHP / MySQL dans Flash Builder 4 / Flex Gumbo
3. Utilisation d'un Spark NavigatorContent dans un Halo Accordion dans Flash Builder 4 / Flex Gumbo
4. Tutorial – Utilisation de la nouvelle syntaxe CSS dans Flash Builder 4 / Flex Gumbo
5. Tutorial – Utilisation de Flex & PHP dans Flash Builder 4 / Flex Gumbo – Part 1
6. Tutorial : Utilisation des States et ItemRenderer dans un Composant List de Flash builder 4 / Flex Gumbo