Ajouter

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

Posté le 29 septembre 2009 à 10:32 | Tags: Data Services, Flash Builder 4 Beta, Flex, Gumbo, Php

Dans ce tutorial, nous allons voir comment utiliser une classe PHP qui manage une table MySQL dans un projet Flex de Flash Builder 4. Nous allons créer un projet Flex et utiliser Flash Builder 4 pour le relier au Framework Zend (car nous voulons avoir une possibilité d'utiliser le mode remote pour la communication avec le serveur PHP). Après cela, nous verrons comment utiliser la nouvelle interface de Flash Builder 4 pour introspecter une classe PHP et créer du code ActionScript 3 qui utilisera directement cette classe.

A la fin de ce tutorial (seconde partie), nous serons en mesure d'avoir une application Flex simple ou l'on pourra récupérer et afficher des enregistrements de données, les éditer et en ajouter de nouveaux. Pour certaines parties vous sera donné du code, et pour les autres Flash Builder s'occupera de les générer. En tout et pour tout, ces opérations vont nous prendre un peu moins de 30 minutes.

Points clés du tutorial :

1. Le code PHP
2. Créer le projet Flex et l'UI (User Interface) de l'application
3. Utilisation du panel de Data Services de Flash Builder 4

Points clés de la 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. Le Code PHP

Nous avons deux classes PHP que nous voulons utiliser dans notre application Flex. L'une de ces classes est un data object qui agis comme un wrapper (conteneur) pour l'une des lignes venant de la base de données MySQL. Voici la structure de la table que vous devez créer : 

1. Nom de la table : authors

2. Champs : 

• id_aut : primary key
• fname_aut de type string
• lname_aut de type string

Voici maintenant le contenu de notre data object PHP, nommé VOAuthor, qui ressemble à ceci :

 PHP | 
 Copier le code
 
class VOAuthor { 
    public $id_aut;
    public $fname_aut;
    public $lname_aut;
}

La seconde classe, appelée Authors, est la classe qui gère notre table MySQL, offrant des opérations CRUD.

Nota Bene : CRUD est un acronyme définissant les opérations essentielles effectuées sur une base de données : Create, Read, Update, and Delete

Le code ci-dessous est relativement important car nous n'utiliserons pas de de couche d'abstraction de base de données pour ce tutorial (interface de programmation d'application qui unifie la communication entre l'application cliente et la base de données). 

Nous avons trois méthodes dans notre fichier Authors.php, à savoir 

• getData() : fonction nous permettant de récupérer et lire des données
• saveData() : fonction pour la sauvegarde ou mise à jour des données
• deleteData() : fonction pour la suppression de données dans la base MySQL

Le code du fichier est le suivant :

 PHP | 
 Copier le code
 
<?php
require_once 'VOAuthor.php';
 
//connection info
define("DATABASE_SERVER", "localhost:8888");
define("DATABASE_USERNAME", "root");
define("DATABASE_PASSWORD", "root");
define("DATABASE_NAME", "test");
 
//$o = new MyService();
//print_r($o->getData());
 
class Authors {
 
 /**
  * Récupère tous les enregistrements de la table et retourne un array de la classe VOAuthor
  * @return an array of VOAuthor
  */
 public function getData() {
 //connexion à la base de données.
 //nous pouvons aussi avoir utilisé une couche d'abstraction pour la connexion à la base de données.
 //pour le tutorial, nous n'utiliserons pas cette méthode et allons procéder de manière simple.
 $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
 mysql_select_db(DATABASE_NAME);
 //récupère toutes les lignes de la table
 $query = "SELECT id_aut, fname_aut, lname_aut FROM authors_aut ORDER BY fname_aut";
 $result = mysql_query($query);
 //throw (new Zend_Amf_Exception('error', 11));
 $ret = array();
 while ($row = mysql_fetch_object($result, "VOAuthor")) {
 $ret[] = $row;
 }
 mysql_free_result($result); 
 return $ret;
 }
 /**
  * Mise à jour d'un item dans la base de données
  * @param VOAuthor to be updated 
  * @return NULL
  */
 public function saveData($author) {
 if ($author == NULL)
 return NULL;
 //logMe($author);
 //connexion à la base de données
 $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
 mysql_select_db(DATABASE_NAME);
 if ($author->id_aut > 0) {
 //enregistrement des changements
 $query = "UPDATE authors_aut SET fname_aut='".$author->fname_aut."', lname_aut='".$author->lname_aut."' WHERE id_aut=".  $author->id_aut;
 } else {
 //si inexistant, nouvel enregistrement dans la base de données
 $query = "INSERT INTO authors_aut (fname_aut, lname_aut) VALUES ('".$author->fname_aut."', '".$author->lname_aut."')";
 }
 $result = mysql_query($query);
 return NULL;
 }
 
 public function deleteData($author) {
 if ($author == NULL)
 return NULL;
 
 //connexion à la base de données
 $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME, DATABASE_PASSWORD);
 mysql_select_db(DATABASE_NAME);
 //ajout du nouvel enregistrement
 $query = "DELETE FROM authors_aut WHERE id_aut = ".$author->id_aut;
 $result = mysql_query($query);
 return NULL;
 }
 
}	
?>

