Programmation Flex/Utilisation des composants
| Programmation_Flex |
|---|
 |
| Sommaire |
| Liens |
| Modifier ce modèle |
Débuter avec flex modifier
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 souvent 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 succinctement les différentes fonctionnalités de flex avec les codes sources.
Partie déclarative modifier
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 modifier
Le code constitue cette partie. Il peut être instruit de 3 manières :
- Façon 1 : Comme script MXML
- Façon 2 : Comme instructions dans les objets
- Façon 3 : Comme inclusion de fichiers .as
Ecriture outline modifier
[ 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 modifier
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 modifier
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 modifier
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 modifier
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>