        <?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="700" …>
   <fx:Script>
      <![CDATA[
         (…)
import mx.rpc.events.ResultEvent;
         
         protected function button_clickHandler(event:MouseEvent):void
         {
            employee.lastname = lastnameTextInput.text;
            employee.firstname = firstnameTextInput.text;
            employee.title = titleTextInput.text;
            employee.departmentid = parseInt(departmentidTextInput.text);
            employee.cellphone = cellphoneTextInput.text;
            employee.officephone = officephoneTextInput.text;
            employee.email = emailTextInput.text;
            employee.office = officeTextInput.text;
            employee.street = streetTextInput.text;
            employee.city = cityTextInput.text;
            employee.state = stateTextInput.text;
            employee.zipcode = zipcodeTextInput.text;
            employee.photofile = photofileTextInput.text;
            createEmployeeResult.token = employeeService.createEmployee(employee);
         }   
         protected function addBtn_clickHandler(event:MouseEvent):void
         {
            currentState="EmployeeAdd";
            employee=new Employee();
         }
         protected function createEmployeeResult_resultHandler(event:ResultEvent):void
         {            
currentState="EmployeeDetails"; employee.id=event.result as int; empDg.dataProvider.addItem(employee); empDg.setSelectedIndex(empDg.dataProvider.getItemIndex(employee));
            empDg.ensureCellIsVisible(empDg.selectedIndex);
         }
      ]]>
   </fx:Script>
   <s:states>
      (…)
      <s:State name="EmployeeAdd"/>
   </s:states>
   <fx:Declarations>
      (…)   
      <s:CallResponder id="createEmployeeResult" result="createEmployeeResult_resultHandler(event)"/>
   </fx:Declarations>
   <fx:Binding source="empDg.selectedItem as Employee" destination="employee"/>
   <s:Label x="50" y="50" color="#1239E3" fontSize="20" fontWeight="bold"
          text="XYZ Corporation Directory"/>
   <s:Button id="empBtn" x="50" y="100" label="Employees"
           click.Departments="empBtn_clickHandler(event)"
           enabled.EmployeeAdd="false"
           enabled.EmployeeDetails="false"
           enabled.Employees="false"/>
   <s:Button id="deptBtn" x="140" y="100" label="Departments"
           enabled.Departments="false"
           click="deptBtn_clickHandler(event)"/>
   <s:DataGrid id="empDg" includeIn="EmployeeAdd,EmployeeDetails,Employees…/>
   (…)
   <s:TextInput id="searchTxt" includeIn="EmployeeAdd,EmployeeDetails,Employees" …/>
   <s:Button id="searchBtn" includeIn="EmployeeAdd,EmployeeDetails,Employees" …/>
   <s:Button id="updateBtn" includeIn="EmployeeAdd,EmployeeDetails" 
           enabled.EmployeeAdd="false" …/>
   <s:Button id="deleteBtn" includeIn="EmployeeAdd,EmployeeDetails" enabled.EmployeeAdd="false"…/>
   <s:Button id="addBtn" includeIn="EmployeeAdd,EmployeeDetails,Employees"           
                                click="addBtn_clickHandler(event)" enabled.EmployeeAdd="false"…/>
   <s:Form includeIn="EmployeeAdd" x="36" y="310" defaultButton="{button}">
      <s:FormItem label="Last Name">
         <s:TextInput id="lastnameTextInput" text="{employee.lastname}"/>
      </s:FormItem>
      <s:FormItem label="First Name">
         <s:TextInput id="firstnameTextInput" text="{employee.firstname}"/>
      </s:FormItem>
      <s:FormItem label="Title">
         <s:TextInput id="titleTextInput" text="{employee.title}"/>
      </s:FormItem>
      <s:FormItem label="Department ID">
         <s:TextInput id="departmentidTextInput" text="{employee.departmentid}"/>
      </s:FormItem>
      <s:FormItem label="Cell Phone">
         <s:TextInput id="cellphoneTextInput" text="{employee.cellphone}"/>
      </s:FormItem>
      <s:FormItem label="Office Phone">
         <s:TextInput id="officephoneTextInput" text="{employee.officephone}"/>
      </s:FormItem>
      <s:FormItem label="Email">
         <s:TextInput id="emailTextInput" text="{employee.email}"/>
      </s:FormItem>
   </s:Form>
   <s:Form includeIn="EmployeeAdd" x="323" y="310">
      <s:FormItem label="Office">
         <s:TextInput id="officeTextInput" text="{employee.office}"/>
      </s:FormItem>
      <s:FormItem label="Street">
         <s:TextInput id="streetTextInput" text="{employee.street}"/>
      </s:FormItem>
      <s:FormItem label="City">
         <s:TextInput id="cityTextInput" text="{employee.city}"/>
      </s:FormItem>
      <s:FormItem label="State">
         <s:TextInput id="stateTextInput" text="{employee.state}"/>
      </s:FormItem>
      <s:FormItem label="Zipcode">
         <s:TextInput id="zipcodeTextInput" text="{employee.zipcode}"/>
      </s:FormItem>
      <s:FormItem label="Photo File">
         <s:TextInput id="photofileTextInput" text="{employee.photofile}"/>
      </s:FormItem>
      <s:FormItem>
         <s:Button id="button" label="Add" click="button_clickHandler(event)"/>
      </s:FormItem>
   </s:Form>