Attention : Ces deux fichiers doivent impérativement se trouver dans un dossier appelé « remoting » à la racine de votre serveur web et non à la racine de votre projet Flash Builder ou racine de votre site internet au sein de votre serveur web.

2. Créer le projet Flex et l'UI (User Interface) de l'application

Nous avons mis en place les fichiers PHP, il est maintenant temps de créer notre application Flex. 

En premier lieu, nous avons besoin de créer un nouveau projet Flex. Utilisons donc l'assistant de création de projets Flex de Flash Builder 4 pour le créer le projet nommé FlexPHPAMF. Soyez sur d'avoir bien choisi et configuré la technologie PHP comme type de serveur et avez correctement renseigné les informations concernant la racine de vos document et de votre serveur web (chemin absolu et URL d'accès)

Maintenant, créons la petite interface utilisateur de notre application. Pour ce faire, le plus simple sera de passer en « Mode Design« .

Nous allons donc ajouter deux boutons (Spark Button) et un composant datagrid (Halo DataGrid) sur notre Stage. Nous appellerons notre premier bouton : « Get Data » et le second : « Save Data ».

Votre application devrait maintenant ressembler à ceci (Sur l'aperçu suivant, ne prenez pas en compte les paramètres  des colonnes du DataGrid (DataGrid Columns), ils seront générés automatiquement plus tard dans notre application via l'assistant Flash Builder Data Service) :

L'interface utilisateur étant créée, nous allons maintenant passer à l'apprentissage de l'utilisation du panel Data Service

3. Utilisation du panel de Data Services de Flash Builder 4

Nous sommes maintenant prêt pour commencer à utiliser l'assistant d'ajout de nouvelles données (data wizards). Dans le bas de l'application Flash Builder en mode design, vous avez une vue nommée « Data/Services« , cliquez sur le lien « Connect to Data/Service« , vous vous retrouverez alors sur le panneau suivant :

Nous allons sélectionner le second choix car nous voulons utiliser une Classe PHP, cliquez donc sur le choix PHP et ensuite sur « Next ».

Sur cette seconde fenêtre, nous avons la possibilité de récupérer une classe pré-existante sur notre serveur, ou de laisser l'assistant en créer une pour nous. Dans le cadre de notre tutorial, nous avons déjà créé le service PHP et allons donc choisir l'option « import PHP class«  afin de l'utiliser. Flash va donc introspecter le service pour détecter les opérations supportées (dans ce cas, vu que nous utilisons la méthode remoting, il va détecter les méthodes publiques et retourner les types). Il faudra par contre installer le FrameWork Zend sur votre serveur afin d'effectuer cette opération.

Le gros point positif est que vous n'avez pas à vous soucier des différentes étapes d'installation du FrameWork Zend, Adobe Flash Builder le fera pour vous d'une manière totalement automatique, cf screen ci-dessous : 

Après que celui-ci ai été installé, nous verrons sur la dernière page de notre assistant les différentes méthodes disponibles, comme ci-dessous :

Vous pouvez constater le fait que nous retrouvons alors nos trois classes issues de notre fichier Authors.php. Cliquez alors sur le bouton « Finish » pour compléter l'opération.

Vous pouvez maintenant apercevoir que nous avons un nouveau tree (liste) qui s'affiche dans le panel Data/Services avec pour nom de racine : Authors, qui correspond au nom de notre fichier PHP et donc au nom de la classe PHP que nous souhaitons utiliser dans Flex. De plus, on peut voir que ce noeuds contient nos trois méthodes : deleteData(), getData() et saveData() comme ci-dessous :

En même temps, si nous regardons la structure des dossiers de notre projet dans l'explorateur de Package, nous nous apercevrons que nous avons des nouveaux Packages et fichiers créés à l'intérieur de ceux-ci, comme sur la capture suivante :

Il y a un nouveau package appelé services.authors. Dans celui ci vous trouverez la classe de services qui va être utilisée pour la connection au fichier de classes PHP (Authors.as). Cette classe est une extension (extend) de la classe de base qui possède la logique d'utilisation du RemoteObject.

Raison de cette approche :  Quand vous souhaitez faire une customisation de code, vous pourrez la faire dans votre fichier de classes Authors. Et si vous décidez d'utiliser Flash Builder pour regénérer le code du service, cette opération n'écrasera pas votre code customisé.

C'est la même chose pour notre définition de notre objet (Data Object ou Value Object). Adobe Flash Builder a généré le code ActionScript 3 de notre objet (object) pour coller au mieux à la classe PHP VOAuthor. Mais encore une fois, vous avez la possibilité de faire des customisations, vous pourrez le faire en modifiant VOAuthor qui est étendu (extended) au final dans le fichier _Super_VOAuthor. Tous les codes générés resterons donc dans _Super_VOAuthor.

Au final, vous trouverez un autre dossier appelé services qui apporte un accès rapide aux classes du fichier Authors.php.

Il est maintenant temps de remplir notre datagrid (Halo DataGrid) avec les données récupérées depuis le Serveur.

Pour ce faire, vous devez être sur d'avoir spécifié le type de retour pour l'opération getData() comme étant un array d'objets VOAuthor. Si vous faites un clique droit sur le nom de l'opération dans le panel Data/Services, vous aurez la possibilité de cliquer sur l'option : « Configure Return Type« , qui vous permettra de paramètrer votre type de retour :

Pour lier (bind) le datagrid (Halo DataGrid) au résultat de l'opération getData(), vous devez passer en mode design, et effectuer tout simplement un Drag & Drop de getData() (depuis le panel Data/Services) sur la datagrid.

Si vous switchez ensuite en vue Mode Code, vous verrez qu'une partie ActionScript a été ajouté au fichier MXML flexPHPAMP.mxml. Ce que nous voulons maintenant faire est de créer une nouvelle fonction appelée getData() qui va nous permettre de récupérer les informations quand on clique sur le bouton « Get Data » et de les ajouter au Spark DataGrid, le code ressemblera à celui ci-dessous :

 MXML | 
 Copier le code
 
protected function getData():void
{
    getDataResult.token = authors.getData();
}
 
[...]
 
 
<s:Button x="43" y="220" label="Get Data" click="getData()"/>

L'assistant a par ailleurs directement configuré le DataGrid lui même, vous avez donc les noms des champs de la table et la source d'informations de ce DataGrid est définir dans le « lastResult« ' de l'objet getDataResult (cet object a été ajouté automatiquement par l'assistant).

Si nous lançons maintenant notre application et cliquons sur le bouton « Get Data« , nous pourrons voir les données s'afficher dans le tableau.

Nous avons donc vu comment récupérer des informations provenant d'une base de données et les afficher dans une DataGrid en cliquant sur un bouton pour lancer l'action de récupération des informations.

Dans la seconde partie de ce tutorial, nous allons voir comment ajouter un formulaire / éditer des données dans le composant DataGrid / sauvegarder des données.  

Cliquez-ici pour accéder à la seconde partie du tutorial.

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 2
6. Tutorial : Utilisation des States et ItemRenderer dans un Composant List de Flash builder 4 / Flex Gumbo