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 : Prise en main

Sommaire

• Programmation avec MXML et ActionScript
• Création d'une première application
• Gestion des événements
• Positionnement et disposition de composants Flex
• Incorporation de ressources applicatives

---

Positionnement et agencement de composants Flex

La plupart des conteneurs Flex utilisent un ensemble prédéfini de règles pour positionner automatiquement tous les composants enfants définis. Si vous utilisez un conteneur Canvas, Application ou Panel dont la propriété layout a la valeur "absolute", vous pouvez spécifier des positions absolues pour ses enfants ou utiliser un agencement à base de contraintes.

Il existe trois façons de positionner vos composants dans une application Flex :

• Positionnement automatique
• Positionnement absolu
• Agencement à base de contraintes

Positionnement automatique

Dans la plupart des cas, Flex positionne automatiquement les enfants du conteneur selon ses propres règles d'agencement (direction, remplissage et espacement des enfants).

Pour les conteneurs qui utilisent le positionnement automatique, la définition directe de la propriété x ou y de leurs composants enfants ou l'appel de la méthode move() est sans effet, ou n'a qu'un effet temporaire, car les calculs d'agencement positionnent les composants selon le résultat obtenu et non selon la valeur spécifiée.

Vous pouvez contrôler certains aspects de l'agencement en spécifiant des propriétés de conteneur. Voici les propriétés les plus couramment utilisées :

• layout: les valeurs possibles sont "horizontal", "vertical" ou "absolute". Lorsqu'il se voit attribuer la valeur "horizontal", le conteneur agence ses enfants sur une ligne. Lorsqu'il se voit attribuer la valeur "vertical", le conteneur agence ses enfants en colonne. Pour plus d'informations sur le paramètre "absolute" , reportez-vous aux sections sur le positionnement absolu et l'agencement à base de contraintes.
• horizontalAlign: les valeurs possibles sont "left", "center" ou "right".
• verticalAlign: les valeurs possibles sont "top", "middle" ou "bottom".

Cet exemple remplace les paramètres par défaut de "left" par la propriété horizontalAlign et de "top" par la propriété verticalAlign du conteneur Application pour spécifier "center" et "middle", respectivement.

Cet exemple remplace également le paramètre par défaut de "vertical" par la propriété layout du conteneur Panel de sorte que les contrôles Label et Button s'affichent horizontalement. Les propriétés padding du conteneur Panel définissent la marge du conteneur en pixels.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutAutomatic/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="380" height="150"

>
    <mx:Panel 
        title="My Application" 
        paddingTop="10" paddingBottom="10" 
        paddingLeft="10" paddingRight="10" 
        layout="horizontal" verticalAlign="middle"
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button 
            id="myButton" label="Click Me!" 
            click="myLabel.text = 'Hello, World!';" 
        />

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

Positionnement absolu

Trois conteneurs gèrent le positionnement absolu :

• Les contrôles Application et Panel utilisent le positionnement absolu si vous spécifiez la propriété layout comme "absolute".
• Le conteneur Canvas utilise toujours le positionnement absolu.

Avec le positionnement absolu, vous spécifiez la position du contrôle enfant en utilisant ses propriétés x et y ou vous spécifiez un agencement à base de contraintes. Sinon, Flex place l'enfant à la position 0,0 du conteneur parent. Lorsque vous spécifiez les coordonnées x et y, Flex repositionne uniquement les contrôles lors de la modification des valeurs des propriétés.

Cet exemple attribue à la propriété layout du conteneur Panel la valeur "absolute". Il définit ensuite les propriétés x et y des contrôles Label et Button de façon à ce qu'ils se chevauchent.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutAbsolute/index.html"
    horizontalAlign="center" verticalAlign="middle"
    width="280" height="170"

>
    <mx:Panel 
        title="My Application" layout="absolute"
        width="220" height="90" 
    >
        <mx:Label 
            id="myLabel" 
            x="10" y="10" width="180" 
            fontWeight="bold" fontSize="24"
        />

        <mx:Button 
            id="myButton" 
            x="60" y="10" 
            label="Click Me!" 
            click="myLabel.text = &apos;Hello, World!&apos;;" 
        />

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

Agencement à base de contraintes

L'agencement à base de contraintes vous permet de gérer simultanément la taille et la position des composants enfants en ancrant leurs côtés ou leur centre à un endroit précis par rapport au conteneur.