</s:Application>
    

Didacticiel

Dans le module 1, vous avez extrait et affiché les données d'une base de données. Dans celui-ci, vous allez modifier la base de données, c'est-à-dire que vous allez ajouter, mettre à jour et supprimer des données.

Dans ce didacticiel, vous allez créer un état EmployeeAdd comportant un formulaire de saisie permettant à l'utilisateur d'ajouter un employé dans la base de données.

Étape 1 : Créez un état.

Créez un état nommé EmployeeAdd à partir de l'état EmployeesDetails. Dans ce nouvel état, supprimez les deux formulaires et désactivez les boutons Add, Delete et Update (voir Figure 1).

Figure 1. Créez l'état EmployeeAdd.

Étape 2 : Créez un formulaire de saisie.

En mode Création, faites glisser un conteneur Form et placez-le sous le DataGrid. Faites glisser l'opération getEmployees() de la vue Données/Services sur le conteneur Form. À l'aide de l'assistant, créez un formulaire modifiable qui utilise l'appel getEmployeesResult existant. Dans la boîte de dialogue Mappage de contrôle de propriété, choisissez de ne pas afficher l'id et agencez les champs dans leur ordre d'affichage (voir Figure 2).

Figure 2. Utilisez l'assistant Générer le formulaire pour créer un formulaire de détails modifiable.

Passez en mode Source et examinez le code généré. Ce code est similaire à celui généré dans le module précédent pour l'état EmployeeDetails. L'état EmployeeAdd y est défini dans la balise states et une balise Form a été ajoutée. Toutefois, dans le cas présent, les balises FormItem contiennent des contrôles TextInput, et non Label.

Notez que dans les balises FormItem, les propriétés text des contrôles TextInput sont liées à une propriété d'un objet employee2.

        <s:Form includeIn="EmployeeAdd" defaultButton="{button}">
   <s:FormItem label="lastname">
      <s:TextInput id=" lastnameTextInput" text="{employee2.lastname}"/>
   </s:FormItem>
    

Examinez la section Declarations. L'objet employee2 y est défini en tant qu'instance de la classe Employee :

<valueObjects:Employee id="employee2"/>

Dans la mesure où l'assistant Générer le formulaire ne permet pas de désigner un objet à des fins d'affichage (employee, par exemple), il génère une nouvelle variable, employee2, à laquelle il lie les propriétés.

Repérez le nouveau bouton à la fin du nouveau formulaire. Un gestionnaire d'événements click a déjà été défini pour ce bouton :

<s:Button id="button" label="Submit" click="button_clickHandler(event)"/>

Repérez le gestionnaire correspondant dans le bloc Script. Il attribue aux propriétés de l'objet employee2 des valeurs identiques à celles saisies par l'utilisateur dans les champs du formulaire TextInput.

        protected function button_clickHandler(event:MouseEvent):void
{
    employee2.lastname = lastnameTextInput.text;
    employee2.firstname = firstnameTextInput.text;
    employee2.title = titleTextInput.text;
    employee2.departmentid = parseInt(departmentidTextInput.text);
    employee2.cellphone = cellphoneTextInput.text;
    employee2.officephone = officephoneTextInput.text;
    employee2.email = emailTextInput.text;
    employee2.office = officeTextInput.text;
    employee2.street = streetTextInput.text;
    employee2.city = cityTextInput.text;
    employee2.state = stateTextInput.text;
    employee2.zipcode = zipcodeTextInput.text;
    employee2.photofile = photofileTextInput.text;
}
    

Étape 3 : Remplacez l'objet employee2 par employee.

Supprimez les balises declaration de l'objet employee2 et sélectionnez Edition > Rechercher/Remplacer pour remplacer les références à employee2 par employee dans le nouveau formulaire et la fonction button_clickHandler().

La ligne de code à supprimer est la suivante :

<valueObjects:Employee id="employee2"/>

Les contrôles TextInput du nouveau formulaire doivent correspondre au modèle suivant :

        <s:FormItem label="Last Name">
    <s:TextInput id="lastnameTextInput" text="{employee.lastname}"/>
</s:FormItem>
    

Par ailleurs, les instructions de la fonction button_clickHandler() doivent se présenter comme suit :

