FORMATION

DEVELOPPER AVEC FLASH BUILDER 4

AMFPHP ET MySQL

AMADOU DIAW
CONCEPTEUR/ DEVELOPPEUR
DE
SYSTEMES D’INFORMATIONS

Email : jodyama@hotmail.com
 INTRODUCTION
Flex est un Framework qui sert à la création d’interfaces client riches (front end de
l’application) basé sur l’usage de la technologie Adobe Flash. En effet, si celle-ci apporte une
grande souplesse pour la création d’interfaces graphiques riches, elle est souvent perçue par
les non-initiés comme complexe.
De plus, pour bon nombre de techniciens spécialisés dans le développement d’application, la
conception et la réalisation de l’interface graphique de l’application semblent souvent
secondaires : ils préfèrent se focaliser complètement sur la fonctionnalité à développer plutôt
que sur la présentation du résultat. Le Framework Flex a ainsi pour objectif de faciliter cette
partie du développement.
Fonctionnement
Une application Flex n’est autre qu’un fichier portant l’extension .swf (ShockWave Flash)
issu de la compilation de fichiers MXML et ActionScript, insérés dans une page web.
Une application peut être divisée en plusieurs couches ou tiers applicatifs, nous parlons alors
d’une architecture n-tiers. Ainsi, si nous subdivisons une application en trois couches
distinctes, nous obtenons une architecture 3-tiers :
 La couche Présentation est chargée, comme son nom l’indique, de présenter les
données (interface Homme-Machine ou IHM).
 La couche Métier implémente la logique métier (règle de gestion, etc.).
 La couche d’accès aux données réalise la tâche de persistance des données (stockage)
via l’utilisation d’une base de données, par exemple.
Chaque couche propose des services qu’elle met à disposition de la couche qui lui est
directement supérieure. Ainsi, la couche la plus élevée ne peut communiquer avec la couche
la plus basse de l’architecture que par la couche intermédiaire, comme l’illustre la figure
suivante :
 I. Le langage MXML
MXML est un langage basé sur XML permettant de décrire les interfaces graphiques, de
définir les états dans l’interface, de modéliser des effets de transition et d'insérer du code
comportemental.
Une page MXML ressemble à ceci :

 La ligne (1) correspond à du vrai XML et constitue la première ligne d'un document
MXML.
 La ligne (2) montre que le conteneur principal de l'application déclare l'espace de
nommage (namespace), qui permet d'utiliser les composants natifs de Flex
 La ligne (5) est l'espace dédié à l'ajout d'éléments graphiques grâce à des balises.
 La ligne (6) permet de fermer la balise du conteneur principal de l'application.
Une balise MXML représente un composant graphique qui peut être un conteneur (de type
boite, panneau, fenêtre,…) ou un élément de contrôle (de type champ de texte, liste, bouton,
…) et comportes trois types d’attributs :
 Propriétés (id, width, height, label)
 Style
 Evénements (click, enter…)
Quelques exemples
II. Le langage ActionScript
ActionScript ( AS ) est un langage de script orienté objet permettant aussi bien de créer des
composants dynamiquement et de les ajouter à l'application que de traiter des chaînes de
caractères, d'ajouter des écouteurs d'événements ( EventListener ) ou de gérer les
échanges client/serveur notamment par le chargement de fichiers ou la communication avec
un langage serveur. Etant basé sur ECMAScript, version standardisée de JavaScript,
ActionScript et JavaScript partagent une syntaxe semblable.
Afin que vous puissiez lire facilement les extraits de code ActionScript présents dans ce
tutoriel, nous avons jugé bon de vous apporter les bases de ce langage en abordant des
notions communes à tout apprentissage d’un nouveau langage :
 les variables ;
 les boucles et les conditions ;
 les procédures et les fonctions ;
1) Les variables
Les variables permettent de stocker des informations en vue de les utiliser dans divers
traitements.
Une variable est déclarée par un nom précédé de la mention var. Il est également
indispensable de spécifier le type de la variable déclarée :
 var nomVariable:type
Exemple

 Tableau de variables
 2) Les boucles et les conditions
Les boucles permettent de réaliser un traitement sur un nombre d’itérations prédéfinis.
Exemple

Les conditions

3) Les procédures et les fonctions

Les procédures et les fonctions sont déclarées par un nom, précédé de la mention function.
Elles ont pour rôle d’exécuter un traitement susceptible d’être appelé plusieurs fois dans un
script. Une fonction retourne un résultat dont le type est spécifié en fin de déclaration.
Au contraire, une procédure ne retourne rien, nous spécifierons donc void à la place d’un
type de retour.
  Portée des procédures et des fonctions
