Disposition des composants

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

Nos composants étant définis et inclus dans un conteneur Panel, nous devons maintenant nous préoccuper de leur disposition. 

Pour agencer les composants dans un conteneur, nous disposons de trois algorithmes:

  • Positionnement absolu : la position de chaque composant est spécifié manuellement à l'aide de ses propriétés x (coordonnée horizontale) et y (coordonnée verticale) qui indiquent la position en pixel par rapport au coin en haut à gauche du conteneur, dont les coordonnées sont (x = 0, y = 0).
  • Positionnement automatique : les éléments sont disposés automatiquement en respectant les règles de direction et d'espacement prédéfinies par le conteneur. Nous pourrons par exemple instaurer la règle selon laquelle les éléments sont tous alignés verticalement et centrés au milieu du conteneur.
  • Positionnement par contraintes : la position et la taille des composants sont gérés à l'aide d'un ancrage au conteneur. En utilisant les propriétés top, bottom, left, right, horizontalCenter et verticalCenter, certains des côtés d'un composants peuvent être ancré à un endroit précis du conteneur.

Ces algorithmes d'agencement peuvent être combinés les uns aux autres pour un positionnement plus fin, mais voyons tout d'abord chacun d'eux en détail.

 

Positionnement absolu

 

Le positionnement absolu est celui par défaut pour les conteneurs Application et Panel. C'est la raison pour laquelle tous nos composants étaient placés en haut à gauche de l'écran à la fin du dernier chapitre.

 

Pour spécifier le positionnement absolu de nos composants, nous allons passer en mode création sur le fichier MXML du chapitre précédent : les composants que nous avions créé en mode source sont tous affichés en haut à gauche. Utilisons la souris pour les sélectionner un à un et les glisser-déposer à l'emplacement voulu. Nous pouvons également redimensionner l'application et le panel pour obtenir une interface semblable à celle-ci :

 

disposition_composants

 

 

En revenant en mode source, nous pouvons voir que Flash Builder a automatiquement ajouté des propriétés x, y, width et height aux composants : 

<?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="400">
 
      <s:Panel title="Premier Formulaire" x="10" y="10" width="540" height="300">
            <s:Label text="Nom" x="60" y="40"/>
            <s:TextInput id="nomSaisi" x="180" y="40"/>
            <s:Label text="Mot de passe" x="60" y="75"/>
            <s:TextInput id="passSaisi" x="180" y="75"/>
 
            <s:Label text="Commentaire" x="60" y="110"/>
            <s:TextArea id="commentaireSaisi" x="180" y="110" width="230" height="60"/>
 
            <s:Button label="Valider" x="180" y="200"/>
            <s:Button label="RAZ" x="260" y="200"/>
      </s:Panel>
</s:Application>

 

Toutefois, nous remarquons vite que ce type de positionnement alourdit beaucoup le code. De plus, il ne supportera pas n'importe quel redimensionnement de la fenêtre du navigateur, et les affichages s'en ressentiront.

En effet, les positionnements et les tailles sont tous exprimés en pixels. Prenons l'exemple du bouton "Valider", qui est positionné aux coordonnées (x=180, y=200). Si l'utilisateur redimensionne la fenêtre de son navigateur jusqu'à afficher moins de 200 pixels en hauteur, le bouton sera situé "en-dessous" de la zone affichée, et le bouton n'apparaitra plus dans la fenêtre.

 

Un algorithme plus évolué est donc préférable dans la plupart des cas, et nous garderons le positionnement absolu pour des cas très particuliers et exceptionnels.

 

Positionnement automatique

 

Le positionnement automatique se base sur des règles prédéfinies de positionnement, spécifiées à l'aide des balises layout, qui contient l'ensemble des règles choisies.

Par exemple, le layout suivant : 

<s:layout>
      <s:VerticalLayout horizontalAlign="center" gap="10" paddingTop="20" />
</s:layout>

spécifie que tous les composants inclus dans le conteneur devront :

  • être disposés les uns en-dessous des autres (VerticalLayout),
  • centrés horizontalement (horizontalAlign="center"),
  • espacés les uns des autres de 10 pixels (gap="10").