employee.lastname = lastnameTextInput.text;

Étape 4 : Modifiez la présentation du formulaire.

Agencez le formulaire de saisie comme illustré Figure 3 en faisant glisser un second conteneur Form hors de la section Présentation de la vue Composants et en faisant glisser le composant FormItems d'un conteneur Form vers l'autre. Modifiez les propriétés du label et remplacez le label du bouton Submit par Add.

Voici quelques conseils d'agencement des formulaires :

Vous pouvez cliquer en maintenant la touche Maj enfoncée pour sélectionner plusieurs éléments et les déplacer simultanément d'un conteneur Form vers l'autre.
Observez les positions x et y des deux formulaires de l'état EmployeeDetails et utilisez-les dans les nouveaux formulaires pour que ceux-ci apparaissent exactement au même endroit.
Si l'application ne peut pas contenir la totalité des contrôles, augmentez la valeur de sa propriété minHeight.
Double-cliquez sur un libellé FormItem dans la zone de création pour le modifier.
Pour aligner le bouton Add sur les champs de formulaire situés au-dessus, placez-le à l'intérieur d'un FormItem dépourvu de propriété label :

        <s:FormItem>
 <s:Button id="button" label="Add" click="button_clickHandler(event)"/>
</s:FormItem>
    

Figure 3. Agencez l'état EmployeeAdd comme illustré ici.

Étape 5 : Basculez d'un état à l'autre lorsque l'utilisateur clique sur le bouton Add.

