Programmation Flex/Utilisation des composants

Programmation_Flex
Utilisation des composants
Sommaire
Liste des composants Utilisation des composants Controles Layout Navigator Adobe Air Charts Applications avancées
Liens
Liens
Modifier ce modèle

Débuter 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 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

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

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/class-summary.html

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

http://www.adobe.com/livedocs/flex/2/langref/class-summary.html

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>