Connexion automatique entre Flex 3 et MySQL via PHP

Julien Lestel

Cet article montre comment accéder à vos données MySql avec Adobe Flex 3 en quelques clics. Nous verrons ensuite la modification des interfaces Flex générées pour développer rapidement vos applications Flex 3. ♪

- Titre : Connexion automatique entre Flex 3 et MySQL via PHP

- Auteur : Julien Lestel

- Parution : 23 août 2007

- Licence : Copyright ® 2007 Julien Lestel - Ingénieur en Nouvelles Technologies. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Création du projet

- II. Configuration

- III. Présentation des données

- IV. Ajout d'un enregistrement à la table MySQL

- V. Quels sont les fichiers générés par Flex 3 la connexion Flex / PHP / MySQL ?

- VI. Autres solutions pour la connexion de Flex à MySQL

- VII. Conclusion

- VIII. Remerciements

I - Création du projet

Cette solution est uniquement disponible dans la version 3 du FlexBuilder.

1 - Tout d'abord, créez un nouveau projet Flex…

Nouveau projet

2 - … de type PHP. Paramétrez les accès WebRoot vers la racine de votre serveur Web et l'Url Root de ce serveur.

Premier écran

3 - Cliquez sur Finish et vous voilà avec votre nouveau projet Flex / PHP !

II - Configuration

Flex Builder 3 permet de créer automatiquement les accesseurs Flex et PHP pour agir sur une base de données MySQL en Flex. Le principe utilisé est la génération automatique des fichiers Flex et PHP. PHP va permettre d'effectuer toutes les actions sur la base de données MySQL. De son côté, Flex communique avec PHP pour déclencher des requêtes SQL. Cette communication est basée sur le langage XML et les requêtes HTTP asynchrones.

L'interface Flex d'accès à la base de données est générée sous la forme de DataGrid. Le comportement complet du DataGrid Flex (insert, update, delete, find) est lui aussi généré, tout comme les fichiers PHP… Je vais maintenant détailler les 5 étapes nécessaires à la connexion et la création automatique d'accesseurs Flex / MySQL.

1 - Cliquez dans la barre de menu sur « Data » -> « Create Database accessor »

2 - Faire une nouvelle connexion « Simple MySQL Wizard » (génère toutes les requêtes pour l'accès à la base)

3 - Créer une nouvelle connexion à la base de données et paramétrez les informations de votre base. Vous pouvez tester la connexion en cliquant sur « Test »

4 - Vous pouvez maintenant choisir la table de votre base pour laquelle les accesseurs Flex/PHP vont être créés. Vous devez aussi renseigner la clé primaire pour cette table.

5 - Vous choisissez les champs à afficher dans votre Flex et la colonne de filtre.

C'est terminé, tous les fichiers ont été générés et vous pouvez maintenant exécuter votre composant créé et agir directement sur vos tables MySql depuis Flex.

III - Présentation des données

Par défaut, toutes les cellules du DataGrid sont éditables. Les éditions sont enregistrées en base.

Pour que les cellules ne soient plus éditables, il faut ajouter la propriété editable=« false » sur la colonne (<mx:DataGridColumn>) souhaitée.

IV - Ajout d'un enregistrement à la table MySQL

Il est bien sûr possible de modifier les champs pour, par exemple la saisie en texte du champ Civilité par une ComboBox avec des valeurs prédéfinies.

Pour cela, trouvez le FormItem à modifier dans le fichier MXML. Vous pouvez alors remplacer TextInput par une ComboBox…

Exemple de ComboBox :

<mx:ComboBox selectedIndex="0" id="sexe" >
<mx:dataProvider>
<mx:Array>
<mx:Object label="Monsieur" data="M."/>
<mx:Object label="Madame" data="Mme."/>
<mx:Object label="Mademoiselle" data="Mlle."/>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>

Voici le résultat :

De même, il est possible de réutiliser les tooltips Flex (utiliser les ToolTips sous Flex 2) pour simplifier la saisie :

V - Quels sont les fichiers générés par Flex 3 la connexion Flex / PHP / MySQL ?

Plusieurs fichiers PHP et MXML ont été générés. Je vous conseille de ranger les fichiers PHP dans un dossier PHP pour plus de lisibilité.

Le fichier nomTable.mxml contient le dataGrid et tous ses contrôles.
Le fichier nomTableScript.as fournit les accès à la base de données.
Le fichier nomTableConfig.as permet de configurer l'emplacement du fichier PHP à interroger lors des requêtes.
Le fichier nomTable.php contient une classe nommée nomTable et ses méthodes permettant des interactions avec la base de données.
Le fichier MonSqlLocalconn.php contient les informations pour la connexion à la base de données.

VI - Autres solutions pour la connexion de Flex à MySQL

Il existe d'autres solutions pour connecter vos applications Flex à MySQL.

Voici les trois principales autres solutions existantes pour la connexion Flex/MySQL :

- AMPHP : c'est un kit pour PHP permettant la communication entre PHP et Flash/Flex avec des appels XML. Il est donc nécessaire de connaître le langage PHP.
Cette solution a été créée pour Flex 2 et possède le même fonctionnement (communication avec PHP grâce à XML) que la connexion automatique avec Flex 3.
http://www.amfphp.org/ ;

- ASSQL : cette solution permet d'accéder directement à la base MySQL dans Flex grâce à un Driver Actionscript3/Mysql à installer dans Eclipse.
Cette solution peut être intéressante pour créer des applications « full Flex » puisqu'aucun lien avec PHP n'est à effectuer.
http://maclema.com/assql/ ;

- ASQL : Même principe que ASSQL.
http://asql.mooska.pl/.

VII - Conclusion

En conclusion, il est donc possible de générer tous les accesseurs pour utiliser nos bases MySql directement dans Flex 3. Cette solution permet d'améliorer sensiblement le temps de développement.

De plus, le code généré est clairement fonctionnel et commenté. Les modifications s'avèrent donc relativement faciles.

VIII - Remerciements

Merci à Grégory Dumas pour son aide et toutes ses relectures !