Groupbox

La balise groupbox ne doit pas être confondue avec une balise de regoupement de boutons telle que radiobox, qui rend les boutons radio alternatifs.
En fait elle est similaire à la balise fieldset de HTML et a le même but de présentation. En pratique, c'est une balise box qui affiche un cadre.
Elle est dotée d'un sous-élément particulier, caption, qui affiche un titre comme en HTML, ou d'autres composants.
On peut bien sûr organizer le contenu avec d'autres balises box.

Elements de groupbox

caption

Affiche un libellé ou un groupe de composants XUL dans le cadre en haut et à gauche.

flex

Hérité de box, indique le pourcentage d'occupation et le fait que la boite s'adapte à la taille de la fenêtre.

orient

Egalement hérité de box, définit une orientation verticale ou horizontale du contenu. Par défaut elle est verticale.

Exemple

Nous allons voir comment organizer le contenu d'une groupbox qui présente un ensemble de composants minimal d'interface de recherche.
Structure de l'interface:

<groupbox>
    <caption label="Recherche" style="background-color:white;" />
    <vbox>
        <hbox>
            ..libellé et champ de texte...
        </hbox>
        <hbox>
            ...bouton...
        </hbox>
    </vbox>
</groupbox>

Le caption est le premier sous-élément de groupbox. Un attribut de style au format CSS a été ajouté parceque la couleur de fond semble être grise par défaut.
Puis une vbox est utilisée afin de placer verticalement d'abord le champ de texte et son libellé.
Ces deux éléments sont placés sur une même ligne avec hbox.
Le bouton est placé aussi dans une hbox pour limiter la taille.

• Démo: code.zip