3.3 Détails sur le modèle de boîte

Attention : Ce tutoriel est ancien et n'est pas mis à jour. Bien que beaucoup d'informations soient encore valables pour les dernières versions de gecko, beaucoup sont aussi obsolètes. Il est préférable d'aller consulter cette page sur la version française de ce tutoriel sur developer.mozilla.org.

Nous avons déjà vu beaucoup de fonctionnalités sur le modèle de boîtes. Dans cette section, nous verrons quelques détails supplémentaires en nous appuyant sur des exemples.

Plus de détails sur la mise en page

Les propriétés de style comme min-width et max-height peuvent être appliquées à n'importe quels éléments. Nous les avons ajouté aux boutons et aux champs de saisie, mais nous pouvons aussi les ajouter aux éléments d'espacement ou aux boîtes. De même, l'attribut flex peut être appliqué à n'importe quel élément.

Exemple 3.3.1 : Source Voir

<hbox flex="1">
  <button label="Gauche" style="min-width: 100px;" flex="1"/>
  <spacer flex="1"/>
  <button label="Droite" style="min-width: 100px;" flex="1"/>
</hbox>

Dans l'exemple ci-dessus, les trois éléments se redimensionnent eux-mêmes car il sont tous flexibles. Les deux boutons ont une largeur minimum de 100 pixels. Les deux boutons ne seront jamais plus petits que cette taille mais ils pourront toujours s'élargir. Ici, la fenêtre doit apparaître avec une largeur d'un peu plus de 200 pixels. C'est suffisant pour les deux boutons. Car si les trois éléments sont flexibles, ils ne nécessitent pas pour autant plus de place, la flexibilité n'ajoute pas d'espace supplémentaire.

Comme il est montré dans l'image ci-dessus, il y a deux boutons qui s'étirent verticalement pour remplir leur élément conteneur, qui dans ce cas est le hbox. L'attribut align contrôle ce comportement sur une boîte horizontale. Vous pouvez aussi empêcher cet étirement en précisant une hauteur maximale sur l'élément ou mieux, sur la boîte elle-même. Si une boîte a une hauteur maximale, les éléments qu'elle contient sont limités en hauteur par celle-ci. Cependant, le problème est que vous devez connaître au préalable la taille d'un élément pour pouvoir le spécifier à la boîte.

Exemple 3.3.2 : Source Voir

<hbox flex="1" align="top">
  <button label="Gauche" style="min-width: 100px;" flex="1"/>
  <spacer flex="1"/>
  <button label="Droite" style="min-width: 100px;" flex="1"/>
</hbox>

Résumé du modèle de boîte

Pour parfaire une mise en page complexe, vous devrez généralement ajouter des boîtes imbriquées, spécifier une taille minimale et maximale pour quelques éléments, et rendre certains éléments flexibles. La meilleure interface est celle qui peut être affichée sans problème dans différentes tailles. Le modèle de boîte peut être difficile à appréhender si vous n'essayez pas différentes choses par vous-même.

Voici une courte description des deux types de boîtes :

Boîtes horizontales

1. Affichent chaque élément les uns à coté des autres horizontalement.
2. Les éléments flexibles le sont horizontalement.
3. Le groupement (NdT : attribut pack) contrôle le placement horizontal des éléments fils.
4. L'alignement contrôle la manière dont les lignes d'éléments seront alignées verticalement.

Boîtes verticales

1. Affichent chaque élément verticalement en colonnes.
2. Les éléments flexibles le sont verticalement.
3. Le groupement contrôle le placement vertical des éléments fils.
4. L'alignement contrôle la manière dont les colonnes d'éléments seront alignées horizontalement.

Vous pouvez mettre des boîtes n'importe où dans un fichier XUL, même dans un élément HTML comme une table. Cependant, l'affichage sera en partie dépendant de l'élément HTML. Cela signifie que l'attribut flex risque de ne pas réagir exactement comme vous le voudriez. Rappelez-vous que la flexibilité n'a de sens que pour les éléments qui sont directement à l'intérieur d'une boîte, ou d'un élément qui est assimilé à une boîte.

Exemples de mise en page

1. Utiliser les spacers

Exemple 3.3.3 : Source Voir

<hbox>
  <button label="Un"/>
  <spacer style="width: 5px"/>
  <button label="Deux"/>
</hbox>

Ici, un espacement est utilisé comme séparateur entre deux boutons, en précisant une largeur de 5 pixels. Vous pouvez aussi utiliser les marges de la propriété CSS margin.

2. Centrer des boutons

Exemple 3.3.4 : Source Voir

<hbox pack="center" align="center" flex="1">
  <button label="Regardez Moi!"/>
  <button label="Cliquez Moi!"/>
</hbox>

Cet exemple propose une boîte horizontale flexible contenant deux boutons. La boîte possède l'attribut pack qui est utilisé pour centrer les boutons horizontalement. L'attribut align, quant à lui, aligne verticalement les boutons. Le résultat est que les boutons seront centrés dans la boîte dans les deux directions. Cet exemple fonctionnera aussi avec une boîte verticale, sauf que le second bouton sera alors sous le premier, au lieu d'être à coté de lui.

3. Une fenêtre de recherche dans le texte

Exemple 3.3.5 : Source Voir

<?xml version="1.0" encoding="iso-8859-1" ?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="findtext" title="Recherche dans un texte" orient="horizontal"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <vbox flex="3">
    <label control="t1" value="Mots clés :"/>
    <textbox id="t1" style="min-width: 100px;" flex="1"/>
  </vbox>

  <vbox style="min-width: 150px;" flex="1" align="start">
    <checkbox id="c1" label="Ignorer la casse"/>
    <spacer flex="1" style="max-height: 30px;"/>
    <button label="Rechercher"/>
  </vbox>

</window>

Ici, deux boîtes verticales sont créées, une pour le champ texte et l'autre pour la case à cocher et le bouton de recherche. La boîte de gauche a une flexibilité 3 fois plus grande que celle de droite donc elle prendra toujours 3 fois plus de place quand la taille de la fenêtre augmentera. La boîte de droite impose une largeur minimum de 150 pixels.

Le champ de saisie est flexible donc il s'ajustera à la taille de la fenêtre. Il impose aussi une largeur minimum de 100 pixels. La case à cocher apparaît dans la boîte de droite avec son libellé. Juste en dessous de la case à cocher, il y a un spacer (espacement). L'espacement s'agrandira ou se rétrécira mais n'excédera pas 30 pixels. Le résultat est que la case à cocher et le bouton de recherche seront séparés par un espace qui ne fera pas plus de 30 pixels.

La seconde boîte a un alignement de valeur start. Les trois éléments fils seront par conséquent alignés sur le bord gauche. Si l'alignement n'était pas précisé, sa valeur par défaut serait stretch, ce qui aurait pour effet de positionner les éléments fils les uns à coté des autres horizontalement. Puisque nous ne voulons pas que le bouton de recherche change de taille, nous devons préciser un alignement.

---

Dans la prochaine section, nous allons en apprendre un peu plus sur un type de boîte plus spécifique, le groupe de boîte.