De plus, une marge intérieure de 20 pixels (paddingTop="20") devra être laissée entre le haut du conteneur et son contenu

disposition_composants_padding

 

Selon nos besoin, nous disposons également des ensemble de règles suivants :

  • HorizontalLayout pour disposer les composants les uns à côté des autres horizontalement, 
  • TileLayout pour disposer les éléments dans une grille dont les colonnes et les lignes ont la même taille.

Ce type de positionnement est très pratique lorsque la disposition que vous souhaitez obtenir correspond à un ensemble de règles prédéfinies. Toutefois, il peut parfois manquer de souplesse, et la personnalisation de la disposition est limitée.

Positionnement par contraintes

 

Le positionnement par contraintes constitue le dernier algorithme de positionnement existant. Il consiste à ancrer les bords d'un composant à un endroit précis du conteneur en indiquant l'espacement à respecter

Dans notre formulaire, nous pourrions par exemple spécifier que la label "Nom" est ancré à la gauche de son conteneur Panel avec un espacement de 60 pixels et en haut avec un espacement en 30 pixels, de cette manière :

<s:Panel title="Premier Formulaire" width="540" height="300" >
      <s:Label text="Nom" left="60" top="30"/>
</s:Panel>

 

Le mode design propose un outil graphique pour définir ces ancrages. Lorsque vous sélectionnez un composant, la vue Propriétés, à droite de l'interface Flash Builder, vous propose de cocher les ancrages désirés et d'indiquer les espacements qui y correspondent. Ci-dessous, le label Nom est bien ancré en haut à 30 pixels et à gauche à 60 pixels :

disposition_composants_2

 

De plus, pour faciliter le placement des éléments en mode design, des lignes bleues apparaissent lors du glisser-déposer d'un composant. Elles affichent les ancrages que suggère Flash Builder, notamment lorsque vous placez le composant à 10 pixels du bord de son conteneur, ou lorsque vous l'alignez avec un autre composant du même conteneur.

Ci-dessous, Flash Builder suggère d'ancrer le composant sélectionné en haut du conteneur et en alignement à gauche avec le label Nom :

disposition_composants_3

 

Combinaison d'algorithmes

 

L'utilisation d'un seul algorithme de positionnement ne convient pas toujours à la mise en page désirée. Nous pouvons alors combiner les algorithmes.

Dans l'exemple du formulaire que nous utilisons jusqu'à présent, nous allons donc utiliser :

  • un positionnement automatique pour centrer horizontalement le Panel dans l'Application,
  • un positionnement par contraintes pour disposer les éléments du formulaire dans le Panel, de manière à ce que les champs de saisie et leurs labels soient alignés, ainsi que les boutons.

Nous obtenons alors le 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="400"
      >
      <!-- Disposition verticale avec centrage horizontalement -->
      <s:layout>
            <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>
      </s:layout>
 
      <s:Panel title="Premier Formulaire" width="540" height="300" >
            <!-- Ancrage des composants aux bords du conteneur Panel -->
            <s:Label text="Nom" left="60" top="30"/>
            <s:TextInput id="nomSaisi" horizontalCenter="0" top="30"/>
            <s:Label text="Mot de passe" top="60" left="60"/>
            <s:TextInput id="passSaisi" horizontalCenter="0" top="60"/>
 
            <s:Label text="Commentaire" left="60" top="90"/>
            <s:TextArea id="commentaireSaisi" width="200" height="40" horizontalCenter="35" top="90"/>
 
            <s:Button label="Valider" horizontalCenter="-39" top="157"/>
            <s:Button label="RAZ" y="157" horizontalCenter="40"/>
      </s:Panel>
</s:Application>

 

A l'exécution de l'application, nous obtenons alors une disposition correcte des éléments, y compris si l'on redimensionne la fenêtre : 

disposition_composants_4

 

 

Pour gérer la disposition des composants de l'application, nous pouvons donc combiner ces trois méthodes.

 

Mais pour simplifier encore l'agencement des éléments, nous disposons de conteneurs particuliers implémentant tel ou tel agencement. Découvrons dès à présent les plus courants.

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.