1. Accueil
2. Pôle de développement
3. Pôle de développement Flex
4. Flex en un clin d'œil

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 conteneurs

Un conteneur délimite une zone rectangulaire sur la surface de dessin d'Adobe® Flash® Player. Vous y définissez les composants (contrôles et conteneurs) qu'il est censé inclure. Ces composants sont alors considérés comme ses enfants. Adobe Flex offre une multitude de conteneurs, des boîtes simples aux panneaux et formulaires en passant par les accordéons ou les navigateurs à onglets qui permettent d'explorer les conteneurs enfants.

La classe Container est la classe de base de toutes les classes de conteneurs Flex. Les conteneurs qui complètent la classe Container ajoutent leurs propres fonctionnalités pour agencer des composants enfants.

À la racine d'une application Flex, un conteneur unique intitulé Application représente toute la surface de dessin de Flash Player. Il inclut tous les autres conteneurs et composants.

• Utilisation de conteneurs d'agencement
• Utilisation de conteneurs de navigation

Utilisation de conteneurs d'agencement

Les conteneurs d'agencement servent à agencer une interface utilisateur. Le tableau ci-après décrit les conteneurs d'agencement utilisés dans l'exemple suivant :

	Nom	Description
	Panel	Le conteneur Panel affiche une barre de titre, une légende, une bordure et ses enfants. Par défaut, il agence les composants enfants verticalement, mais vous pouvez changer cet agencement en attribuant à la propriété d'agencement la valeur "absolute" ou "horizontal".
	HDividedBox	Le conteneur HDividedBox agence les composants enfants horizontalement, quasiment de la même façon qu'un conteneur HBox, à ceci près qu'il insère un séparateur ajustable entre les enfants. Le conteneur VDividedBox agence les composants enfants verticalement et insère également un séparateur ajustable entre les enfants.
	Tile	Le conteneur Tile agence ses enfants sur plusieurs lignes ou colonnes.
	Form	Le conteneur Form agence ses enfants sous forme de formulaire standard.
	ApplicationControlBar	Le conteneur ApplicationControlBar contient des composants qui fournissent des commandes de navigation et d'application et sont ancrables sur le bord supérieur d'un conteneur Application.
	ControlBar	Le conteneur ControlBar place des contrôles sur le bord inférieur d'un conteneur Panel ou TitleWindow.

Par ailleurs, l'exemple utilise le contrôle Spacer, qui n'est pas un conteneur, pour faciliter l'agencement de l'interface.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="525" height="400"
    viewSourceURL="src/LayoutContainers/index.html"
>
    <mx:ApplicationControlBar dock="true">
        <mx:Label 
            text="ApplicationControlBar" 
            fontFamily="Verdana" fontWeight="bold" fontSize="12"
        />
        <mx:Spacer width="100%"/>
        <mx:Button label="Log out"/>
    </mx:ApplicationControlBar>

    <mx:Panel 
        layout="horizontal" title="Panel"
        width="100%" height="100%"
    >
        <mx:HDividedBox width="100%" height="100%">
            <mx:Panel 
                width="100%" height="100%" 
                headerHeight="0" borderStyle="solid" shadowDistance="0"
            >
                <mx:Label text="Panel (without header)" fontWeight="bold" />                 
                <mx:Form>
                    <mx:FormHeading label="First form" />    
                    <mx:FormItem label="Name:">
                        <mx:TextInput width="100"/>
                    </mx:FormItem>
                    <mx:FormItem label="Email:">
                        <mx:TextInput width="100"/>
                    </mx:FormItem>
                </mx:Form>
            </mx:Panel>

            <mx:Panel 
                width="100%" height="100%" 
                headerHeight="0" borderStyle="solid" shadowDistance="0"
            >                
                <mx:Label text="Panel (without header)" fontWeight="bold" />
                <mx:Form>
                    <mx:FormHeading label="Second form" />    
                    <mx:FormItem label="Name:">
                        <mx:TextInput width="100"/>
                    </mx:FormItem>
                    <mx:FormItem label="Email:">
                        <mx:TextInput width="100"/>
                    </mx:FormItem>
                </mx:Form>
            </mx:Panel>
        </mx:HDividedBox>
        
        <mx:ControlBar horizontalAlign="center">
            <mx:Label text="ControlBar in Panel" fontWeight="bold"/>
            <mx:Spacer width="100%"/>
            <mx:Button label="Prev"/>
            <mx:Button label="Finish"/>    
        </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.

Retour au début

Utilisation de conteneurs de navigation