Vous pouvez utiliser l'agencement à base de contraintes pour déterminer la position et la taille des enfants directs d'un conteneur qui gère le positionnement absolu.

Vous spécifiez les contraintes en utilisant les propriétés de style top, bottom, left, right, horizontalCenterou verticalCenter du composant enfant.

Ancrage des bords d'un composant

Vous pouvez ancrer un ou plusieurs bords d'un composant à une distance donnée (en pixels) du bord correspondant de son conteneur. Le bord de l'enfant ancré reste à la même distance du bord du parent lorsque le conteneur est redimensionné.

Les propriétés de style top, bottom, leftet right définissent les distances entre les côtés des composants et les côtés du conteneur correspondant en pixels.

Les bords inférieur et droit du contrôle Button de l'exemple ci-après sont ancrés à 10 pixels des bords du conteneur Panel dans lequel il se trouve.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraintsBottomRight/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="360" height="200"

>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >
        <mx:Button 
            id="myButton" 
            label="A button" 
            bottom="10" 
            right="10"
     
		/>

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

Étirement d'un composant

Si vous ancrez les deux bords dans une dimension, par exemple haut et bas, le composant est redimensionné si le conteneur l'est. Les quatre bords du contrôle Button de l'exemple ci-après sont ancrés à 10 pixels des bords du conteneur Panel dans lequel il se trouve.

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraintsEdges/index.html"
    horizontalAlign="center" verticalAlign="middle"
    width="360" height="200"

>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >
        <mx:Button 
            id="myButton" 
            label="A button" 
            top="10"
            bottom="10" 
            left="10"
            right="10"
			

			/>

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

Ancrage du centre d'un composant

Vous pouvez également ancrer le centre horizontal ou vertical (ou les deux) d'un composant à une distance donnée (en pixels) du centre du conteneur. L'enfant n'est pas redimensionné dans la dimension spécifiée, sauf si vous utilisez également le dimensionnement basé sur un pourcentage.

Les styles horizontalCenter et verticalCenter spécifient la distance entre le point central du composant et le centre du conteneur dans la direction spécifiée. Une valeur négative déplace le composant vers la gauche ou le haut à partir du centre.

Les styles horizontalCenter et verticalCenter définissent le décalage d'un contrôle par rapport au centre d'un conteneur en pixels. Les deux styles du contrôle Button de l'exemple ci-après ont la valeur 0 (zéro) afin qu'il soit parfaitement centré dans le conteneur Panel.

Exemple

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraintsCenter/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="360" height="200"
>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >

        <mx:Button 
            id="myButton" 
            label="A button" 
            verticalCenter="0"
            horizontalCenter="0"
           />
    </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.

Exemple plus complexe

L'exemple ci-après utilise l'agencement à base de contraintes pour centrer le contrôle Label et étirer le contrôle Button sur presque toute la longueur du conteneur Panel. Attribuez à la propriété top du contrôle Label la valeur 10 pour que ce dernier apparaisse à 10 pixels du haut du conteneur Panel. Attribuez à sa propriété horizontalCenter la valeur 10 pour le centrer parfaitement dans le conteneur Panel.

Attribuez aux propriétés left et right du contrôle Button la valeur 10 pour étirer ce dernier jusqu'à 10 pixels de chaque bord du conteneur Panel. Attribuez à sa propriété bottom la valeur 10 pour que son bord inférieur apparaisse à 10 pixels du bord inférieur du conteneur Panel.

Le schéma ci-après présente les effets des propriétés définies visuellement. Les contrôles d'agencement visuel font partie du mode Création de Flex Builder 2.

Une taille déterminée par un agencement à base de contraintes annule et remplace les spécifications de taille explicites ou basées sur des pourcentages. Si vous spécifiez les propriétés de style left et right , par exemple, la largeur à base de contraintes obtenue annule et remplace toute largeur définie par une propriété width ou percentWidth .

Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraints/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="360" height="200"

>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >
        <mx:Label 
            id="myLabel" 
            fontWeight="bold" 
            fontSize="24" 
            top="10" 
            horizontalCenter="0"
        />

        <mx:Button 
            id="myButton" 
            label="Click Me!" 
            click="myLabel.text = &apos;Hello, World!&apos;;" 
            bottom="10" 
            height="22" 
            left="10"
            right="10" 
           />

    </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'incorporation des ressources, reportez-vous à la section "Sizing and Positioning Components" du document Flex 2 Developer's Guide*.

À propos de l'auteur