La portée des procédures et des fonctions doit obligatoirement être mentionnée :
• private (privée) : la procédure ou la fonction ne peut être appelée que par la classe qui la
contient.
• protected (protégée) : la procédure ou la fonction ne peut être appelée que par la classe qui
la contient ou par la classe héritant de cette classe.
• public (publique) : la procédure ou la fonction peut être appelée par l’ensemble des
procédures et fonctions du projet.
• static (statique) : la procédure ou la fonction n’est créée qu’une seule fois par classe et non
pas dans chaque objet instancié par la classe. On peut donc l’appeler sans instancier l’objet
dans lequel elle est déclarée.
Notons que ces portées peuvent également être appliquées aux variables.
 Exemple de procédure

 Exemple de fonction

Nous avons donc abordé les notions essentielles pour pouvoir débuter un projet Flex.
Le langage ActionScript étant souple ainsi que le langage MXML du point de vu
présentation, nous vous proposons de mettre en place une application Flex de type CRUD
pour compléter votre formation.
Partie 1 : Simple Application Flex
Cliquer sur FichierNouveauProjet Flex

Saisissez le nom du Projet « ApplicationFlexBD »

On distingue donc deux types d’application :
 Application web : exécuté à partir d’un navigateur
 Application de bureau
Dans ce TP, nous choisirons l’application bureau.
Il faut aussi choir la version SDK Flex (Software Developpement Kit), il permet de créer
des applications Flex gratuitement à l’aide des compilateurs et du débogueur qu’il intègre.
Vous pouvez aussi associer votre application Flex à un serveur d’application tel que : serveur
PHP, serveur J2EE, etc…
Choisissez donc un serveur PHP, et cliquez sur « suivant »
Dans la partie suivante, il faut indiquer le dossier du projet dans lequel la source sera stockée
ainsi que l'emplacement du serveur sur lequel Flash Builder doit générer l'application
compilée.
Il faut tout d’abord rappeler que pour réaliser ce TP, il faut d’abord installer WampServer ou
EasyPHP.
Le chemin du répertoire www dans le quel sera généré le projet doit être indiqué et l’url
(http://localhost).
Après cliquez sur « suivant »
Une application Flex est donc un ensemble de modules ou pages, il existe donc un fichier
général de l’application ou fichier de l’application principale ou le parentApplication.
Ici c’est le Main.mxml, vous pouvez changer son non, en général il porte le même nom que
le projet.
On peut avoir plusieurs modules dans notre application, donc à chaque fois qu’un événement
sera déclenché tel qu’un lancement de l’application, ou un clic sur un bouton, un module
peut être chargé suivant la demande de l’utilisateur.
C’est donc le parentApplication qui fait ce travail.
A présent cliquer sur terminer.
Avec l’environnement Flash Builder, vous avez la possibilité de travailler en deux modes :
 Mode source : Vous écrivez votre propre code pour la partie présentation
 Mode création : Vous glissez les composants dans votre page, et le code est
automatiquement généré.
Le fichier est donc ouvert en mode création.
N’oubliez pas le role de ce fichier.
Créer à présent votre premier module
Bouton Droit sur le Projet NouveauModule MXML

Nom du module : etudiant

Largeur : 1000, Hauteur : 700.
Allez en mode création
A gauche de la page vous avez la liste des composants
Il suffit d’un simple cliquè-glisset sur la page et le composant est créé.
Nous allons donc réaliser l’interface suivante
Voici donc le code de notre module etudiant.MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute"
width="1000" height="700">
<fx:Declarations>
<!-- Placer ici les éléments non visuels (services et objets de
valeur, par exemple). -->
</fx:Declarations>
<mx:Form x="52" y="27" width="270" height="198">
<mx:FormItem label="Nom">
<s:TextInput id="nomTextInput"/>
</mx:FormItem>
<mx:FormItem label="Prénom">
<s:TextInput id="prenomTextInput"/>
</mx:FormItem>
<mx:FormItem label="Adresse">
<s:TextInput id="adresseTextInput"/>
</mx:FormItem>
<mx:FormItem label="Nationalité">
<s:TextInput id="nationaliteTextInput"/>
</mx:FormItem>
<mx:FormItem label="Classe">
<s:ComboBox id="classeComboBox"/>
</mx:FormItem>
<s:Button label="Valider" id="validerButton"/>
</mx:Form>
<mx:DataGrid x="52" y="229" width="545" height="182"
id="etudiantGrid">
<mx:columns>
<mx:DataGridColumn headerText="Nom" dataField="nom"/>
<mx:DataGridColumn headerText="Prenom"
dataField="prenom"/>
 <mx:DataGridColumn headerText="Adresse"
dataField="adresse"/>
<mx:DataGridColumn dataField="nationalite"
headerText="Nationalite"/>
<mx:DataGridColumn dataField="classe"
headerText="Classe"/>
</mx:columns>
</mx:DataGrid>
<s:Button x="54" y="413" label="Nouveau" id="nouveauButton"/>
<s:Button x="129" y="413" label="Modifier" id="modifierButton"/>
<s:Button x="203" y="413" label="Supprimer" id="supprimerButton"/>
</mx:Module>

On a donc :
 un formulaire, dans lequel on trouve quatres textInput , un ComboBox, un bouton
valider.
 Un Datagrid : Après avoir cliqué et glissé le Datagrid dans la page, vous pouvez
configure les colonnes du Datagrid en cliquant le bouton droit sur le Datagrid,
configurer les colonnes.
  Trois boutons : Nouveau, Modifier et Supprimer
Chaque élément doit avoir un identifiant, c’est grace à cet identifiant que vous pouvez
manipuler ce composant, comme récupérer son contenu, ou bien le mettre à jour.
Exemple d’identifiants : nomTextInput, nouveauButton, etudiantGrid.
Maintenant que le module etudiant est terminé, comment demander au parentApplication de
le charger.
Revenez au fichier « Main.MXML »
Et aller en mode création.
Modifier sa largeur à 1024 et la hauteur à 700.
Glissez un composant moduleLoader dans la page et étirez le pour qu’il prenne toute la page.
Le moduleLoader comme on l’entend est le chargeur de module, il faut donc lui préciser l’url
du module à charger.
Chaque module créé génére un fichier swf et c’est donc ce fichier qui sera chargé
On lui donne un identifiant « moduleLoader »
Et l’url du module à charger « etudiant.swf »
Sauvegarder la page, vous remarquez automatiquement, que le module est chargé dans la
page.
Il ne reste plus qu’à lancer l’application
Le code du Main.MXML devient :
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="1024" height="700">
<fx:Declarations>
<!-- Placer ici les éléments non visuels (services et objets de
valeur, par exemple). -->
</fx:Declarations>
<mx:ModuleLoader x="0" y="0" width="1015" height="690"
id="moduleLoader" url="etudiant.swf">
</mx:ModuleLoader>
</s:WindowedApplication>
Un clic sur la flèche verte exécute l’application.
Et voilà ce que ça donne.

Vous avez jusque-là réalisé la partie présentation de votre application.

Maintenant, il faut gérer les événements.
Un premier événement à gérer
Qu’est-ce qui se doit se passer si on démarre l’application ?
La valeur par défaut du moduleLoader était le fichier « etudiant.swf », nous allons modifier
cette action et associer ce chargement à l’événement « démarrage de l’application ».
Une solution consiste à écrire une fonction qu’on appellera init() , dans cette fonction nous
chargerons le module, d’où l’importance des identifiants, car pour manipuler un composant
on peut utiliser son identifiant « ID »
Ouvrez le fichier Main.MXML en mode « source »
Et ouvrez une balise <fx :Script> juste avant la blaise <fx :Declaration>
Voici donc le code du fichier Main.MXML
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="1024" height="700" applicationComplete="init()">
<fx:Script>
<![CDATA[
public function init():void
{
moduleLoader.loadModule("etudiant.swf");
}

]]>
</fx:Script>
<fx:Declarations>
<!-- Placer ici les éléments non visuels (services et objets de
valeur, par exemple). -->
</fx:Declarations>
<mx:ModuleLoader x="0" y="0" width="1015" height="690"
id="moduleLoader">
</mx:ModuleLoader>
</s:WindowedApplication>

On a écrit une fonction init() :void, et on demande à cette fonction de charger le module
etudiant.swf
moduleLoader.loadModule("etudiant.swf");
Mais là nous avons seulement écrit le corps de la fonction.
On doit donc demander à l’application d’exécuter cette fonction au démarrage.
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="1024" height="700" applicationComplete="init()">

 applicationComplete=”fonctionAExecuter()”
NB: Très important
 Si une application doit exécuter une fonction au démarrage
applicationComplete=”fonctionAExecuter()”
 Si un module doit exécuter une fonction au démarrage
creationComplete=”fonctionAExecuter()”

Et vous relancer l’application, le travail est bien fait.

Revenons à présent à notre fichier etudiant.MXML en mode source.
Un événement à gérer par exemple
Au clic sur le bouton Valider, il faut récupérer toutes les informations et l’afficher dans un
Alert.
Même chose ouvrez une balise <fx :Script>
Le code du fichier etudiant.MXML devient
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute"
width="1000" height="700">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
public function OnValiderButtonClick():void
{
// Déclaration de quatres variables de Type String
var v_nom:String;
var v_prenom:String;
var v_adresse:String;
var v_nationalite:String;
// la varibale v_nom recupere le texte saisie dans nomTextInput
v_nom=nomTextInput.text;
// la varibale v_prenom recupere le texte saisie dans prenomTextInput
v_prenom=prenomTextInput.text;
// la varibale v_adresse recupere le texte saisie dans adresseTextInput
v_adresse=adresseTextInput.text;// la varibale
v_nationalite recupere le texte saisie dans nationaliteTextInput
v_nationalite=nationaliteTextInput.text;

//Affichage du message dans un Alert

Alert.show("Nom: "+v_nom+" Prénom: "+v_prenom+"
Adresse: "+v_adresse+" Nationalité: "+v_nationalite);

}
]]>
</fx:Script>
<fx:Declarations>
<!-- Placer ici les éléments non visuels (services et objets de
valeur, par exemple). -->
</fx:Declarations>
<mx:Form x="52" y="27" width="270" height="198">
<mx:FormItem label="Nom">
<s:TextInput id="nomTextInput"/>
</mx:FormItem>
<mx:FormItem label="Prénom">
<s:TextInput id="prenomTextInput"/>
</mx:FormItem>
<mx:FormItem label="Adresse">
<s:TextInput id="adresseTextInput"/>
</mx:FormItem>
<mx:FormItem label="Nationalité">
<s:TextInput id="nationaliteTextInput"/>
</mx:FormItem>
<mx:FormItem label="Classe">
<s:ComboBox id="classeComboBox"/>
</mx:FormItem>
<s:Button label="Valider" id="validerButton"
click="OnValiderButtonClick()"/>
</mx:Form>
 <mx:DataGrid x="52" y="229" width="545" height="182"
