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

Flex Layout – Positionnement dans un Container de type Canvas et contraintes (top, bottom, horizontalCenter …)

Le conteneur Canvas est celui qui implémente cette mise en page de base. Bien qu'il soit simple, il est important d'en connaître les règles de positionnement car elles sont utilisées par d'autres containers. Les règles de positionnement dans un Canvas donne beaucoup de flexibilité dans la construction d'un layout tout en s'assurant que les routines vont bien s'appliquer. En effet, vous devrez donner toute la logique de positionnement à Flex, ce qui veut dire que Flex n'a pas à faire tout le travail de mesure sur les enfants du Canvas pour calculer les positions optimales.

Le positionnement dans un container de type Canvas vous permet de spécifier la position des children en utilisant des coordonnées x et y explicites. Cela permet de contrôler avec précision la position de chaque enfant.

L'exemple suivant montre deux enfants positionnés en utilisant des positions x et y, relatives à la position du Canvas lui-même:

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Canvas backgroundColor="white" borderStyle="solid">
		<mx:Label x="20" y="50" text="Label Position(20,50)"/>
		<mx:TextInput x="170" y="50" text="TextInput Position(170,50)"/>
	</mx:Canvas>
</mx:Application>

Contrairement à d'autres conteneurs où les règles de positionnement fixent les positions des enfants, le conteneur Canvas n'empêche pas le chevauchement de deux enfants. Si les positions des enfants ont besoin d'être modifiées, vous pouvez le faire en fixant les valeurs de x et y à l'exécution.

Utilisation des contraintes (top, right, left, bottom, horizontalCenter, verticalCenter)

Un Canvas permet aussi de créer une mise en page basée sur des contraintes. Les contraintes permettent de disposer les enfants à des positions prédéfinies relatives à leur parent. Cela permet de donner une certaine flexibilité de positionnement des enfants tout en permettant un repositionnement. Pour positionner des enfants en utilisant des contraintes, vous avez plusieurs propriétés pour les enfants: top, right, left, bottom, horizontalCenter et verticalCenter, avec une valeur basée sur la position du parent en relation avec l'enfant.
Par exemple, si vous fixez la propriété "right" à 10, vous allez positionnez l'enfant à 10 pixels du bord droit du conteneur. Quand le conteneur est redimensionné, l'enfant se repositionne tout seul à 10 pixels du bord droit.

L'exemple suivant montre deux boutons positionnés en utilisant les contraintes. Un est positionné à 10 px du coins en bas à droite, et l'autre est placé à 10 pixels du bord droit. Les deux boutons seront repositionnés quand le navigateur sera redimensionné (a essayer dans un navigateur vide, celui du blog ne redimensionnera pas le SWF):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Canvas height="100%" width="100%">
		<mx:Button right="10" label="Bouton à 10px du bord droit"/>
		<mx:Button right="10" bottom="10" label="Bouton à 10px du coin bas droit"/>
	</mx:Canvas>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

Notez que la hauteur/largeur du Canvas est fixée à 100%. C'est pour qu'il occupe tout l'espace disponible