Programmation Flex/Utilisation des composants

Programmation_Flex
Utilisation des composants
Sommaire
Controles
Layout
Navigator
Adobe Air
Charts
Liens
Modifier ce modèle

Debuter avec flexModifier

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éclarativeModifier

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érativeModifier

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 outlineModifier

[ 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 inlineModifier

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 programmeModifier

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/FlashBuilderModifier

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 composantsModifier

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>