id="etudiantGrid">
<mx:columns>
<mx:DataGridColumn headerText="Nom" dataField="nom"/>
<mx:DataGridColumn headerText="Prenom"
dataField="prenom"/>
<mx:DataGridColumn headerText="Adresse"
dataField="adresse"/>
<mx:DataGridColumn dataField="nationalite"
headerText="Nationalite"/>
<mx:DataGridColumn dataField="classe"
headerText="Classe"/>
</mx:columns>
</mx:DataGrid>
<s:Button x="54" y="413" label="Nouveau" id="nouveauButton"/>
<s:Button x="129" y="413" label="Modifier" id="modifierButton"/>
<s:Button x="203" y="413" label="Supprimer" id="supprimerButton"/>
</mx:Module>

Examinons de près ce bout de code :

On écrit donc une fonction public function OnValiderButtonClick():void
Qui doit s’exécuter après avoir cliqué sur le bouton « Valider »
On récupère donc les champs saisies qu’on stocke dans des variables et qu’on affiche dans un
Alert.

<s:Button label="Valider" id="validerButton"

click="OnValiderButtonClick()"/>

Et là on a associé l’exécution de cette fonction au clic sur le bouton Valider.

Voilà le résultat
Encore un événement à gérer, vous remarquez que notre comboBox « classeComboBox »
n’est pas encore alimenté.
Une collection d’objets, présentant les attributs label et data, a été créée. Cette collection est
source d’alimentation pour le dataProvider de la ComboBox car elle a été créée.
[Bindable] public var classesList:ArrayCollection=new ArrayCollection();

