        <?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" minWidth="955" minHeight="600">
   <s:Label x="50" y="50" color="maroon" fontSize="20" fontWeight="bold" text="XYZ Corporation Directory"/>
   <s:Button id="empBtn" x="50" y="100" label="Employees"/>
   <s:Button id="deptBtn" x="140" y="100" label="Departments"/>
   <s:DataGrid id="empDg" x="50" y="130" requestedRowCount="4">
      <s:columns>
         <s:ArrayList>
            <s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
            <s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
            <s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn>
         </s:ArrayList>
      </s:columns>
      <s:typicalItem>
         <fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
      </s:typicalItem>
      <s:ArrayList>
         <fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object>
         <fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object>
         <fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object>
         <fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object>
      </s:ArrayList>
   </s:DataGrid>
</s:Application>
    

Didacticiel

Au cours de ce test, vous allez créer une application Flex pour extraire, afficher et modifier des enregistrements de base de données (voir Figure 1). Une application Flex ne se connecte pas directement à une base de données distante. En réalité, c'est vous qui la connectez à un service de données écrit dans votre langage web préféré (PHP, ColdFusion, Java ou toute autre technologie web serveur). Vous allez créer l'application Flex frontale. La base de données et le code côté serveur permettant de lire, ajouter, modifier et supprimer des enregistrements de base de données sont fournis sous forme de classe PHP, de composant ColdFusion ou de classes Java.

Figure 1.L'application test terminée.

Dans ce module, vous allez créer un projet Flex et une application Flex pour extraire les données de la base de données et les afficher. Dans cette application, deux "pages" présenteront respectivement des informations relatives aux employés et aux services.

Votre première tâche consistera à créer un nouveau projet Flex pour votre serveur d'applications et à générer l'interface utilisateur. Dans le didacticiel suivant, vous devrez extraire des données du serveur et les afficher.

Étape 1 : Installez les fichiers serveur sur un serveur d'applications local.

Suivez les instructions de l'une des sections ci-dessous.

Configuration pour PHP
Configuration pour ColdFusion
Configuration pour Java

Les fichiers d'installation comprennent une base de données et les fichiers côté serveur pour la manipulation des données de cette base. Votre application Flex va appeler les méthodes de l'un de ces fichiers côté serveur, EmployeeService.

Remarque : si vous avez installé les fichiers serveur du test Flex 4.5 pour terminaux mobiles (ajouter un lien) ou des exemples d'application de messagerie électronique de la version d'évaluation de Flex 4.5, vous pouvez ignorer cette étape. En effet, les fichiers côté serveur sont communs.

Configuration pour PHP

Téléchargez l'archive d'installation du test (ZIP, 15,7 Mo) et décompressez le fichier testdrive_setup_PHP. Elle contient un dossier Database et un dossier TestDrive.
Créez une base de données testdrive_db sur votre installation MySQL en utilisant le fichier testdrive_db.sql du dossier Database. Si vous ne possédez pas les autorisations nécessaires pour créer une base de données, utilisez le fichier testdrive_table.sql pour en créer deux dans une base de données existante. Une fois la base de données créée, définissez les autorisations correspondantes.
Déplacez le dossier TestDrive, qui contient le fichier de service PHP, sur votre serveur PHP.
Ouvrez /TestDrive/test/test.php dans un éditeur, puis remplacez les nom d'utilisateur, mot de passe, nom de serveur et nom de base de données par les valeurs correspondant à la configuration de votre serveur. Testez la configuration en vous rendant sur http://{votre serveur:votre port}/TestDrive/test/test.html. Par exemple, sélectionnez http://localhost/TestDrive/test/test.html. La liste des noms d'employé figurant dans la base de données devrait apparaître.
Ouvrez /TestDrive/services/EmployeeService.php dans un éditeur, puis remplacez les nom d'utilisateur, mot de passe, nom de serveur, port et nom de base de données par les valeurs correspondant à la configuration de votre serveur. Ce fichier de classe contient les méthodes que vous appellerez à partir de votre application Flex.

