Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Layout – Containers et Children

Une des fonctionnalités clé de Flex est la manière dont il simplifie la mise en page d'applications. Le développement d'application traditionnelles requiert l'écriture de code ou bien de travailler avec des composants de mise en page de manière peu intuitive. Avec le MXML et les conteneurs de Flex, vous pouvez produire la plupart des applications sans avoir à écrire une seule ligne de code. Les composants containers sont la base de la mise en page avec Flex. Au niveau le plus bas, la classe Application est un conteneur, et les items à l'intérieur de la classe Application (tag) sont appelés children (enfants). En MXML, le fait de placer des nodes à l'intérieur d'une déclaration de conteneur signifie que les objets sont instanciés et ajoutés au container en tant que children, et le conteneur va automatiquement prendre en charge leur position/taille. Par exemple, dans l'exemple suivant, deux children sont ajoutés au conteneur Application (une instance de TextInput et une de Button):

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

Si vous utilisez Flex Builder, le template MXML par défaut fixe la propriété "layout" de tag Application à "absolute". La propriété layout contrôle la manière dont les enfants sont positionnés et si cette valeur est fixée à absolute, les exemples pourraient ne pas fonctionner comme il faut.

Dans l'exemple précédent, on a ajouté 2 enfants au container Application simplement en plaçant les children comme des sous-noeuds du conteneur en utilisant du MXML. Cela ajoute les children à la liste d'affichage (Display List) du composant. Notez aussi que vous n'avez pas à placer les children explicitement dans le container. En fait, certains containers vont automatiquement positionner leur enfants pour vous en utilisant des règles de positionnement qui leur sont propres, plutôt que de vous obliger à fournir les coordonnées exactes de chaque enfant. Bien que cela puisse sembler être une limitation, c'est n'est pas obligatoire, et vous avez la possibilité de fixer vos propres valeurs, en utilisant différents conteneurs pour arriver à placer vos composants comme vous le souhaitez en fixant la position et la taille au pixel près. Les conteneurs et les composants d'interface utilisateur on beaucoup en commun si on regarde la chaîne d'héritage, ce qui rend les containers facilement manipulable si vous avez l'habitude de travailler avec les composants Flex en général. La plus grande différence est que les conteneurs ne sont pas prévus pour recevoir des entrées utilisateur contrairement aux composants UI. Leur but est de contenir des contrôles enfants ou d'autres conteneurs. C'est pour cela que leur propriété tabChildren et fixée à true et que leur propriété tabEnabled est fixée à false. Dans l'exemple précédent, on a ajouté des children à un container en utilisant du MXML. Vous pouvez aussi le faire en utilisant de l'ActionScript comme dans cet exemple. Comprendre ce code va vous aider à comprendre comment le MXML fonctionne.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="addItems()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Button;
			import mx.controls.TextInput;
			private function addItems():void{
				var ti:TextInput = new TextInput;
				this.addChild(ti);
				var btn:Button = new Button;
				btn.label = "Envoyer";
				this.addChild(btn);
			}
		]]>
	</mx:Script>
</mx:Application>

Comme vous pouvez le constater, le code ActionScript est bien plus verbeux (verbose) que le code MXML. C'est un bon exemple qui montre que le MXML est idéal pour développer rapidement des interfaces utilisateur. En général, vous devriez écrire la mise en page de l'interface en MXML lorsque c'est possible, et utiliser de l'AS3 seulement quand vous voulez en faire plus à l'exécution, comme ajouter un nombre arbitraire de children, ou dans les cas ou le MXML ne vous donne pas assez de contrôle sur la mise en page que vous souhaitez. Gardez en tête que vous pouvez mélanger l'ActionScript et le MXML pour mettre en page votre application Flex donc il est important de savoir coder des deux manières. Si vous trouvez qu'une partie de votre mise en page requiert un contrôle dynamique sur l'instanciation des children, vous allez avoir besoin de traiter ces cas avec de l'ActionScript 3.