| Programmation_Flex |
 Utilisation des composants |
| Sommaire |
| Liens |
| Modifier ce modèle |
Debuter avec flex
Une application flex comprend deux parties :
- Declarative : Objet du formulaire (comme les boutons, les textarea,...)
- Impérative : Le code actionscript
Quelques petites implémentations avec les composants de flex 3 présentés ici devraient vous donner une bonne base pour débuter avec flex. Prenez le temps de bien tester et mixer données des mx:script et de les "binder" vers les objets MX. "Binder" est une notion importante dans flex, cela signifie que l'élément binder sera mis à jour automatiquement lorsqu'il y aura changement de valeurs. Ce tag reviendra souvant aux "flexeurs" : [Bindable]...
Dans Applications avancées, des exemples plus ambitieux seront présentés.
Je vous recommande par ailleurs d'installer le "Tour de Flex" (http://www.adobe.com/devnet/flex/tourdeflex.html) qui présente succintement les différentes fonctionnalités de flex avec les codes sources.
Partie déclarative
Celle-ci se construit avec le designer ou dans le code source. Elle peut être générée dynamiquement de manière impérative. Tout les objets de la vue peuvent être générés par le code.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<!-- DEBUT DE LA PARTIE DECLARATIVE -->
<mx:TextArea x="10" y="40" width="200" height="200" id="textArea1"/>
<!-- Commentaires
<mx:TextArea x="10" y="15" width="100" height="20" id="textArea1"/>
<mx:TextArea x="10" y="45" width="100" height="20" id="textArea2"/>
<mx:TextArea x="10" y="75" width="100" height="20" id="textArea3"/>
-->
<!-- FIN DE LA PARTIE DECLARATIVE -->
</mx:WindowedApplication>
Partie impérative
Le code constitue cette partie. Il peut être instruit de 3 manières :
- Façon 1 : Comme script MXML
- Façon 2 : Comme instuctions dans les objets
- Façon 3 : Comme inclusion de fichiers .as
Ecriture outline
[ Façon 1 ]
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function exemple():void{
Alert.show("Exemple");
}
]]>
</mx:Script>
[ Façon 2 ]
<mx:Button>
<mx:click>
<![CDATA[
mx.controls.Alert.show("Exemple");
]]>
</mx:click>
</mx:Button>
[ Façon 3 ]
<mx:Script source="code.as"/>
Ecriture inline
L'écriture inline est écrite au sein du tag.
[ Façon 1 : Dans un attribut ]
Une instruction
<mx:Button id="alertButton" label="Show Alert"
click="mx.controls.Alert.show('Example')"/>
Plusieurs instructions
<mx:Button id="alertButton" label="Show Alert"
click="alertButton.label = 'Nouveau Label';mx.controls.Alert.show('Exemple');"/>
[ Façon 2 : En databinding ]
Une instruction
<mx:VBox>
<mx:TextInput id="input"/>
<mx:Text id="output" text="{input.text}"/>
</mx:VBox>
Plusieurs instructions
<mx:VBox>
<mx:TextInput id="input"/>
<mx:Text id="output" text="{'User Input: ' + input.text}"/>
</mx:VBox>
Premier programme
Commençons par envoyer un message à l'utilisateur
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="initialiser()">
<mx:Script>
<![CDATA[
public function initialiser():void
{
textArea1.text = "Hello World !" ;
}
]]>
</mx:Script>
<mx:TextArea x="10" y="40" width="200" height="200" id="textArea1"/>
</mx:WindowedApplication>
Ce formulaire flex air comporte un composant textarea. Le textarea à son texte qui change en "Hello World" au démarage de WindowedApplication. creationComplete exécute la fonction "initialiser()" au démarage du formulaire qui change le texte de textarea.
API ActionScript/Flex/FlashBuilder
Reference for the Adobe Flash Platform :
Guide de référence du langage d'Adobe® Flex® 4.1 :
- (spark) http://help.adobe.com/fr_FR/AS3LCR/Flex_4.0/spark/components/package-detail.html
- (classes) http://help.adobe.com/fr_FR/AS3LCR/Flex_4.0/class-summary.html
Adobe® Flex™ 2 Language Reference
Exemples d'utilisation des composants
Les points suivants illustrent une utilisation habituelle des composants des formulaires.
On accède aux éléments du formulaire par l'attribut id.
Ainsi un bouton aura par exemple un id="bouton1" comme ici :
<mx:Button x="10" y="30" label="Button" id="bouton1" click=""/>
Pour appeler cet élément dans le code on fera :
<fx:Script>
<![CDATA[
...
bouton1.label="nouveau label"; // le label de bouton1 devient "nouveau label"
...
]]>
</fx:Script>