Générez un gestionnaire click pour le bouton Add situé au-dessus du formulaire (et non celui qui se trouve à l'intérieur) et dans le gestionnaire, affectez la valeur EmployeeAdd à la propriété currentState et une nouvelle instance de la classe Employee à la variable employee. Associez le gestionnaire click à ce bouton dans tous les états.

Le gestionnaire d'événements doit se présenter comme suit :

        protected function addBtn_clickHandler(event:MouseEvent):void
{
    currentState="EmployeeAdd";
    employee=new Employee();
}
    

Modifiez le contrôle Button addBtn afin qu'il devienne le gestionnaire click de tous les états :

        <s:Button  id="addBtn" includeIn="EmployeeAdd,EmployeeDetails,Employees"
label="Add" x="630" y="268" enabled.EmployeeAdd="false"
   click="addBtn_clickHandler(event)"/>              
    

Exécutez l'application et cliquez sur le bouton Add. Vous devez obtenir un formulaire de saisie vierge (voir Figure 4).

Figure 4. Examinez le nouvel état EmployeeAdd dans un navigateur.

Étape 6 : Envoyez des données au serveur.

Faites glisser l'opération createEmployee() du panneau Données/Services vers le bouton Add du formulaire. À l'intérieur du gestionnaire généré, transmettez l'objet employee à l'opération de service.

Le gestionnaire doit se présenter comme suit :

        protected function button_clickHandler(event:MouseEvent):void
{
    employee.lastname = lastnameTextInput.text;
    employee.firstname = firstnameTextInput.text;
    employee.title = titleTextInput.text;
    employee.departmentid = parseInt(departmentidTextInput.text);
    employee.cellphone = cellphoneTextInput.text;
    employee.officephone = officephoneTextInput.text;
    employee.email = emailTextInput.text;
    employee.office = officeTextInput.text;
    employee.street = streetTextInput.text;
    employee.city = cityTextInput.text;
    employee.state = stateTextInput.text;
    employee.zipcode = zipcodeTextInput.text;
    employee.photofile = photofileTextInput.text;
    createEmployeeResult.token = employeeService.createEmployee(employee);
}
    

Un nouvel objet CallResponder a été créé pour cet appel de service :

<s:CallResponder id="createEmployeeResult"/>

Étape 7 : Mettez les données locales à jour.

Ajoutez un attribut d'événement result à l'objet CallResponder createEmployeeResult et générez un gestionnaire d'événements (voir Figure 5). À l'intérieur du gestionnaire, attribuez la valeur EmployeeDetails à la propriété currentState, définissez l'id du nouvel employé et utilisez la méthode addItem() pour ajouter le nouvel employé au dataProvider du DataGrid.

Figure 5. Générez un gestionnaire d'événements result pour l'objet CallResponder.

L'objet CallResponder createEmployeeResult doit se présenter comme suit :

        <s:CallResponder id="createEmployeeResult" result="createEmployeeResult_resultHandler(event)"/>
    

Par ailleurs, le gestionnaire d'événements result doit se présenter comme suit :

        protected function createEmployeeResult_resultHandler(event:ResultEvent):void
{
    currentState="EmployeeDetails";
    employee.id=event.result as int;
    empDg.dataProvider.addItem(employee);
}
    

Une fois les données ajoutées dans la base de données, l'état EmployeeDetails apparaîtra avec les détails du nouvel employé. Néanmoins, à ce stade, le nouvel employé a été enregistré dans la base de données sur le serveur, mais pas dans l'ensemble de données affiché dans le DataGrid. Vous devez donc affecter le nouvel id généré à l'objet employee et ajouter celui-ci aux données affichés dans le DataGrid.

Si vous observez le fichier de service TestDrive côté serveur, vous pouvez constater que la méthode createEmployee() renvoie un entier identique à l'id du nouvel employé inséré dans la base de données. Les données renvoyées par un appel de méthode côté serveur sont stockées dans la propriété result de l'objet event transmis au gestionnaire d'événements result. Les valeurs de la propriété id de l'objet employee sont de type entier. En revanche, les valeurs de la propriété result de l'objet event sont de type objet général. Pour que la propriété id soit identique à event.result, vous devez donc convertir cette dernière en type de données entier.

Remarque : pour examiner les propriétés de l'objet event et d'autres objets dans le module 3 : Tester et déboguer le code, vous utiliserez le débogueur de Flash Builder.

La méthode addItem() fait partie de la classe Flex ArrayCollection. Lorsque les données relatives aux employés ont été initialement extraites du serveur, elles ont été stockées sous forme de classe ArrayCollection d'objets Employee dans le DataGrid dataProvider.

Remarque : dans cet exemple, vous écrivez du code pour mettre à jour les données côté serveur (stockées dans la base de données) et côté client (stockées dans le DataGrid dataProvider). Flash Builder inclut également une fonction de gestion de données qui facilite la synchronisation des données côtés client et serveur.

Exécutez l'application et ajoutez un employé. Même si vous n'avez défini aucun champ comme obligatoire, saisissez au moins un nom de famille pour retrouver facilement le premier enregistrement. Pour voir ce nouvel enregistrement, vous devez faire défiler le DataGrid.

Actualisez le navigateur et assurez-vous que le nouvel employé est visible dans le DataGrid.

Étape 8 : Sélectionnez et affichez le nouvel enregistrement dans le DataGrid.

À l'intérieur du gestionnaire createEmployeeResult result, sélectionnez le nouvel employé en appelant la méthode setSelectedIndex() du DataGrid et en lui transmettant l'index du nouvel employé dans le dataProvider du DataGrid, empDg.dataProvider.getItemIndex(employee). Pour vous assurer que la nouvelle ligne est visible, appelez la méthode ensureCellsIsVisible() du DataGrid en lui transmettant l'index de la ligne à afficher, empDg.selectedIndex.

Le gestionnaire d'événements result doit se présenter comme suit :

        protected function createEmployeeResult_resultHandler(event:ResultEvent):void
{
    currentState="EmployeeDetails";
    employee.id=event.result as int;
    empDg.dataProvider.addItem(employee);
    empDg.setSelectedIndex(empDg.dataProvider.getItemIndex(employee));
    empDg.ensureCellsVisible(empDg.selectedindex);
}
    

Exécutez l'application et ajoutez un employé. Celui-ci doit à présent être sélectionné et affiché dans le DataGrid (voir Figure 6).

Figure 6. Ajoutez un nouvel employé pour le sélectionner et l'afficher dans le DataGrid.

Dans le didacticiel suivant, vous allez mettre à jour et supprimer des informations sur les employés dans la base de données.

Pour en savoir plus

Pour en savoir plus sur cette rubrique, consultez les ressources suivantes :

Documentation: Accès aux données avec Flex

Documentation : Utilisation de Flex 4.5

Cette œuvre fait l’objet d’une licence Paternité - Pas d’utilisation commerciale - Partage des conditions Initiales à l’identique 3.0 Unported Creative Commons. Les autorisations qui n'entrent pas dans le cadre de cette licence, concernant les exemples de code inclus dans cette œuvre, sont disponibles auprès d'Adobe.

Test : Déployer une application sur un serveur web

par Adobe

Modifié

Partage

Tags

Ajouter des données

Code

Didacticiel

Étape 1 : Créez un état.

Étape 2 : Créez un formulaire de saisie.

Étape 3 : Remplacez l'objet employee2 par employee.

Étape 4 : Modifiez la présentation du formulaire.

Étape 5 : Basculez d'un état à l'autre lorsque l'utilisateur clique sur le bouton Add.

Étape 6 : Envoyez des données au serveur.

Étape 7 : Mettez les données locales à jour.

Étape 8 : Sélectionnez et affichez le nouvel enregistrement dans le DataGrid.

Pour en savoir plus

Documentation: Accès aux données avec Flex

Documentation : Utilisation de Flex 4.5

More Like This

Produits

Solutions

Secteurs d'activité

Aide

Formation

Options d'achat

Téléchargements

Société