Grid (grille)

Les boites permettent de subdiviser une interface en panneaux et de définir l'orientation à l'intérieur de ceux-ci, mais elles ne permettent pas de positionner les éléments de façon régulière comme le fait la balise table de HTML. Cependant XUL à un objet pour cela qui est l'objet grid.
La largeur des colonnes et la hauteur des lignes dépendent de l'attribut flex qui indique le pourcentage de la place occupée par l'élément. Celui-ci placé à la fois dans les lignes et les colonnes permet de donner une flexibilité à la fois verticale et horizontale aux cellules. Cependant l'objet grid est plus complexe à mettre en oeuvre.

Elements de grid

grid

Conteneur global, proche de la balise table de HTML.

rows

Conteneur horizontal, équivalent à tr de HTML, et qui contiendra des objets row.

row

Une ligne de la table. Elle permet de placer sur un plan horizontal d'autres composants graphiques.

columns

Conteneur vertical qui contiendra des objets column.

column

Une colonne de la table.

Structure d'une grille

Elle diffère de celle d'une table, et cela dans le but de simplifier le dimensionnement de la grille.
La définition d'une grille commence par la liste des colonnes, dans le conteneur columns. Cela permet de définir la largeur des colonnes avec l'attribut flex.
Puis suit un conteneur rows qui contient des balises row ou d'autres widgets XUL. La balise row permet d'aligner horizontalement un ensemble d'objets.
Cela donne la structure d'ensemble suivante:

<grid>
    <columns>
    <column flex="" />
        ... autres column éventuelles...
    </columns>
    <rows>
        <row flex="" />
        ... suite de row ou autres widgets...
    </rows>
</grid>

A l'intérieur de rows ou d'une row, on peut inclure des box, hbox ou vbox pour organiser le contenu.

Il est possible d'inverser les rôles entre les conteneurs columns et rows. On pourra placer les composants à l'intérieur des column tandis que l'on utilisera les row pour indiquer le nombre de lignes.
Si le nombre d'éléments dans columns correspond au nombre de row, chacun sera placé à l'intérieur d'une ligne.
Si l'on mettait des éléments à la fois à l'intérieur des row et des columns, ils se superposeraient.

Exemple de grid

Nous allons mettre en oeuvre les principes précédents en définissant une interface avec un panneau latéral étroit à gauche, une bande mince en bas et un panneau large, flexible sur tous les plans sur le reste de le fenêtre.

La structure globale, avec les attributs flex, sera la suivante:

<grid flex="1">
    <columns>
        <column flex="1" />
        <column flex="12" />
    <columns>
    <rows>
        <row flex="12" />
        <row />
    </rows>
</grid>

Le panel principal est flexible sur les deux plans. La panneau latéral également mais avec une largeur étroite. La ligne inférieure n'est flexible qu'horizontalement et fixe autrement.
Des boutons ont été placés pour faire ressortir la subdivision, mais dans la pratique, on utiliserait des boites.

• Démo: code.zip