Pourquoi [Bindable] ?
Il faut rappeler que Flex est basé sur la programmation évènementielle; grâce au binding,
une variable peut être lié automatiquement entre des sources et des cibles, c'est-à-dire qu’à
chaque changement de valeur d'une variable, celle-ci est mise à jour automatiquement dans le
composant qu'il l'utilise.
Dans notre cas, puisque notre collection est source d’alimentation de notre ComboBox, il faut
le binder pour qu’à chaque modification de la collection, le changement se répercute
directement sur le comboBox.
Il faut donc préciser à la collection que ses données doivent provenir de cette collection
<s:ComboBox id="classeComboBox" dataProvider="{classesList}"/>
Chaque ComboBox possède un attribut « label »

Nous allons faire la meme chose pour notre datagrid « etudiantGrid »

[Bindable] public var etudiantsList:ArrayCollection=new ArrayCollection();

<mx:DataGrid x="52" y="229" width="545" height="182"

id="etudiantGrid" dataProvider="{etudiantsList}">
<mx:columns>
<mx:DataGridColumn headerText="Nom" dataField="nom"/>
<mx:DataGridColumn headerText="Prenom"
dataField="prenom"/>
<mx:DataGridColumn headerText="Adresse"
dataField="adresse"/>
<mx:DataGridColumn dataField="nationalite"
headerText="Nationalite"/>
<mx:DataGridColumn dataField="classe"
headerText="Classe"/>
</mx:columns>
</mx:DataGrid>

Les champs d’un composant sont alimentés grâce au dataField