Configuration pour ColdFusion

Téléchargez l'archive d'installation du test (ZIP, 15,7 Mo) et décompressez le fichier testdrive_setup_CF. Il contient deux fichiers CAR (testdrive_mac.car et testdrive_win.car) et un fichier ZIP (testdrive.zip).
Si vous possédez ColdFusion Enterprise ou ColdFusion Developer, déployez l'un des fichiers CAR. Dans ColdFusion Administrator (http://localhost:8500/CFIDE/administrator/ sur l'installation autonome par défaut), accédez à Packaging & Deployment > ColdFusion Archives, puis sélectionnez et déployez l'un des fichiers CAR. Dans l'assistant Deploy Wizard, remplacez les emplacements de destination du déploiement par les dossiers db et wwwroot sur votre serveur. Par exemple,
- sur Mac : /Applications/ColdFusion9/wwwroot/TestDrive et /Applications/ColdFusion9/db/testdrive ou
- sous Windows : C:\ColdFusion9\wwwroot\TestDrive et C:\ColdFusion 9\db\testdrive.
Une fois le déploiement terminé, vérifiez que vous disposez d'une nouvelle source de données et d'un nouveau dossier nommés respectivement testdrive_db et TestDrive. Si la vérification de la source de données échoue, supprimez celle-ci et récréez-la : testdrive_db, Apache Derby Embedded, puis pointez vers la base de données /ColdFusion/db/testdrive que vous venez d'installer.
Si vous possédez ColdFusion Standard, vous devez placer les fichiers de serveur et créer une source de données manuellement. Décompressez le fichier testdrive.zip, qui contient les dossiers TestDrive et db. Placez le dossier TestDrive dans le dossier webroot de ColdFusion : /ColdFusion/wwwroot/. Ouvrez le dossier db. Ce dernier contient un dossier nommé testdrive. Placez celui-ci dans le dossier db de ColdFusion, /ColdFusion/db/. Dans ColdFusion Administrator (http://localhost:8500/CFIDE/administrator/ sur l'installation autonome par défaut), accédez à Data & Services > Data Sources et créez une source de données nommée testdrive_db avec un pilote Apache Derby Embedded et le dossier testdrive que vous venez de placer dans le dossier /ColdFusion/db/ comme dossier de base de données.
Ouvrez /ColdFusion/wwwroot/TestDrive/services/EmployeeService.cfc dans un éditeur et examinez le code. Ce fichier de classe contient les méthodes que vous appellerez à partir de votre application Flex. Notez que l'argument des méthodes est défini pour un accès à distance afin qu'elles puissent être appelées à partir d'une application Flex.
Ouvrez /ColdFusion9/wwwroot/WEB-INF/flex/services-config.xml dans un éditeur. Ce fichier est utilisé lorsque l'application émet des appels destinés au serveur. Repérez la balise <property-case> et remplacez les trois valeurs par true, comme illustré ci-dessous :

        <property-case>
    <!-- cfc property names -->
    <force-cfc-lowercase>true</force-cfc-lowercase>
    <!-- Query column names -->
    <force-query-lowercase>true</force-query-lowercase>
    <!-- struct keys -->
    <force-struct-lowercase>true</force-struct-lowercase>
</property-case> 
    

Remarque : Si vous utilisez une ancienne version de ColdFusion, il est possible que votre fichier de configuration ne contienne pas ces balises et que vous deviez les y ajouter. Pour plus de détails, consultez la documentation relative à l’utilisation de Flash Remoting avec votre serveur.

Redémarrez le serveur ColdFusion.

Testez la configuration en vous rendant sur :

http://{votre serveur:votre port}/TestDrive/test/test.html

Pour une installation autonome par défaut de ColdFusion, sélectionnez :

http://localhost:8500/TestDrive/test/test.html

Les informations relatives aux employés figurant dans la base de données doivent apparaître dans un composant DataGrid.

Configuration pour Java

Téléchargez l’archive d’installation du test (ZIP, 15,7 Mo) et décompressez le fichier testdrive_setup_JAVA. Il contient le fichier WAR d’une application web, appelé testdrive.
Déployez-le sur votre serveur web. Ce fichier contient les classes Java, une base de données Apache Derby Embedded et des fichiers BlazeDS 4.
Ouvrez /{dossier de vos applications web serveur}/testdrive/WEB-INF/src/services/EmployeeService.java dans un éditeur. Ce fichier de classe contient les méthodes que vous appellerez à partir de votre application Flex. Il doit comporter un constructeur sans argument.
Remarque : Sous Windows, le fichier ConnectionHelper.java suppose que l’application web testdrive est déployée sur le lecteur C. Si tel n’est pas le cas, vous devez modifier ce fichier en conséquence et le recompiler en remplaçant /{dossier de vos applications web serveur}/testdrive/WEB-INF/classes/services/ConnectionHelper.class.
Ouvrez /WEB-INF/flex/remoting-config.xml dans un éditeur et examinez le code. Ce fichier est utilisé lorsque l’application émet des appels destinés au serveur. Notez la définition de la destination employeeService qui pointe vers la classe services.EmployeeService.
Testez la configuration en vous rendant sur :
http://{votre serveur:votre port}/testdrive/test/test.html

Par exemple, pour le serveur clé en main BlazeDS, sélectionnez :

http://localhost:8400/testdrive/test/test.html

Les informations relatives aux employés figurant dans la base de données doivent apparaître dans un composant DataGrid.

Étape 2 : Créez un nouveau projet Flex.

Suivez les instructions de l’une des sections ci-dessous.

Paramètres de projet pour PHP avec Flash Builder 4.5 pour PHP
Paramètres de projet pour Java, ColdFusion ou PHP avec Flash Builder 4.5

Paramètres de projet pour PHP avec Flash Builder 4.5 pour PHP

Dans Flash Builder 4.5 pour PHP, sélectionnez Fichier > Nouveau > Projet Flex et PHP et créez un projet PHP nommé TestDrive à un emplacement existant (voir Figure 2). Veillez à bien spécifier l’emplacement du serveur PHP où vous avez enregistré le dossier TestDrive à l’étape 1.
Définissez les paramètres d’emplacement du serveur appropriés (voir Figure 2) et validez la configuration. Cette figure présente des exemples de paramètres pour un serveur Zend sur Mac ; veillez à bien utiliser les valeurs correspondant à votre serveur PHP (il ne doit pas nécessairement s’agir d’un serveur Zend), notamment le dossier racine web et l’URL racine appropriés.

Figure 2. Créez un projet PHP avec Flash Builder 4.5 pour PHP.

Cliquez sur le bouton Suivant, créez un projet Flex nommé FlexWebTestDrive et enregistrez les fichiers de ce projet en local (voir Figure 3). Vous pouvez généralement utiliser la valeur par défaut pour le dossier de sortie, c'est-à-dire le dossier du serveur d'applications où seront stockés l'application compilée et les fichiers associés.

Figure 3. Créez un projet Flex avec Flash Builder 4.5 pour PHP.

Paramètres de projet pour Java, ColdFusion ou PHP avec Flash Builder 4.5

Dans Flash Builder 4.5, sélectionnez Fichier > Nouveau > Projet Flex, créez un projet Flex nommé FlexWebTestDrive et enregistrez les fichiers de ce projet en local (voir Figure 4).

Figure 4. Créez un projet Flex avec Flash Builder 4.5.

Cliquez sur le bouton Suivant, sélectionnez votre serveur d'applications, définissez les paramètres d'emplacement du serveur appropriés (voir Figures 5 et 6) et validez la configuration. Ces figures présentent des exemples de paramètres pour Java avec des serveurs BlazeDS et ColdFusion ; veillez à bien utiliser les valeurs correspondant à la configuration de votre serveur !Vous pouvez généralement utiliser la valeur par défaut pour le dossier de sortie, c'est-à-dire le dossier du serveur d'applications où seront stockés l'application compilée et les fichiers associés.

Figure 5. Spécifiez les paramètres serveur Java.

Figure 6. Spécifiez les paramètres serveur ColdFusion.

Étape 3 : Examinez le projet et les fichiers générés.

Pour explorer le(s) projet(s) et les fichiers générés, utilisez l'Explorateur de packages.

Lorsque vous créez un nouveau projet Flex, Flash Builder génère un fichier MXML portant le même nom que le projet (voir Figure 7). Il s'agit du fichier principal de l'application, dans lequel vous ajoutez le code. Pour créer des applications Flex, vous utilisez deux langages : ActionScript et MXML. En général, vous utilisez des composants MXML et Flex pour créer des interfaces d'application, ainsi que des composants ActionScript et des événements pour programmer la logique applicative. À l'instar des balises HTML et du code JavaScript, les balises MXML et le code ActionScript peuvent se référencer mutuellement.

Figure 7. Explorez le projet FlexWebTestDrive.

Dans FlexWebTestDrive.mxml, la première ligne de code contient la déclaration XML destinée à l'analyseur. La ligne suivante correspond à la balise <s:Application>, qui définit le conteneur Application à utiliser comme balise racine de l'application Flex. Lors de la compilation de l'application, un fichier SWF, une page HTML enveloppe qui référence le fichier SWF, ainsi que d'autres fichiers, sont créés et placés dans le dossier bin-debug du serveur d'applications, afin que vous puissiez accéder à l'application. Lorsque vous accédez au fichier HTML qui référence le fichier SWF de l'application, celui-ci est téléchargé et restitué par Flash Player (disponible sous forme de module externe de navigateur ou de contrôle ActiveX).

Si vous avez créé un projet Flex et PHP avec Flash Builder 4.5 pour PHP, vous disposez également d'un projet PHP (voir Figure 8) pour visualiser et modifier le code PHP.

Figure 8. Explorez le projet PHP TestDrive.

Étape 4 : Utilisez le mode Création pour ajouter des composants et définir des propriétés.

Passez en mode Création et faites glisser les composants Label, DataGrid et Button depuis la vue Composants pour créer l'interface illustrée Figure 9. Utilisez la vue Propriétés pour attribuer les ID de composant de empBtn, deptBtn et empDg et définir d'autres propriétés.

Figure 9. Agencez les composants comme illustré ici.

Les applications HTML sont créées à partir d'éléments de document tels que des titres, des paragraphes et des tableaux. Les applications Flex reposent quant à elles sur des composants Button, CheckBox et DataGrid, entre autres. La structure Flex 4.5 comprend plus de 100 composants, notamment des commandes d'interface utilisateur destinées à l'affichage de contenu et à l'interaction avec l'utilisateur, ainsi que des conteneurs permettant de gérer la présentation.

Passez en mode Source et examinez le code généré. Il contient une nouvelle balise pour chaque composant que vous avez ajouté. L'ordre des balises n'a aucune importance car, par défaut, le conteneur Application utilise le positionnement absolu, de sorte que l'emplacement des composants est déterminé par leurs propriétés x et y.

La balise <s:Label> représente un contrôle Label, un composant d'interface utilisateur extrêmement simple qui affiche du texte. La valeur attribuée à sa propriété text est "XYZ Corporation Directory" ; celles de ses propriétés x et y déterminent l'endroit de l'interface où ce contrôle apparaît. Les attributs color, fontSize et fontWeight modifient le style de la police utilisée. Dans Flex, vous pouvez attribuer aux styles de couleur une chaîne désignant l'une des 16 couleurs du jeu de couleurs VGA (red ou blue, par exemple) ou des valeurs RVB au format hexadécimal (#FF0000 ou #0000FF, par exemple).

        <s:Label x="50" y="50" text="XYZ
Corporation Directory" color="maroon"
fontSize="20" fontWeight="bold"/>
    

Vous pouvez définir des propriétés et des styles pour chaque composant. Les propriétés s'appliquent uniquement à l'instance de composant concernée. Les styles peuvent être définis sur la ligne, comme c'est le cas ici, ou à l'aide de feuilles de style en cascade (CSS, Cascading Style Sheets) pour créer des règles de style applicables aux composants.

Étape 5 : Modifiez les attributs de composant dans le fichier MXML.

Utilisez l'assistant de contenu de Flash Builder pour sélectionner et définir les valeurs des différents styles et propriétés.

Lorsque vous placez le curseur à l'intérieur d'une balise et appuyez sur la barre d'espacement ou sur Ctrl+espace, l'assistant de contenu de Flash Builder propose des indications de code (voir Figure 10). Il affiche la liste de tous les attributs que vous pouvez définir pour cette balise, notamment les propriétés, styles et événements. Différents symboles sont utilisés pour chaque type d'attribut. Cette liste est identique à celle visible en mode Création dans la vue alphabétique de la fenêtre Propriétés.

Figure 10. Utilisez l'assistant de contenu pour consulter la liste de tous les attributs de balise possibles.

Vous pouvez consulter une description plus complète de chaque attribut dans l'API (interface de programmation d’application) du composant. Pour accéder à l'API d'un composant, sélectionnez Aide > Aide dynamique, puis cliquez sur la balise du composant dans le code. La vue Aide comporte un lien sur lequel vous pouvez cliquer pour ouvrir l'API du composant (voir Figure 11).

Figure 11. Examinez l'API d'un composant.

Étape 6 : Parcourez l'application.

Utilisez le bouton ou le menu Exécuter pour compiler l'application et l'afficher sous forme de page HTML dans une fenêtre de navigateur.

L'application apparaît dans le navigateur, dans une page HTML enveloppe générée (voir Figure 12).

Figure 12. Affichez l'application dans un navigateur.

Développeurs PHP utilisant Flash Builder pour PHP : lorsque vous exécutez une application pour la première fois, une boîte de dialogue Exécuter en tant que apparaît. Si vous sélectionnez Application Web, un fichier d'enveloppe HTML s'exécute. Si vous sélectionnez Application Web (PHP), c'est un fichier d'enveloppe PHP qui s'exécute. Le code étant identique pour ces deux fichiers, vous pouvez choisir l'une ou l'autre option. Pour déboguer le code de service PHP lors de l'exécution de l'application (le débogage est abordé dans le didacticiel Déboguer le code côté client), vous devez ouvrir une page PHP enveloppe, donc choisir Application Web (PHP). Vous pouvez à tout moment changer de type de fichier en sélectionnant Exécuter > Exécuter en tant que > Application Web (PHP) ou Application Web, ou en créant des configurations d'exécution.

Dans le didacticiel suivant, vous allez extraire et afficher des données dans le composant DataGrid, avant d'ajouter des "pages" à l'application et de relier les boutons.

Pour en savoir plus

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

Documentation: Utilisation de Flash Builder 4.5

Documentation : Utilisation de Flex 4.5

Guide de référence ActionScript 3

Pôle de développement Flex

Flex en un clin d'œil

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 Flex : Créer une application en une heure

par Adobe

Modifié

Partage

Tags

Créer l'interface utilisateur

Code

Didacticiel

Étape 1 : Installez les fichiers serveur sur un serveur d'applications local.

Configuration pour PHP

Configuration pour ColdFusion

Configuration pour Java

Étape 2 : Créez un nouveau projet Flex.

Paramètres de projet pour PHP avec Flash Builder 4.5 pour PHP

Paramètres de projet pour Java, ColdFusion ou PHP avec Flash Builder 4.5

Étape 3 : Examinez le projet et les fichiers générés.

Étape 4 : Utilisez le mode Création pour ajouter des composants et définir des propriétés.

Étape 5 : Modifiez les attributs de composant dans le fichier MXML.

Étape 6 : Parcourez l'application.

Pour en savoir plus

Documentation: Utilisation de Flash Builder 4.5

Documentation : Utilisation de Flex 4.5

Guide de référence ActionScript 3

Pôle de développement Flex

More Like This

Produits

Solutions

Secteurs d'activité

Aide

Formation

Options d'achat

Téléchargements

Société