Programmation Flex/Utilisation des composants

Un livre de Wikilivres.
Sauter à la navigation Sauter à la recherche
Programmation_Flex
Utilisation des composants
Sommaire
Controles
Layout
Navigator
Adobe Air
Charts
Liens
Modifier ce modèle

Debuter 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 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[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 instuctions 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 :

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