C’est-à-dire si etudiantsList permet de remplir le grid etudiantGrid, elle doit avoir des
attributs de même nom que les dataField du datagrid
A présent on écrit une fonction init() qui sera appelé au démarrage de ce module, dans cette
fonction ,on ajoutera des lignes aux deux collection
public function init():void
{
classesList.addItem({id:1,label:"TEK1"});
classesList.addItem({id:2,label:"TEK2"});
classesList.addItem({id:1,label:"TEK3"});

etudiantsList.addItem({id:1,nom:"DIAW",
prenom:"Amadou",
adresse:"Dakar",
nationalite:"MAURITANIENNE",
classe:"TEK2"});

etudiantsList.addItem({id:2,nom:"DIAW",
prenom:"Abdoulaye",
adresse:"Saint-Louis",
nationalite:"SENEGALAISE",
classe:"TEK1"});

etudiantsList.addItem({id:1,nom:"DIAW",
prenom:"Amadou",
adresse:"Dakar",
nationalite:"MAURITANIENNE",
classe:"TEK2"});
}
La fonction addItem ajoute une ligne à la collection

Voici donc le code complet de notre fichier etudiant.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute"
width="1000" height="700" creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable] public var classesList:ArrayCollection=new
ArrayCollection();
[Bindable] public var etudiantsList:ArrayCollection=new
ArrayCollection();
public function init():void
{
classesList.addItem({id:1,label:"TEK1"});
classesList.addItem({id:2,label:"TEK2"});
classesList.addItem({id:1,label:"TEK3"});

etudiantsList.addItem({id:1,nom:"DIAW",
prenom:"Amadou",
adresse:"Dakar",

nationalite:"MAURITANIENNE",
classe:"TEK2"});
etudiantsList.addItem({id:2,nom:"DIAW",
prenom:"Abdoulaye",
adresse:"Saint-
Louis",

nationalite:"SENEGALAISE",
classe:"TEK1"});
 etudiantsList.addItem({id:1,nom:"DIAW",
prenom:"Amadou",
adresse:"Dakar",

nationalite:"MAURITANIENNE",
classe:"TEK2"});
}
public function OnValiderButtonClick():void
{
// Déclaration de quatres variables de Type String
var v_nom:String;
var v_prenom:String;
var v_adresse:String;
var v_nationalite:String;
// la varibale v_nom recupere le texte saisie dans
nomTextInput
v_nom=nomTextInput.text;
// la varibale v_prenom recupere le texte saisie
dans prenomTextInput
v_prenom=prenomTextInput.text;
// la varibale v_adresse recupere le texte saisie
dans adresseTextInput
v_adresse=adresseTextInput.text;
// la varibale v_nationalite recupere le texte
saisie dans nationaliteTextInput
v_nationalite=nationaliteTextInput.text;

//Affichage du message dans un Aler

Alert.show("Nom: "+v_nom+" Prénom: "+v_prenom+"
Adresse: "+v_adresse+" Nationalité: "+v_nationalite);

}
]]>
</fx:Script>
<fx:Declarations>
<!-- Placer ici les éléments non visuels (services et objets de
valeur, par exemple). -->
</fx:Declarations>
<mx:Form x="52" y="27" width="270" height="198">
<mx:FormItem label="Nom">
<s:TextInput id="nomTextInput"/>
</mx:FormItem>
<mx:FormItem label="Prénom">
<s:TextInput id="prenomTextInput"/>
</mx:FormItem>
<mx:FormItem label="Adresse">
<s:TextInput id="adresseTextInput"/>
</mx:FormItem>
<mx:FormItem label="Nationalité">
<s:TextInput id="nationaliteTextInput"/>
</mx:FormItem>
<mx:FormItem label="Classe">
<s:ComboBox id="classeComboBox"
dataProvider="{classesList}"/>
</mx:FormItem>
<s:Button label="Valider" id="validerButton"
click="OnValiderButtonClick()"/>
</mx:Form>
<mx:DataGrid x="52" y="229" width="545" height="182"
id="etudiantGrid" dataProvider="{etudiantsList}">
 <mx:columns>
<mx:DataGridColumn headerText="Nom" dataField="nom"/>
<mx:DataGridColumn headerText="Prenom"
dataField="prenom"/>
<mx:DataGridColumn headerText="Adresse"
dataField="adresse"/>
<mx:DataGridColumn dataField="nationalite"
headerText="Nationalite"/>
<mx:DataGridColumn dataField="classe"
headerText="Classe"/>
</mx:columns>
</mx:DataGrid>
<s:Button x="54" y="413" label="Nouveau" id="nouveauButton"/>
<s:Button x="129" y="413" label="Modifier" id="modifierButton"/>
<s:Button x="203" y="413" label="Supprimer" id="supprimerButton"/>
</mx:Module>

Vous remarquez que dans creationComplete on indique la fonction init(), puisqu’il s’agit
d’un module.
Ce qui donne

Maintenant, modifions notre fonction OnValiderButtonClick() :void

