Ajax JavaScript CSS HTML 5 Gecko XUL

Spacer et flex

Pour mieux disposer les éléments d'une interface graphique, les séparer et contrôler leur taille, on utilise la balise spacer et l'attribut flex.

spacer

Cet élément à un seul attribut, flex. C'est un composant invisible dont le but est de séparer les autres éléments graphiques.

flex

C'est l'attribut de spacer mais aussi de tout autre composant graphique. Il ne définit pas une taille, mais une proportion. Si un composant à un attribut flex de 1 et l'autre de 9, le premier occupera un dixième de l'espace qui les contient, et le second occupera les neuf dixièmes. Ces proportions s'appliquent à l'intérieur d'un conteneur XUL, l'attribut n'aurait pas d'effet si les composants se trouvaient dans un conteneur HTML comme div.

Exemple

Dans cette simple interface, on aura un champ d'entrée de texte accompagné d'un bouton, et plus loin un autre bouton sans rapport avec les éléments précédent. Ce dernier doit toujours se trouver à droite de la fenêtre.

<box style="background-color:#EEE;">
    <groupbox min-width="500" style="margin:16px;padding:8px;"  flex="1">
        <textbox />
        <button label="Soumettre" />
        <spacer flex="8" />
        <button label="Aide" flex="2" />
        </hbox>
        </groupbox>
</box>	

Détail des éléments:

  1. box: on lui donne une couleur de fond grise pour voir l'espace total de l'interface.
  2. groupbox: un cadre est placé autour de l'espace qui nous intéresse.
  3. textbox: champ d'entrée de texte. Sa taille est fixe.
  4. bouton soumettre: bouton de taille fixe, pas d'attribut flex.
  5. spacer: la valeur 8 de l'attribut donne une proportion large à l'espace de séparation. Si le dernier bouton aide avait une taille fixe comme le bouton soumettre, la valeur 1 aurait suffit pour que le spacer remplisse l'espace car les autres éléments seraient alors tous fixes.
  6. bouton aide: on veut qu'il soit plus large que le premier donc une proportion 2, pour la démonstration.