Programmation Flex/Utilisation des composants
| Programmation_Flex |
|---|
 |
| Sommaire |
| Liens |
| Modifier ce modèle |
Débuter avec flex
[modifier | modifier le wikicode]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 | modifier le wikicode]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 | modifier le wikicode]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 | modifier le wikicode][ 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 | modifier le wikicode]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 | modifier le wikicode]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 | modifier le wikicode]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 | modifier le wikicode]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>