Cette fonction doit maintenant récupérer les informations saisies et l’ajouter au Datagrid
public function OnValiderButtonClick():void
{
// Déclaration de quatres variables de Type String
var taille:int;
var v_nom:String;
var v_prenom:String;
var v_adresse:String;
var v_nationalite:String;
var v_classe:String;
 v_nom=nomTextInput.text;

v_prenom=prenomTextInput.text;
v_adresse=adresseTextInput.text;

v_nationalite=nationaliteTextInput.text;

v_classe=classeComboBox.selectedItem["label"];

taille=etudiantsList.length;

etudiantsList.addItem({id:(taille+1),nom:v_nom,
prenom:v_prenom,
adresse:v_adresse,
nationalite:v_nationalite,
classe:v_classe});

}
 On récupère le label de la classe sélectionnée par
v_classe=classeComboBox.selectedItem["label"];
 On calcule la longueur de la liste
taille=etudiantsList.length;
(taille+1) représentera l’id d’un étudiant

A présent il nous reste à gérer un clic sur le Datagrid

Voici la fonction qui sera exécutée au clic sur le datagrid
 L’événement est de type ListEvent (événement sur une liste)
public function OnGridEtudiantClick(event:ListEvent):void
{
var v_nom:String;
var v_prenom:String;
var v_adresse:String;
var v_nationalite:String;
var v_classe:String;
if(etudiantGrid.selectedItem)
{
v_nom=etudiantGrid.selectedItem["nom"];
v_prenom=etudiantGrid.selectedItem["prenom"];

v_adresse=etudiantGrid.selectedItem["adresse"];

v_nationalite=etudiantGrid.selectedItem["nationalite"];
v_classe=etudiantGrid.selectedItem["classe"];
Alert.show("Nom: "+v_nom+" Prénom:
"+v_prenom+" Adresse: "+v_adresse+" Nationalité: "+v_nationalite+" Clase:
"+v_classe);

}
}
 Il ne reste plus qu’à l’associer au itemClick sur le Datagrid
<mx:DataGrid x="52" y="229" width="545" height="182" id="etudiantGrid"
dataProvider="{etudiantsList}"
itemClick="OnGridEtudiantClick(event)">
Ce qui donne

Comment associer un traitement après sélection du ComboBox

L’événement est de type Event
public function OnClasseComboBoxClose(event:Event):void
{
var v_classe:String;
if(classeComboBox.selectedItem)
{

v_classe=classeComboBox.selectedItem["label"];
Alert.show("Vous etes en :"+v_classe);
}
}
Maintenant, il faut l’associer à la close du ComboBox
<s:ComboBox id="classeComboBox" dataProvider="{classesList}"
close="OnClasseComboBoxClose(event)"/>
Ce qui met fin à la première partie de notre tutoriel.
Partie2 : Communication entre Flex, PHP et MySQL
Dans cette partie, nous allons apprendre comment échanger des données entre Flash (AS3)
et Php / MySQL.
Qu’est-ce que le Flash Remoting ?
Le Flash Remoting permet des échanges entre un client (flash) et un serveur (php). De plus, il
possède un format de données propre : l’AMF pour Action Message Format.
Flash Remoting fonctionnait au départ avec Coldfusion pour la partie serveur.
Très rapidement pour que des langages serveurs tels PHP, PERL, .NET puissent utiliser le
format AMF, différents projets AMF ont vu le jour, permettant alors d’interfacer des
langages serveurs comme PHP, .NET, avec le lecteur Flash. AMFPHP, s’est établi comme un
standard dans la communauté Flash/Flex.
Le tableau suivant récapitule les différents projets AMF existants :

Lorsque vous développez aujourd’hui un projet Flex avec des échanges serveurs, vous avez
par exemple la possibilité d’utiliser le format XML avec la classe HTTPRequest.
En réalité vous échangez entre le serveur et votre client Flex une chaîne de caractères que ce
soit pour le XML ou SOAP. Ne serait-il pas plus pratique de pouvoir échanger, sans aucun
traitement de votre part, tous les types ActionScript entre votre serveur et votre application
Flex ?
Ces projets AMF vont automatiquement sérialiser les données échangées. Vous envoyez un
type Boolean, ce projet, que l’on appellera « passerelle », va alors détecter ce type et le
convertir en type compatible côté serveur.
Vous envoyez un type Array vers votre service, le projet AMF convertira automatiquement
ce tableau en tableau compatible pour le langage utilisé côté serveur. Prenons l’exemple
d’AMFPHP.
Dans votre application Flex tout objet envoyé vers votre service PHP sera sérialisé en type.
Dans ce TP nous utiliserons la librairie AMFPHP
Dans votre application Flex tout objet envoyé vers votre service PHP sera sérialisé en type
correspondant PHP.

Voici un tableau récapitulatif des types supportés et interprétés pour AMFPHP.

Fonctionnement d’AMFPHP

AMFPHP va servir d’intermédiaire entre le code serveur et l’application Flex, tous les
échanges passeront par AMFPHP qui se chargera de toute la sérialisation.
Pour vous procurer AMFPHP il vous suffit de vous rendre sur le site du projet à l’adresse
suivante http://www.amfphp.org.
Débutons à présent notre TP
Copier d’abord le dossier AMFPHP dans le répertoire de votre projet
C:\wamp\www\ApplicationFlexBD
Il y a 2 dossiers et 1 fichier important :
 browser : permet de tester vos services Php.
 services : contient les Services Php ou classes de communication avec une base de
données MySQL.
 gateway.php : la passerelle à configurer dans votre fichier ActionScript pour lancer la
communication de Flash avec Php.
Ensuite, tapez l’url d’accès la passerelle gateway.php
http://localhost/Application%20Flex/amfphp/gateway.php

Cliquer sur le lien « Load the service browser » et cliquer sur « Save »
Créer ensuite une base de donées base_tp_flex
Créer ensuite les tables : « etudiant » et « classe »

CREATE TABLE IF NOT EXISTS `etudiant` (

`id` int(11) NOT NULL AUTO_INCREMENT,
`nom` varchar(80) NOT NULL,
`prenom` varchar(80) NOT NULL,
`adresse` varchar(100) NOT NULL,
`nationalite` varchar(80) NOT NULL,
`classe_id` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

CREATE TABLE IF NOT EXISTS `classe` (

`id` int(11) NOT NULL AUTO_INCREMENT,
`nomclasse` varchar(80) NOT NULL,
`acronyme` varchar(20) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Placez-vous dans le dossier services
C:\wamp\www\ApplicationFlexBD\amfphp\services
Créer votre classe de base Base.php

Toutes les classes que nous allons créer hériteront de cette classe, car pour dialoguer avec une
base de données il faut d’abord se connecter.
Créer ensuite la classe Etudiant.php
Le fichier Classe.php

Et voila ce que sa donne si vous charger vos serives.

Pour tester une méthode, remplissez les informations et cliquer sur Call
Tous les services ont été créés.
Revenons maintenant dans notre application Flex
Créer un fichier ActionScript RemotingConnection.as avec le code suivant
Nous utiliserons cette classe pour appeler nos services à distance

package
{
import flash.net.NetConnection;
import flash.net.ObjectEncoding;
public class RemotingConnection extends NetConnection
{
public function RemotingConnection( sURL:String )
{
objectEncoding = ObjectEncoding.AMF0;
if(sURL) connect( sURL );
}
public function AppendToGatewayUrl( s : String ) : void
{
//
}
}
}
Ouvrez le fichier général de l’application : le Main.mxml
Dans ce fichier, on va déclarer une variable de type RemotingConnection
On instancie dans la fonction init() en précisant l’url de notre browser
Donc tous les fichiers de l’application pourront utiliser cette variable pour utiliser les services
PHP.
La fonction OnFault nous renvoie les erreurs de l’application dans un Alert.
Il faut donc rappeler que pour appeler une service, on utilisera un Responder qui prend deux
paramètres : la fonction qui récupère le résultat du service, et la fonction qui sera exécutée en
cas d’erreur.
La fonction qui récupère le résultat a en paramètre ce que retourne le service, c’est-à-dire si le
service retourne un tableau, la fonction reçoit en paramètre ce tableau, si c’est un String la
fonction reçoit un String.
Une variable etudiant_id qui est initialisé à -1 , donc cette valeur changera de valeur dès
qu’un étudiant sera sélectionné, il prendra comme valeur l’id de cet étudiant et s’il n’ya pas
d’étudiant sélectionné cette variable reçoit comme valeur -1.
De même que la variable filire_id
Donc pour accéder a ces variables dans les autres fichiers de l’application
parentApplication.etudiant_id
parentApplication.filiere_id

Ouvrez ensuite le fichier etudiant.mxml

Et changer ces deuc lignes de déclarations
[Bindable] public var classesList:ArrayCollection;
[Bindable] public var etudiantsList:ArrayCollection;
Si le module se charge, on vérifie si la collection est vide alors on instanncie, sinon on vide
les données de la collection pour recharger les données.

Notre fonction init() changera, car si l’application démarre on veut afficher tous les étudiants
dans la base de données dans le dataGrid et les filières aussi dans le comboBox.
On appellera don les services Etudiant. listEtudiants et Classe. getClasses

public function init():void

{
parentApplication.gateway.call("Etudiant.listEtudiants", new
Responder(OnListEtudiantResult, parentApplication.onFault));

parentApplication.gateway.call("Classe.getClasses", new
Responder(OnGetClassesResult, parentApplication.onFault));

}
Cette fonction recupère les résultats envoyès par le service et ajoute les données à la
collection etudiantsList
public function OnListEtudiantResult(result:Array):void
{
var i:int;
if(!etudiantsList)
etudiantsList=new ArrayCollection();
else
etudiantsList.removeAll();
for(i=0;i<result.length;i++)
etudiantsList.addItem({
id:result[i]["id"],
nom:result[i]["nom"],
prenom:result[i]["prenom"],
adresse:result[i]["adresse"],
nationalite:result[i]["nationalite"],
classe_id:result[i]["classe_id"]});

}
Il faut donc modifier le datafield de la colonne Classe dans le Datagrid, On mettra donc
classe_id.
<mx:DataGrid x="52" y="229" width="545" height="182" id="etudiantGrid"
dataProvider="{etudiantsList}"
itemClick="OnGridEtudiantClick(event)">
<mx:columns>
<mx:DataGridColumn headerText="Nom" dataField="nom"/>
<mx:DataGridColumn headerText="Prenom"
dataField="prenom"/>
<mx:DataGridColumn headerText="Adresse"
dataField="adresse"/>
<mx:DataGridColumn dataField="nationalite"
headerText="Nationalite"/>
<mx:DataGridColumn dataField="classe_id"
headerText="Classe"/>
</mx:columns>
</mx:DataGrid>

Cette fonction recupère les résultats envoyès par le service et ajoute les données à la
collection
classesList
public function OnGetClassesResult(result:Array):void
{
var i:int;
if(!classesList)
classesList=new ArrayCollection();
else
classesList.removeAll();
for(i=0;i<result.length;i++)
classesList.addItem({
id:result[i]["id"],
label:result[i]["acronyme"],
nomclasse:result[i]["nomclasse"]}
);
 }
Nous allons maintenant modifier notre function OnValiderButtonClick()
Cette fonction doit enregistrer les informations saisies dans la table etudiant
public function OnValiderButtonClick():void
{
// Déclaration de quatres variables de Type String
var taille:int;
var v_nom:String;
var v_prenom:String;
var v_adresse:String;
var v_nationalite:String;
var v_classe_id:int;
// la varibale v_nom recupere le texte saisie dans
nomTextInput
v_nom=nomTextInput.text;
// la varibale v_prenom recupere le texte saisie
dans prenomTextInput
v_prenom=prenomTextInput.text;
// la varibale v_adresse recupere le texte saisie
dans adresseTextInput
v_adresse=adresseTextInput.text;
// la varibale v_nationalite recupere le texte
saisie dans nationaliteTextInput
v_nationalite=nationaliteTextInput.text;
v_classe_id=classeComboBox.selectedItem["id"];

parentApplication.gateway.call("Etudiant.addEtudiant",new
Responder(OnAddEtudiantResult,parentApplication.onFault),

v_nom,v_prenom,v_adresse,v_nationalite,v_classe_id);
}

Puisque le service retourne true si l’opération a été effectuée avec

success et false sinon, donc la function qui recupère ce résultat recoit
une variable de type Boolean en parametre.
Enfin, il faut appeler le service listeEtudiants pour mettre à jour le
Datagrid.
public function OnAddEtudiantResult(result:Boolean):void
{
if(result==true)
Alert.show("Insertion etudiant reussie");
else
Alert.show("Echec insertion etudiant");

parentApplication.gateway.call("Etudiant.listEtudiants", new
Responder(OnListEtudiantResult, parentApplication.onFault));

FIN DE CETTE PARTIE

EXERCICE RECAPITULATIF :
On veut effectuer les modifications suivantes sur l’application
Au démarrage de l’application, c’est-à-dire dans la fonction init(), désactiver les boutons
valider,modifier,supprimer.
Exemple validerButton.enabled=false ;
Si l’utilisateur clique sur une ligne du Datagrid etudiant , les boutons modifier, et supprimer
doivent s’activer.
Si l’utilisateur clique sur modifier, les informations de la ligne sélectionnée sont affichés dans
les champs de saisie du formulaire, et le bouton valider doit aussi s’activer.
Le bouton valider jouera maintenant deux roles : l’insertion et la modification.
Il faut donc penser à créer une variable globale operation qui aura comme valeur « insert » si
on clique sur nouveau et « update » si on clique sur « modifier ».
Avant d’exécuter une opération,le bouton valider doit d’abord vérifier quelle eslt la valeur de
operation pour voir quelle service appeler ?
Le bouton supprimer supprime l’etudiant selectionné.
Voir le service Etudiant.deleteEtudiant qui recoit en paramètre l’id de l’étudiant qu’on veut
supprimer.

Pour l’amélioration de ce tutoriel, envoyez vos suggestions par mail :

jodyama@hotmail.com