Chapitre 4 : Grer les vnements

Dvelopper une application avec Adobe Flex 2.0

Thmes

Comprendre les vnements Crer des gestionnaires dvnement en utilisant ActionScript Grer les vnements avec des fonctions ActionScript Mettre les fonctions ActionScript dans des fichiers externes Comprendre lobjet event

Comprendre les vnements

Types dvnements

Systme

Surviennent certains moments dtermins de lexcution du code

initialize, creationComplete, draw

Utilisateur

Surviennent lors dune interaction de lutilisateur avec un contrle ou un conteneur dans lapplication

click, change, mouseOver

Evnements systme

Surviennent durant lexcution du code Ce qui suit arrive pour tout objet, sous-classe de UIObject
Evnement initialize Description Envoy lorsque les composants ont termin leur construction et que toutes les proprits ont t positionnes

creationComplete Envoy lorsque lobjet a fini sa construction, les proprits sont positionnes, les mesures, le positionnement et le dessin sont termins (mme si la proprit visible est fausse) Rcuprez cet vnement pour positionner les valeurs par dfaut au dmarrage ; tous les objets sont prts tre utiliss Frquemment utilis dans lobjet Application show Envoy lorsque ltat dun objet passe de invisible visible

Note: Les vnements de la balise Application sont envoys en dernier

Evnements utilisateur

Supporte un sous ensemble des vnements du standard DOM Level 3 Ci-dessous, quelques exemples frquents
Evnement click change Description Sur llment, le bouton du systme de pointage est cliqu Cet vnement survient quand la valeur dun contrle change, exemple : la saisie dun caractre dans un contrle TextInput ou une nouvelle slection dans un contrle ComboBox Sur llment, le bouton du systme de pointage est appuy

mouseDown

Exemple de code : vnements

Visualiser les vnements systme et utilisateur

EventDemo.mxml
Note : Regardez laspect gnral de lapplication, pas encore le code !

Crer des gestionnaires dvnement en utilisant ActionScript

Grer les vnements

Positionnez la proprit vnement de la balise du contrle ou du conteneur MXML avec le code de gestion de lvnement
<mx:TagName eventName="[ActionScript code]"/>

Deux faons de spcifier le code de gestion de lvnement

En mettant directement la portion de code ActionScript dans la valeur de la proprit En appelant une fonction ActionScript dfinie dans le block de script

Grer lvnement en mettant directement le code ActionScript

Ecrivez le code ActionScript dans la balise

<mx:TagName eventName="[ActionScript statement or function call here]" />

Exemple: rpondre lvnement click dun bouton

<mx:Button label="Click Me" click="myLabel.text='You clicked'"/> <mx:Label id="myLabel"/>

Note : XML impose de placer des guillemets simples autour de la valeur dun attribut

Utiliser ActionScript dans les balises MXML

ActionScript ne peut tre utilis que comme une valeur pour une proprit de type vnement, pas dans un autre type de proprit, moins dutiliser les liaisons ({})
<mx:Button id="myButton" label="Click Me" click="myLabel.text='You clicked'"/> <mx:Label id="myLabel" text="Click '{myButton.label}'"/>

Exemple de code : grer lvnement en mettant directement le code ActionScript

Utiliser ActionScript pour donner une valeur un Label sur un vnement de clic dun bouton

InlineASDemo.mxml

Grer les vnements avec des fonctions ActionScript

Ecrire des fonctions ActionScript pour grer les vnements

Si vous avez besoin de plus dune ligne de code pour grer un vnement, placez le code dans une fonction

Permet la rutilisabilit Garde le code plus propre

Placez le code lintrieur dune balise <mx:Script>

Tout ce qui se trouve lintrieur est considr par linterprteur comme du XML Utiliser un CDATA pour viter aux caractres spciaux dtre interprts

Dfinir une fonction dans un document MXML

<mx:Script> <![CDATA[ function fillLabelControl():Void { myLabel.text="You Clicked"; } ]]> </mx:Script>

<mx:Button label="Click Me" click="fillLabelControl()" /> <mx:Label id="myLabel" />

Exemple de code : grer les vnements avec des fonctions ActionScript

Utiliser une fonction dans un bloc script pour donner une valeur un Label sur un vnement de click de bouton

FunctionDemo.mxml
Note : Flex Builder gnrera un bloc CDATA pour vous, quand vous insrez la balise <mx:Script>

Placer les fonctions ActionScript dans des fichiers externes

Placer les fonctions dans un fichier ActionScript externe

Vous pouvez placer les fonctions dans un fichier externe ActionScript

Par convention, utiliser lextension de fichier AS Vous pouvez utiliser nimporte quelle extension de fichier Le fichier ne peut contenir que des dclarations de variables et de fonctions

Importer un fichier ActionScript externe

Utilisez lattribut source de la balise <mx:Script>

<mx:Script source="asHandlers.as"/>

Comprendre lobjet Event

Lobjet Event

Lobjet Event est un objet ActionScript qui est cr chaque fois quun vnement survient Contient des informations sur lvnement. Chaque vnement provient dune classe de type Event

Par exemple le click gnre un vnement de type flash.events.MouseEvent qui contient des proprits spcifiques

Vous faites rfrence cet objet lintrieur dun handler dvnement sous le nom event <mx:Button label="Click Me" id="button1" click="fillLabelControl(event)"/>

Proprits de lobjet Event

Tout objet vnement contient des proprits qui dpendent de sa classe Ces proprits sont prcises dans la doc de la classe Event considre

MouseEvent pour le click bouton par exemple

Les proprits importantes sont aussi rappeles dans la doc du handler dvnement Il est possible de crer ses propres classes dvnement (voir chapitre 11)

Exemple de code : utiliser lobjet Event

Afficher les proprits des objets vnement

EventObject.mxml EventDemoObject.mxml

Rsum

Rsum

Il y a deux types dvnements : systme et utilisateur Vous grez les vnements avec des gestionnaires

En crivant directement le code dans la balise MXML En faisant rfrence une fonction ActionScript qui se trouve dans un bloc <mx:Script> Le bloc de script peut faire rfrence un fichier ActionScript externe

Un objet vnement est cr automatiquement chaque fois quun vnement survient

Contient au moins deux proprits : type et target

Exercice 4: Objectifs

Grer les vnements dun composant

Ajouter un bloc de script et dfinir une fonction Utiliser une condition pour activer/dsactiver des cases cocher Appeler une fonction sur un vnement utilisateur Appeler une fonction sur un vnement systme

Dure : 15 minutes

Exercice 4 : Diagramme

Les autres cases cocher doivent tre dsactives quand la case All Categories est active

Exercice 4 : Notes

Ecrivez tout le code dans Category.mxml Nommez les cases cocher all, afghan, african Nommez la fonction allHandler

A lintrieur, crire le code pour activer ou dsactiver les cases cocher Ci-dessous la syntaxe du if ActionScript
if (expression) { [code to complete] } else { [code to complete] }

Appelez la fonction quand lapplication se charge et lorsque la case cocher All Categories est slectionne