Flex en un clin d'œil : Créer une interface utilisateur simple
Sommaire
- Utilisation de contrôles
- Utilisation de conteneurs
- Mise en forme de composants
- Ajout d'effets
- Création d'états
- Définition de transitions d'état
- Utilisation d'info-bulles
- Contrôle du curseur
Utilisation de contrôles
Dans le modèle de conception model-view d'Adobe® Flex™, les composants de l'interface utilisateur représentent la vue. Le langage MXML gère deux types de composants d'interface utilisateur : les contrôles et les conteneurs. Les conteneurs sont des zones rectangulaires de l'écran qui contiennent des contrôles et d'autres conteneurs. Les contrôles sont des éléments de formulaire du type boutons, zones de texte et zones de liste.
Bien qu'il existe de nombreux types de contrôles Flex, ce guide de prise en main rapide décrit les trois principaux : les contrôles de type texte, les contrôles de type bouton et les contrôles de type liste.
- Utilisation des contrôles de type texte
- Utilisation des contrôles de type bouton
- Utilisation des contrôles de type liste
Utilisation des contrôles de type texte
Les contrôles de type texte servent à afficher du texte et/ou à recevoir du texte saisi par d'autres utilisateurs.
Les contrôles de type texte disponibles dans Flex s'intitulent Label, Text, TextArea, TextInput et RichTextEditor. Les composants TextInput et TextArea peuvent tous les deux afficher du texte et accepter la saisie des utilisateurs, tandis que les contrôles Label et Text servent uniquement à afficher du texte.
Les contrôles Text et TextArea peuvent afficher du texte sur plusieurs lignes, tandis que les contrôles Label et TextInput affichent du texte sur une seule ligne.
Le contrôle RichTextEditor permet aux utilisateurs de saisir, de modifier et de mettre en forme du texte. Les utilisateurs appliquent la mise en forme textuelle et les liens URL à l'aide de sous-contrôles situés au bas du contrôle RichTextEditor.
Tous les composants de type texte possèdent une propriété text qui vous permet de définir le texte à afficher.
Exemple
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/ControlsTextBased/index.html" layout="horizontal" width="380" height="320" horizontalAlign="center" verticalAlign="middle" > <mx:Panel title="Leave a comment" paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" > <mx:Text text="Fill out this form to leave us a comment:" width="100%" /> <mx:Label text="Name:" /> <mx:TextInput id="userName" /> <mx:Label text="Email:" /> <mx:TextInput id="userEmail" /> <mx:Label text="Comment:" /> <mx:TextArea id="userComment" width="100%" /> </mx:Panel> </mx:Application>
Résultat
This content requires Flash
Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.
Utilisation des contrôles de type bouton
La famille de composants Button inclut les contrôles Button, LinkButton, CheckBox, RadioButton et PopupButton.
Le contrôle Button est un bouton rectangulaire fréquemment utilisé. Il donne l'impression de pouvoir être enfoncé et présente un libellé, une icône ou les deux. Vous pouvez éventuellement spécifier des habillages graphiques pour chacun des états du contrôle Button. Vous pouvez créer un contrôle Button normal ou un contrôle Button à bascule. Un contrôle Button normal reste enfoncé tant que vous appuyez sur le bouton de la souris après l'avoir sélectionné. Un contrôle Button à bascule reste enfoncé jusqu'à ce que vous le sélectionniez à nouveau.
Les contrôles Button utilisent généralement des écouteurs d'événements pour exécuter une action lorsque l'utilisateur les sélectionne. Lorsqu'un utilisateur clique sur un contrôle Button et l'active, il transmet un événement click et un événement buttonDown .
Le contrôle LinkButton crée un lien hypertexte d'une seule ligne qui peut prendre en charge une icône. Il s'agit en fait d'un contrôle Button sans bordure. Vous pouvez utiliser un contrôle LinkButton pour ouvrir une URL dans un navigateur web.
Le contrôle CheckBox est un contrôle graphique couramment utilisé qui peut être coché ou non (vide). Vous pouvez utiliser des contrôles CheckBox pour regrouper des valeurs vraies ou fausses non mutuellement exclusives. Vous pouvez ajouter un libellé à un contrôle CheckBox et le placer à gauche, à droite, au-dessus ou au-dessous de la case à cocher. Flex coupe le libellé en fonction de la taille du contrôle CheckBox.
Le contrôle RadioButton permet à l'utilisateur de sélectionner une option parmi une série d'options mutuellement exclusives. Un contrôle RadioButtonGroup est constitué de plusieurs contrôles RadioButton portant le même nom de groupe. Le groupe peut faire référence à un groupe créé par la balise <mx:RadioButtonGroup> . L'utilisateur ne sélectionne qu'un seul membre du groupe à la fois. Le choix d'un membre non sélectionné du groupe désactive le contrôle RadioButton actuellement sélectionné au sein du groupe.
Le contrôle PopUpButton ajoute une interface de contrôle contextuelle flexible à un contrôle Button. Il contient un bouton principal et un bouton secondaire, appelé bouton contextuel, qui fait apparaître un objet UIComponent lorsqu'un utilisateur clique sur le bouton contextuel. Le contrôle PopUpButton sert très souvent à ouvrir un contrôle List ou Menu qui change la fonction et le libellé du bouton principal.
Exemple
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/ControlsButtonBased/index.html" layout="absolute" width="460" height="400" > <mx:Script> <![CDATA[ import flash.events.MouseEvent; import mx.controls.Alert; private const NL:String = "\r"; private function submitButtonClickHandler (event:MouseEvent):void { var userDetails:String = "You submitted the following details:" + NL + NL; userDetails += "Name: " + userName.text + NL; userDetails += "Email: " + userEmail.text + NL; userDetails += "Hide email? " + (hideEmail.selected ? "Yes" : "No") + NL + NL; userDetails += "Comment:" + NL + NL + userComment.text; Alert.show (userDetails); } private function emailButtonClickHandler (event:MouseEvent):void { var msg:String = "You can use the navigateToURL() method to open a URL" msg += " using a call similar to the following:\r\r"; msg += "navigateToURL (new URLRequest ('mailto:comments@somewhere.com'));"; Alert.show (msg); } ]]> </mx:Script> <mx:Panel title="Leave a comment" left="10" top="10" right="10" bottom="10" layout="absolute" > <mx:Text text="Fill out this form to leave us a comment:" width="250" x="10" y="10" fontWeight="bold" /> <mx:Label text="Name:" x="10" y="38"/> <mx:TextInput id="userName" y="36" right="10" left="90"/> <mx:Label text="Email:" x="10" y="68"/> <mx:TextInput id="userEmail" y="66" right="10" left="90"/> <mx:Label text="Comment:" x="10" y="129"/> <mx:TextArea id="userComment" left="10" right="10" height="109" bottom="40"/> <mx:CheckBox id="hideEmail" y="103" left="90" label="Hide my email address" selected="true" /> <mx:LinkButton id="emailButton" y="272" horizontalCenter="0" label="Having trouble? Email us!" click="emailButtonClickHandler(event);" /> <mx:ControlBar x="120" y="258" horizontalAlign="center"> <mx:Button id="submitButton" label="Submit" click="submitButtonClickHandler(event);" /> </mx:ControlBar> </mx:Panel> </mx:Application>
Résultat
Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.
Utilisation des contrôles de type liste
Les contrôles de type liste complètent la classe ListBase à un point donné de leur hiérarchie d'héritage. Ils incluent les contrôles ComboBox, List, HorizontalList, DataGrid, Tile, Menu et Tree.
Plusieurs composants de Flex Framework, y compris les contrôles de type liste, représentent les données d'un fournisseur de données, objet contenant les données requises par le contrôle. Par exemple, le fournisseur de données d'un contrôle Tree détermine la structure de l'arbre et toutes les données associées affectées à chaque nœud d'arbre, et le fournisseur de données d'un contrôle ComboBox détermine les éléments de sa liste déroulante.
Remarque : Les données de plusieurs contrôles standard, notamment les contrôles ColorPicker et MenuBar, proviennent également d'un fournisseur de données. Les contrôles qui affichent des données applicatives sont parfois qualifiés de contrôles de fournisseur de données. Pour plus d'informations sur l'utilisation des fournisseurs de données, reportez-vous à la section "Using Data Providers and Collections" du document Flex 2 Developer's Guide*.
Il existe deux façons de définir le fournisseur de données d'un composant. La première consiste à spécifier le fournisseur de données en ligne dans la balise MXML en définissant un composant Array ou Collection comme balise enfant d'un contrôle acceptant un fournisseur de données. Cette méthode a l'avantage d'être rapide à mettre en œuvre et peut être utilisée avec des données statiques et à des fins de prototypage. La seconde méthode consiste à utiliser des liaisons de données pour lier un contrôle à un composant Array ou Collection défini à l'aide d'ActionScript. Elle permet d'afficher les données obtenues par les appels côté serveur et d'établir des liens avec des structures de données créées dans ActionScript. C'est également la plus évolutive des deux.
L'exemple ci-après présente ces deux méthodes.
Exemple
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/ControlsListBased/index.html" layout="horizontal" width="460" height="360" > <mx:Script> <![CDATA[ import flash.events.MouseEvent; import mx.controls.Alert; import mx.collections.ArrayCollection; private const NL:String = "\r"; // A data provider created by using ActionScript [Bindable] private var subscriptions:ArrayCollection = new ArrayCollection ( [ {data:0, label:"Print"}, {data:1, label:"Website"}, {data:2, label:"RSS (text)"}, {data:3, label:"Podcast"} ] ); private function submitButtonClickHandler(event:MouseEvent):void { var userDetails:String = "You submitted the following details:" + NL + NL; userDetails += "Name: " + userName.text + NL; userDetails += "Email: " + userEmail.text + NL; userDetails += "Site rating: " + userRating.selectedItem.label + NL + NL; userDetails += "Subscriptions:"; var selectedSubscriptionItems:Array = userSubscriptions.selectedItems; for ( var i:String in selectedSubscriptionItems) { // Display the selected subscriptions, separated by commas userDetails += selectedSubscriptionItems[i].label + ", "; } // Remove the last comma and space from the string we're displaying userDetails = userDetails.substring(0, userDetails.length-2); Alert.show ( userDetails ); } ]]> </mx:Script> <mx:Panel title="Feedback form" width="99%" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10" layout="vertical" > <mx:Text text="Thank you for giving us feedback:" width="100%" fontWeight="bold" /> <mx:Form width="100%"> <mx:FormItem label="Name:" width="100%"> <mx:TextInput id="userName" /> </mx:FormItem> <mx:FormItem label="Email:" width="100%"> <mx:TextInput id="userEmail" /> </mx:FormItem> <mx:FormItem label="Site rating:" width="100%"> <mx:ComboBox id="userRating" width="100%"> <!-- An inline data provider --> <mx:Array> <mx:Object data="0" label="Zero" /> <mx:Object data="1" label="One" /> <mx:Object data="2" label="Two" /> <mx:Object data="3" label="Three" /> <mx:Object data="4" label="Four" /> </mx:Array> </mx:ComboBox> </mx:FormItem> <mx:FormItem label="Subscriptions:" width="100%"> <mx:List id="userSubscriptions" rowCount="3" allowMultipleSelection="true" width="100%" dataProvider="{subscriptions}" /> </mx:FormItem> </mx:Form> <mx:ControlBar x="120" y="258" horizontalAlign="center"> <mx:Button id="submitButton" label="Submit" click="submitButtonClickHandler(event);" /> </mx:ControlBar> </mx:Panel> </mx:Application>
Résultat
Pour afficher la source complète, cliquez avec le bouton droit de la souris sur l'application Flex et sélectionnez View Source dans le menu contextuel.
Pour plus d'informations
Pour plus d'informations sur l'incorporation des ressources, reportez-vous à la section "Using Controls" du document Flex 2 Developer's Guide*.
À propos de l'auteur
Aral Balkan est à la fois acteur, chanteur, directeur de plusieurs équipes de développement, concepteur d'interfaces utilisateur, architecte d'applications Internet riches et responsable d'OSFlash.org*, groupe d'utilisateurs Macromedia à Londres, et d'Ariaware*, sa propre société. Il aime parler des modèles de conception et rédiger des articles pour des livres et des magazines. Il est également le créateur d'Arp*, le framework RIA Open Source de la plate-forme Flash. Aral est quelqu'un d'opiniâtre et de passionné. Il sourit beaucoup et peut même mâcher du chewing-gum en marchant.
