Conteneurs d'agencement

Demander un devis
Je souhaite télécharger le programme ou imprimer le programme
  • Imprimer
tutoriel_vers_formation_Flex

Dans un chapitre précédent, nous avions découvert deux conteneurs :

  • Application, qui est le conteneur racine de toute l'application Flex et dans lequel sont inclus tous les autres composants,
  • Panel, un conteneur classique qui peut inclure une barre de titre et une bordure

Ces deux conteneurs possèdent par défaut un positionnement absolu. Nous devons donc positionner manuellement les composants fils, en définissant les coordonnées de chaque élément, un layout commun, ou encore les contraintes d'agencement.

 

Mais il existe certains conteneurs dont le positionnement est prédéfini et qui permettent ainsi de s'affranchir des problématiques d'agencement : les conteneurs d'agencement.

 

VGroup et HGroup

 

Les agencements les plus couramment utilisés consistent à aligner les éléments les uns en dessous des autres de façon régulière ou les uns à côté des autres.

Nous l'avons vu au chapitre précédent, le positionnement automatique permet de spécifier ce type d'alignement à un conteneur en positionnement absolu par défaut :

<s:layout>
      <s:VerticalLayout />
</s:layout>

 

Pour que nous n'ayons pas à nous en préoccuper, Flex met à notre disposition des conteneurs spécifiques qui implémentent par défaut ces deux dispositions: les VGroup et les HGroup

 

Un agencement vertical pourrait donc être obtenu automatiquement grâce au code suivant :

<?xml version="1.0" encoding="utf-8"?>
<s:Application
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="700" height="550"
      >
      <!-- Disposition verticale avec centrage horizontalement -->
      <s:layout>
            <s:VerticalLayout horizontalAlign="center" paddingTop="20" gap="10"/>
      </s:layout>
 
      <s:Panel title="Premier Formulaire" width="540" height="400" >
 
            <!-- Utilisation d'un VGroup pour disposer les éléments -->
            <s:VGroup paddingTop="20" paddingLeft="60" gap="10" >
                  <s:Label text="Nom" />
                  <s:TextInput id="nomSaisi" />
 
                  <s:Label text="Mot de passe" />
                  <s:TextInput id="passSaisi"/>
 
                  <s:Label text="Commentaire" />
                  <s:TextArea id="commentaireSaisi" width="200" height="40"/>
 
                  <s:Button label="Valider" />
                  <s:Button label="RAZ" />
            </s:VGroup>      
      </s:Panel>
</s:Application>

La ligne 16 indique que les éléments devront être disposés les uns en dessous des autres, en respectant une marge de 20 pixels en haut et de 60 à gauche. La propriété gap = "10" précise que les éléments devront de plus être espacés de 10 pixels les uns des autres.

L'exécution donne alors l'affichage suivant :

conteneurs

 

Pour aligner horizontalement chacun des champs de saisie avec son label, nous pourrions ajouter dans le VGroup des HGroup, dont le comportement est similaire au VGroup mais pour une disposition horizontale, comme illustré ci-dessous:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
      xmlns:fx="<a href="http://ns.adobe.com/mxml/2009">http://ns.adobe.com/mxml/2009</a>"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="700" height="550"
      >
      <!-- Disposition verticale avec centrage horizontalement -->
      <s:layout>
            <s:VerticalLayout horizontalAlign="center" paddingTop="20" gap="10"/>
      </s:layout>
 
      <s:Panel title="Premier Formulaire" width="540" height="400" >
 
            <!-- Utilisation d'un VGroup pour disposer les éléments verticalement -->
            <s:VGroup paddingTop="20" paddingLeft="60" gap="10" >
                  <!-- Utilisation de HGroup pour disposer horizontalement le label
                         et le champ de saisie qui lui correspond -->
                  <s:HGroup verticalAlign="middle" gap="10" width="100%">   
                        <s:Label text="Nom" />
                        <s:TextInput id="nomSaisi" width="100%"/>
                  </s:HGroup>
 
                  <s:HGroup verticalAlign="middle" gap="10" width="100%">   
                        <s:Label text="Mot de passe" />
                        <s:TextInput id="passSaisi" width="100%"/>
                  </s:HGroup>
 
                  <s:HGroup verticalAlign="middle" gap="10">    
                        <s:Label text="Commentaire" />
                        <s:TextArea id="commentaireSaisi" width="200" height="40"/>
                  </s:HGroup>
 
                  <s:HGroup verticalAlign="middle" gap="10">    
                        <s:Button label="Valider" />
                        <s:Button label="RAZ" />
                  </s:HGroup>
            </s:VGroup>    
      </s:Panel>
