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

Flex Layout – Positionnement dans un Container Form (Form, FormHeading, FormItem)

Le conteneur Form est utilisé pour mettre en page des formulaires comme ceux que l'on voit sur les pages web classiques, et ils contiennent des en-têtes et des champs d'entrée utilisateur (input controls). Le conteneur Form, comme le conteneur Grid, est associé à des composants. Vous pouvez reproduire la même mise en page avec des conteneurs usuels, mais pour un formulaire classique, le composant Flex <mx:Form> est idéal.

Les composants liés à Form sont FormHeading (<mx:FormHeading>) et FormItem (<mx:FormItem>):

•  FormHeading: Vous pouvez utiliser FormHeading pour placer un texte d'en-tête au dessus d'un groupe de FormItem à l'intérieur d'un Form. Vous pouvez préciser le texte par la propriété "label" de FormHeading. Vous pouvez utiliser plusieurs FormHeading dans un formulaire et vous devrez les placer avant les champs concernés. Vous pouvez contrôler l'espacement entre les enfants de FormHeading en utilisant les propriétés paddingTop, paddingRight, et paddingLeft.
• FormItem: Vous devez utiliser un FormItem quand un conteneur Form a besoin de contenir des items comme des champs texte ou des ComboBox (liste déroulante). De multiples instances de FormItem peuvent être placées à l'intérieur d'un Form. FormItem implémente des règles de positionnement de type Box, ce qui permet de placer plusieurs enfants dans un FormItem et l'on a accès à une propriété "direction" comme pour les composants type Box. Enfin, FormItem expose une propriété label, qui permet de placer le texte à gauche de la ligne d'un Form.

Voici un exemple de formulaire simple en MXML. Notez comme le composant mx:Form place et dimensionne automatiquement tous ses children. C'est l'aspect pratique du container Form:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Form>
		<mx:FormHeading label="Informations Personnelles"/>
		<mx:FormItem label="Nom, Prénom" direction="horizontal">
			<mx:TextInput id="lastName"/>
			<mx:TextInput id="firstName"/>
		</mx:FormItem>
		<mx:FormItem label="e-mail">
			<mx:TextInput id="email"/>
		</mx:FormItem>
		<mx:FormHeading label="Bug Constaté"/>
		<mx:FormItem label="Version">
			<mx:TextInput id="version"/>
		</mx:FormItem>
		<mx:FormItem label="Commentaire">
			<mx:TextArea id="comment" width="330" height="100"/>
		</mx:FormItem>
	</mx:Form>
</mx:Application>

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

Composant Flex - TextInput avec message quand le champ est vide (prompt)