cours flex diaw final

FORMATION

DEVELOPPER AVEC FLASH BUILDER 4

AMFPHP ET MySQL

AMADOU DIAW

CONCEPTEUR/ DEVELOPPEUR

DE

SYSTEMES D’INFORMATIONS

Email : [email protected]

mailto:[email protected]

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 FichierNouveauProjet 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 »

http://localhost/

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 NouveauModule 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>



</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 :


<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"


xmlns:mx="library://ns.adobe.com/flex/mx"


<fx:Declarations>



</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





width="1024" height="700" applicationComplete="init()">

<fx:Script>

<![CDATA[

public function init():void

{

moduleLoader.loadModule("etudiant.swf");

}

]]>

</fx:Script>

<fx:Declarations>



</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.




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






<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>



</fx:Declarations>




</mx:FormItem>



</mx:FormItem>



</mx:FormItem>



</mx:FormItem>


<s:ComboBox id="classeComboBox"/>

</mx:FormItem>

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

click="OnValiderButtonClick()"/>

</mx:Form>


id="etudiantGrid">

<mx:columns>










</mx:columns>

</mx:DataGrid>




</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.



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();


id="etudiantGrid" dataProvider="{etudiantsList}">

<mx:columns>










</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


{

classesList.addItem({id:1,label:"TEK1"});



etudiantsList.addItem({id:1,nom:"DIAW",

prenom:"Amadou",

adresse:"Dakar",

nationalite:"MAURITANIENNE",

classe:"TEK2"});


prenom:"Abdoulaye",

adresse:"Saint-Louis",

nationalite:"SENEGALAISE",

classe:"TEK1"});


prenom:"Amadou",

adresse:"Dakar",


classe:"TEK2"});

}

La fonction addItem ajoute une ligne à la collection

Voici donc le code complet de notre fichier etudiant.mxml





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();


{





prenom:"Amadou",

adresse:"Dakar",


classe:"TEK2"});


prenom:"Abdoulaye",

adresse:"Saint-

Louis",

nationalite:"SENEGALAISE",

classe:"TEK1"});


prenom:"Amadou",

adresse:"Dakar",


classe:"TEK2"});

}


{


var v_nom:String;




// la varibale v_nom recupere le texte saisie dans

nomTextInput


// la varibale v_prenom recupere le texte saisie

dans prenomTextInput


// la varibale v_adresse recupere le texte saisie

dans adresseTextInput

v_adresse=adresseTextInput.text;

// la varibale v_nationalite recupere le texte

saisie dans nationaliteTextInput


//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>



</fx:Declarations>




</mx:FormItem>



</mx:FormItem>



</mx:FormItem>



</mx:FormItem>


<s:ComboBox id="classeComboBox"

dataProvider="{classesList}"/>

</mx:FormItem>



</mx:Form>


id="etudiantGrid" dataProvider="{etudiantsList}">

<mx:columns>










</mx:columns>

</mx:DataGrid>




</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


{


var taille:int;

var v_nom:String;




var v_classe:String;





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


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;





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

{


if(classeComboBox.selectedItem)

{


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.

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 »

http://localhost/Application%20Flex/amfphp/gateway.php

Créer ensuite une base de donées base_tp_flex

Créer ensuite les tables : « etudiant » et « classe »

CREATE TABLE IF NOT EXISTS ètudiant` (

ìd` int(11) NOT NULL AUTO_INCREMENT,

`nom` varchar(80) NOT NULL,

`prenom` varchar(80) NOT NULL,

àdresse` varchar(100) NOT NULL,

`nationalite` varchar(80) NOT NULL,

`classe_id` int(11) NOT NULL,

PRIMARY KEY (ìd`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

CREATE TABLE IF NOT EXISTS `classe` (

ìd` int(11) NOT NULL AUTO_INCREMENT,

`nomclasse` varchar(80) NOT NULL,

àcronyme` varchar(20) NOT NULL,

PRIMARY KEY (ìd`)

) 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


{

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 dataField="classe_id"


</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


{


var taille:int;

var v_nom:String;




var v_classe_id:int;

// la varibale v_nom recupere le texte saisie dans

nomTextInput


// la varibale v_prenom recupere le texte saisie

dans prenomTextInput


// la varibale v_adresse recupere le texte saisie

dans adresseTextInput


// la varibale v_nationalite recupere le texte

saisie dans nationaliteTextInput


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 :

[email protected]

cours flex diaw final

Documents

boucles et

procdures et fonctions

conception et

une variable est dclare

fonctionsles procdures

procdure ou

fichiers mxml et actionscript

langage mxml mxml est