</s:Application>

 

Toutefois, cette technique alourdit très vite le code et rend fastidieuse la relecture. C'est pourquoi il existe un autre conteneur, bien plus adapté à la disposition que nous cherchons à mettre en place : le conteneur Form.

 

Le conteneur Form

 

Le conteneur Form est précisément prévu pour les formulaires. Il contient un composant titre, nommé FormHeading, et des composants de type FormItem possédant un label et une zone de saisie (qui peut être un champ texte, mais également des cases à cocher, une ligne à sélectionner dans une liste déroulante, une date à sélectionner dans un calendrier, etc.).

 

Par défaut, le FormHeading est centré horizontalement et les FormItems sont tous alignés les uns en dessous des autres. 

 

Notre formulaire pourrait donc être implémenté ainsi :

<?xml version="1.0" encoding="utf-8"?>
<s:Application
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="500" height="200" xmlns:perso="fr.mistra.perso.*"
      >
 
      <mx:Form paddingTop="20" paddingLeft="60" width="100%">
            <mx:FormHeading>
                  <mx:label>Titre du formulaire</mx:label>
            </mx:FormHeading>
 
            <mx:FormItem label="Nom">
                  <mx:TextInput id="nomSaisi"/>
            </mx:FormItem>
 
            <mx:FormItem label="Mot de passe">
                  <mx:TextInput id="passSaisi" />
            </mx:FormItem>
 
            <mx:FormItem label="Commentaire">
                  <s:TextArea id="commentaireSaisi" height="40" />
            </mx:FormItem>
 
            <mx:FormItem>
                  <s:Button label="Valider" />
                  <s:Button label="RAZ" />
            </mx:FormItem>
      </mx:Form>
</s:Application>

 

A l'exécution, les FormItems sont bien alignés verticalement et les paddings spécifiés sont respectés :

conteneurs_2

 

Les boutons "Valider" et "RAZ" sont inclus dans le même FormItem, mais sont pourtant disposés verticalement. En effet, la disposition par défaut des FormItem consiste à aligner les éléments contenus les uns en-dessous des autres. Pour modifier cette disposition, nous pouvons utiliser l'attribut suivant direction="horizontal" :

 

<mx:FormItem direction="horizontal">
      <s:Button label="Valider" />
      <s:Button label="RAZ" />
</mx:FormItem>

Le formulaire devient alors le suivant :

 conteneurs_3

 

D'autres conteneurs d'agencement

 

Il existe d'autres conteneurs d'agencement, dont notamment :

  • TitleWindow et semblable au Panel et est optimisé pour créer une pop-up, notamment grâce à la présence possible des boutons de fermeture et de redimensionnement en haut à droite de la fenêtre,
  • Tile permet un agencement sur une grille divisée en lignes et en colonnes :
     conteneurs_tile
  • HDivideBox et VDivideBox sont similaires à HGroup et VGroup, mais insèrent en plus une ligne de division déplaçable entre les composants enfants :
     conteneurs_divideBox
  • ControlBar place des composants sur le bord inférieur d'un Panel ou d'un TitleWindow, comme nous l'avons déjà vu dans le chapitre Disposition des composants :
    conteneurs_controlBar

 

Il existe également un autre type de conteneurs : les conteneurs de navigation, que nous allons découvrir au chapitre suivant.

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.