Adobe Flex Tutorial - Adobe Flex Tutorial

7août/082

Flex MXML – Les Composants MXML

Les applications Flex sont largement composées de composants (éléments modulaires). Techniquement, un composant est une classe ActionScript ou un document MXML Component qui a été mappé à un identifiant via un fichier manifest pour qu'il puisse être instancié en MXML. Il y a différents types de composants, mais pour le framework Flex, il y a deux types basiques de composants: visuels et non-visuels.
Les composants visuels sont les suivants:

Conteneurs (containers)
Contrôles IHM ( User Interface Controls )

Les composants non-visuels sont les suivants:

Composants Data
Composants Utility

Conteneurs MXML (Containers)

Les conteneurs sont des composants qui peuvent contenir d'autres composants. Toute application doit utiliser des conteneurs. Au minimum, l'élément Application lui-même est un conteneur car vous pouvez placer d'autres composants à l'intérieur. On utilise des conteneurs pour la mise en page (layout). Il y a des conteneurs avec mise en page verticale, horizontale, grilles, de toutes sortes. Quand vous utilisez des conteneurs de mise en page, vous placez d'autres composants à l'intérieur en incrustant d'autres tags.
L'exemple suivant utilise une VBox (un conteneur qui arrange automatiquement ses éléments enfant de manière verticale) pour aligner deux boutons:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:VBox>
		<mx:Button label="Exemple de bouton 1"/>
		<mx:Button label="Exemple de bouton 2"/>
	</mx:VBox>
</mx:Application>

Vous pouvez incruster des conteneurs dans des conteneurs comme le montre l'exemple suivant, en plaçant une HBox (un conteneur qui arrange automatiquement ses éléments enfant de manière horizontale) dans une VBox:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:VBox>
		<mx:Button label="Exemple de bouton 1"/>
		<mx:Button label="Exemple de bouton 2"/>
		<mx:HBox>
			<mx:Button label="Exemple de bouton 3"/>
			<mx:Button label="Exemple de bouton 4"/>
		</mx:HBox>
	</mx:VBox>
</mx:Application>

UI Controls

Les User Interface Controls sont des éléments visibles de l'interface comme des boutons, des champs texte ou des tableaux de données. Il y a de nombreux type d'UI Controls qui seront vus dans un autre article sur flex-tutorial.

Modifier les propriétés d'un composant MXML

Quand vous travaillez avec des composants, vous aurez souvent besoin de les configurer en modifiant ses propriétés. Par exemple, un composant Button permet d'appliquer un label en fixant une propriété. Chaque composant a son ensemble de propriétés que vous pouvez modifier. Par exemple, un bouton et une VBox ont clairement des propriétés différentes car ils n'ont pas le même usage. Cependant, malgré cette différence, vous pouvez modifier les propriétés d'un composant en utilisant les même techniques:

En utilisant les attributs du tag
En utilisant des tags incrustés dans le composant
En utilisant de l'ActionScript

La manière la plus simple et la plus pratique de fixer une propriété pour un composant est d'utiliser les attributs du tag. Par exemple, le tag Application vous permet fixer la propriété layout en utilisant un attribut du tag comme dans l'exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:Application>

Vous remarquerez que les attributs de tag apparaissent toujours dans le tag ouvrant, après le nom du tag. Un tag peut avoir de nombreux attributs, séparés par des espaces. Les attributs consistent en un nom d'attribut, un signe égal (=) et la valeur entre des quotes ("").
Presque tous les composants (tous les composants visibles) ont une propriété "id". Dans la plupart de cas, vous devriez fixer cet propriété id, car c'est elle qui va référencer l'instance en utilisant le data binding ou de l'ActionScript. La propriété id est le nom de l'instance du composant, est il doit être unique dans le document. Cette valeur doit respecter quelques règles de nommage. La propriété id d'un composant ne devrait contenir que des lettres, chiffres, underscore (_) et il devrait commencer par une lettre ou un chiffre, mais pas un nombre.
L'exemple suivant assigne une valeur d'id à un bouton:

<mx:Button id="exempleButton" label="Exemple de bouton"/>

Vous pouvez fixer la plupart des propriétés (sauf la propriété id) en utilisant des tags incrustés au lieu de attributs. Les tags incrustés utilisent le même nom que la propriété/attribut mais doivent être préfixés par le préfixe de namespace correct. L'exemple suivant assigne un label au bouton de cette manière:

<mx:Button id="exempleButton">
	<mx:label>Exemple de bouton</mx:label>
</mx:Button>

Dans la plupart des cas, il est préférable de fixer les propriétés en utilisant les attributs plutôt que les tags incrustés car les attributs sont plus compacts et lisibles. Cependant, il y a certains cas ou leur utilisation est légitime. Par exemple, certaines propriétés requièrent des valeurs qui ne peuvent pas être représentées par une chaine (String) placée entre quotes. Un bon exemple est la propriété dataProvider d'un ComboBox (menu déroulant). La propriété dataProvider d'un ComboBox doit être une collection de valeur.
L'exemple suivant crée une ComboBox avec un dataProvider incrusté contenant les valeurs:

<mx:ComboBox id="exempleComboBox">
	<mx:dataProvider>
		<mx:ArrayCollection>
			<mx:String>A</mx:String>
			<mx:String>B</mx:String>
			<mx:String>C</mx:String>
			<mx:String>D</mx:String>
		</mx:ArrayCollection>
	</mx:dataProvider>
</mx:ComboBox>

Notez que vous pouvez fixer la propriété dataProvider en ActionScript pour ne pas avoir besoin de ces tags. Cependant, si vous voulez utiliser du MXML pour fixer cette propriété, vous devez le faire de cette manière.

Vous pouvez aussi fixer les propriétés en utilisant de l'ActionScript. Quand vous fixez la propriété "id" d'un composant, vous pouvez le référencer en utilisant ce nom comme un objet ActionScript. La plupart des propriétés de composants ont le même nom en attribut qu'en propriété ActionScript.

Composants MXML Non-visuels

Comme écrit plus haut, il y a deux types de composants non-visuels: les composants data et les composants utility. Les composants Data sont utilisés pour créer des structures de données, comme des tableaux (Array) ou de collections, et pour faire des appels distants (SOAP ou AMF par exemple).
Les composants Utility sont des composants utilisés pour une certaine fonctionnalité. Par exemple, les composants utilisés pour répéter des composants, ou pour créer un data binding entre les composants.

Les composants non-visuels sont nombreux et seront vu dans d'autres articles sur flex-tutorial.