Les conteneurs de navigation gèrent les déplacements de l'utilisateur, ou navigation, entre plusieurs enfants, qui sont eux-mêmes des conteneurs.

Les enfants directs d'un conteneur de navigation doivent être des conteneurs d'agencement ou de navigation. Vous ne pouvez pas imbriquer directement un contrôle dans un navigateur ; les contrôles doivent être les enfants d'un conteneur enfant du conteneur de navigation.

Le tableau ci-après décrit les conteneurs de navigation utilisés dans l'exemple suivant :

	Nom	Description
	Accordion	Le conteneur Accordion définit une séquence de panneaux enfants, mais n'affiche qu'un seul panneau à la fois. Pour naviguer dans un conteneur, l'utilisateur clique sur le bouton de navigation qui correspond au panneau enfant auquel il souhaite accéder. Les conteneurs Accordion permettent aux utilisateurs d'accéder aux panneaux enfants dans n'importe quel ordre pour avancer ou reculer dans le formulaire.
	TabNavigator	Un conteneur TabNavigator crée et gère un ensemble d'onglets qui permettent de naviguer parmi ses enfants. Les enfants d'un conteneur TabNavigator sont eux-mêmes des conteneurs. Le conteneur TabNavigator crée un onglet pour chaque enfant. Quand l'utilisateur sélectionne un onglet, le conteneur TabNavigator affiche l'enfant associé.
	ViewStack	Un conteneur de navigation ViewStack est constitué d'une collection de conteneurs enfants empilés, avec un seul conteneur visible, ou actif, à la fois. Le conteneur ViewStack n'est pas un mécanisme intégré qui permet de changer de conteneur actif. Vous devez utiliser un contrôle LinkBar, TabBar, ButtonBar ou ToggleButtonBar ou créer la logique vous-même dans ActionScript pour changer d'enfant actif.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    width="550" height="550"
    viewSourceURL="src/NavigationContainers/index.html"
>
    <mx:Panel 
        layout="absolute" 
        left="10" top="10" right="10" bottom="10" title="Navigators"
    >
        <mx:Accordion width="47.5%" height="200" top="36" left="10">
            <mx:Canvas label="Navigation button 1" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 1"/>
            </mx:Canvas>
            <mx:Canvas label="Navigation button 2" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 2"/>
            </mx:Canvas>
            <mx:Canvas label="Navigation button 3" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 3"/>
            </mx:Canvas>
        </mx:Accordion>
        
        <mx:TabNavigator right="10" width="47.5%" height="200" y="36">
            <mx:Canvas label="Tab 1" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 1"/>
            </mx:Canvas>
            <mx:Canvas label="Tab 2" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 2"/>
            </mx:Canvas>
            <mx:Canvas label="Tab 3" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 3"/>
            </mx:Canvas>
        </mx:TabNavigator>

        <mx:ViewStack 
            id="myViewStack" 
            width="47.5%" height="200" right="10" bottom="10"
            borderColor="#000000" borderStyle="solid" 
        >
            <mx:Canvas label="View 1" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 1"/>
            </mx:Canvas>
            <mx:Canvas label="View 2" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 2"/>
            </mx:Canvas>
            <mx:Canvas label="View 3" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 3"/>
            </mx:Canvas>
        </mx:ViewStack>
        
        <!-- Labels for the various controls -->
        <mx:Label x="10" y="252" text="ButtonBar"/>
        <mx:Label x="10" y="10" text="Accordion"/>
        <mx:Label x="262.5" y="10" text="TabNavigator"/>
        <mx:Label x="262.5" y="252" text="ViewStack"/>
        <mx:Label x="10" y="308" text="ToggleButtonBar"/>
        <mx:Label x="10" y="364" text="LinkBar"/>
        <mx:Label x="10" y="424" text="TabBar"/>

        <!-- 
            All these navigators use the same dataProvider,
            namely, the myViewStack ViewStack instance.
            Changing the selected view in one will affect
            all the others also.  
        -->        
        <mx:ButtonBar x="10" y="278" dataProvider="{myViewStack}" />
        <mx:ToggleButtonBar x="10" y="334" dataProvider="{myViewStack}" />
        <mx:LinkBar x="10" y="390" dataProvider="{myViewStack}" />
        <mx:TabBar x="10" y="444" dataProvider="{myViewStack}" />

    </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.

Retour au début

---

Pour plus d'informations

Pour plus d'informations sur l'utilisation des conteneurs d'agencement, reportez-vous aux sections "Introducing Containers", "Using the Application Container", "Using Layout Containers" et "Using Navigator Containers" du document Flex 2 Developer's Guide*.

À propos de l'auteur