7.4 Les objets boîtes

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.

Cette section décrit l'objet boîte qui contient des informations relatives à l'affichage et à la mise en page d'une boîte XUL aussi bien que des détails sur la mise en page XUL.

À propos de la mise en page XUL

Mozilla divise son fonctionnement en deux séries d'arbres, l'arbre du contenu et l'arbre de mise en page. L'arbre de contenu stocke les n½uds trouvés tels quels dans le code source. L'arbre de mise en page contient un arbre différent des n½uds pour chaque composant individuel pouvant être affiché. L'arbre de mise en page contient la structure d'affichage des n½uds. Il n'y a pas forcément de relation directe entre le contenu et la mise en page des n½uds. Certains n½uds de contenu peuvent avoir plusieurs objets de mise en page, par exemple, chaque ligne d'un paragraphe a un objet de mise en page séparé. Réciproquement, certains n½uds de contenu n'ont aucun objet de mise en page. Par exemple, l'élément key n'a aucun objet de mise en page puisqu'il n'est jamais affiché. De même, tout élément masqué n'aura plus d'objet de mise en page.

DOM est généralement utilisé pour récupérer et modifier des informations concernant le contenu ou la structure d'un document. Il est relativement simple de déterminer quelle sorte de n½ud de l'arbre sera créé pour un élément donné. Un élément XUL, par exemple, aura un type de n½ud de contenu XULElement.

Les objets de mise en page qui seront créés sont déterminés de manière plus complexe. Diverses parties d'information sont utilisées telles que le nom de la balise, les attributs d'un élément, diverses propriétés CSS, les éléments et les objets de mise en page autour de l'élément, et les liaisons XBL associées à un élément (les XBL seront décrites dans une section ultérieure). À moins que vous ne changiez le style d'un élément, la plupart des éléments XUL utilisent habituellement l'objet de boîte de mise en page ou un de ses sous-types. Souvenez-vous que tous les éléments XUL sont des types de boîtes, et que les boîtes sont la base de l'affichage de tous les éléments XUL. Toutefois, Il y a un certain nombre de sous-types, environ 25 ou plus, pour des éléments XUL spécifiques. Certains de ces sous-types, tels que les piles ou les boîtes de liste ont besoin d'une mise en page plus complexe qu'une simple boîte, tandis que d'autres, tels que les boutons, ne sont utilisés que pour ajouter la gestion des événements souris ou clavier.

L'objet de mise en page associé à un élément peut être enlevé pour créer un objet de type complètement différent en changeant simplement la propriété display CSS. Par exemple, l'affectation de la valeur block à la propriété display d'un élément bouton va effacer l'objet de mise en page et créer un objet block à la place. Naturellement, ce changement modifiera l'apparence et les fonctionnalités de cet élément.

Il n'est pas nécessaire de connaître les détails de la construction des objets de mise en page, mais il est quand même utile d'avoir la connaissance de comment est décrit la mise en page XUL pour aborder un développement avancé sous XUL.

Les objets de boîte

Les objets de mise en page ne peuvent pas être manipulés par les développeurs. Ils font partie des composants internes à la mise en page XUL. Toutefois, XUL fournit quelques objets d'aide, appelés objets de boîte, qui fournissent quelques informations concernant la mise en page. Comme leurs noms l'indiquent, ils sont disponibles pour tous éléments de type boîte.

Il y a plusieurs sous-types d'objet boîte, bien que seul un petit nombre d'entre eux soit généralement employé. Les autres ont des fonctions plus accessibles par des méthodes liées directement à l'élément, car ces types sont généralement seulement utilisés avec un élément particulier. L'objet de boîte, ou l'interface BoxObject, toutefois, a un nombre de propriétés pouvant être utile pour le développement XUL.

L'objet de boîte de base a deux fonctionnalités utiles. Premièrement, vous pouvez récupérer la position et les dimensions d'un élément XUL affiché, et deuxièmement, vous pouvez déterminer l'ordre d'affichage des éléments dans une boîte, au lieu de leurs ordres d'enregistrement dans le DOM.

Récupérer la position et les dimensions

L'objet de boîte fournit quatre propriétés, x, y, width et height, pour déterminer la position et les dimensions d'un élément. Les coordonnées x et y sont relatives au coin haut à gauche du document dans la fenêtre (en excluant le bord de la fenêtre et son titre). Elles sont mesurées en pixels. Les propriétés width et height sont également mesurées en pixels et retournent la largeur et la hauteur d'un élément en incluant les styles CSS padding et border, s'ils existent.

Les valeurs sont toujours la position et les dimensions correspondant à l'affichage en cours, donc ces valeurs peuvent être différentes si l'élément est déplacé ou redimensionné. Par exemple, un élément flexible changera de taille et les dimensions de son objet de boîte seront mises à jour en conséquence. L'exemple suivant en offre une illustration :

Exemple 7.4.1 : Source Voir

<button label="Cliquez ici"
        oncommand="alert('La largeur est ' + this.boxObject.width);"/>

Vous pouvez utiliser les attributs width et height pour définir respectivement la largeur et la hauteur d'un élément. Normalement, ces attributs n'ont pas à être modifiés et l'élément ajuste ses dimensions pour s'adapter au contenu. Ainsi, la définition de ces attributs substitue les valeurs spécifiées aux dimensions par défaut. Les propriétés width et height correspondantes peuvent être employées pour ajuster les dimensions d'un élément à tout moment, si vous souhaitez afficher un élément à une dimension précise. La récupération des valeurs de ces propriétés vous donnera les dimensions explicitement indiquées. Notez que ces propriétés renverront une chaîne vide si les attributs ou propriétés width et height n'ont pas encore été initialisées. Par conséquent, vous ne pouvez pas récupérer les dimensions actuelles avec ces propriétés ; vous devrez utiliser les propriétés de l'objet de boîte à la place.

Cela doit vous sembler un peu confus, mais la clef est de se souvenir que les propriétés width et height d'un élément retournent les dimensions qui ont été définies dans le fichier XUL, tandis que les propriétés width et height de l'objet de boîte retournent les dimensions courantes réelles.

Élément caché et réduit

L'attribut hidden cachera un élément de telle sorte qu'il ne sera pas affiché. Comme il n'est pas affiché, les quatre propriétés de position et de dimensions de l'objet de boîte auront une valeur 0. Lorsqu'un élément est caché, il est supprimé de l'affichage et ses objets de mise en page sont effacés. Ainsi, comme il n'est affiché nulle part, il n'aura ni position ni dimensions.

L'attribut collapsed aura le même effet visuel sur cet élément pour l'utilisateur, excepté le fait qu'il laisse l'élément sur l'écran et conserve les objets de mise en page intacts, mais en mettant ses dimensions à 0. Cela signifie que même si les éléments cachés et réduits ont une largeur et une hauteur de 0, les éléments cachés auront une position x et y de 0 tandis que les éléments réduits conserveront leur position dans la fenêtre.

Pour rechercher ou modifier les états hidden ou collapsed, utilisez leurs propriétés respectives comme dans l'exemple suivant.

Exemple 7.4.2 : Source Voir

<script>
function showPositionAndSize()
{
  var labelbox = document.getElementById('thelabel').boxObject;

  alert("La position est (" + labelbox.x + "," + labelbox.y +
        ") et les dimensions sont (" + labelbox.width + "," +
        labelbox.height + ")");
}
</script>

<button label="Caché"
        oncommand="document.getElementById('thelabel').hidden = true;"/>
<button label="Montré"
        oncommand="document.getElementById('thelabel').hidden = false;"/>
<button label="Réduit"
        oncommand="document.getElementById('thelabel').collapsed = true;"/>
<button label="Non réduit"
        oncommand="document.getElementById('thelabel').collapsed = false;"/>
<button label="Montrer la position et les dimensions"
        oncommand="showPositionAndSize();"/>

<label id="thelabel" value="Je suis un libellé"/>

Notez que si vous cachez ou réduisez le libellé, il sera invisible. Vous devrez changer ses attributs hidden ou colapsed pour le voir réapparaître.

Ordonnancement des éléments XUL

L'objet de boîte peut également être employé pour déterminer l'ordre d'affichage des éléments, qui peut ne pas être le même que dans la source. Souvenez-vous que les propriétés DOM telles que childNodes, firstChild et nextSibling peuvent être utilisées pour parcourir l'arbre de document. L'objet de boîte permet de naviguer de façon similaire mais retourne les éléments dans leur ordre d'affichage.

L'objet de boîte fournit plusieurs propriétés, firstChild, lastChild, nextSibling, previousSibling et parentBox. Leurs noms devraient vous expliquer d'eux-même leur fonctionnement. Ces propriétés renvoient des éléments, par exemple, la propriété firstChild renvoie le premier élément enfant affiché. Il n'y a pas de propriété childNodes correspondante pour naviguer entre les boîtes ; à la place, vous devez utiliser les propriétés nextSibling et previousSibling pour parcourir les frères et s½urs.

Contrairement à la navigation dans l'arbre DOM, les éléments cachés ne sont pas inclus dans la navigation avec les objets de boîte. Donc, si une boîte a six enfants dont les deux premiers sont cachés, la propriété firstChild renverra le troisième élément. Toutefois, les éléments réduits seront inclus car ils sont affichés même sans avoir de dimensions. Par exemple, la boîte s½ur suivant le bouton 1 de l'exemple suivant sera le bouton 3, parce que le bouton 2 est caché. Mais la boîte s½ur suivant le bouton 3 sera le bouton 4 qui est seulement réduit.

Exemple 7.4.3 : Source Voir

<hbox>
  <button label="Bouton 1"
          oncommand="alert('Le suivant est : ' + this.boxObject.nextSibling.label);"/>
  <button label="Bouton 2" hidden="true"/>
  <button label="Bouton 3"
          oncommand="alert('Le suivant est : ' + this.boxObject.nextSibling.label);"/>
  <button label="Bouton 4" collapsed="true"/>

</hbox>

Attributs d'ordonnancement de boîte

Lorsqu'une boîte XUL est placée dans une fenêtre, les éléments sont ordonnés selon un certain nombre de propriétés, par exemple l'orientation, leur groupe ordinal et leur direction.

Attribut orient

L'orientation est communément modifiée en utilisant l'attribut orient. Il existe également une propriété CSS -moz-box-orient correspondante qui peut remplacer l'attribut, en fonction de la situation. Cet attribut a été expliqué dans une section précédente sur les boîtes.

Attribut ordinal

L'attribut ordinal d'un élément peut être placé pour spécifier un groupe ordonné d'éléments, ou vous pouvez utiliser la propriété CSS -moz-box-ordinal-group.

Les éléments avec une valeur ordinale inférieure sont placés dans la boîte avant les éléments ayant une plus grande valeur ordinale. Par exemple, un élément avec une valeur ordinale de 2 sera placé avant un élément ayant une valeur ordinale de 3 ou plus, mais après un élément ayant un ordinal de 1. La valeur ordinale par défaut, si elle n'est pas définie, est de 1. Cela signifie que si vous voulez modifier l'ordre d'affichage des éléments, vous aurez souvent besoin d'ajuster les ordinaux de plusieurs éléments.

L'ajustement de l'ordinal d'un élément ne se fait pas aussi simplement par le placement des éléments dans un certain ordre dans la source. Il peut être utilisé pour réarranger les éléments plus tard sans ajuster le DOM. L'exemple suivant en est une illustration.

Exemple 7.4.4 : Source Voir

<hbox>
  <button label="Un" oncommand="this.ordinal++;"/>
  <button label="Deux" oncommand="this.ordinal++;"/>
  <button label="Trois" oncommand="this.ordinal++;"/>
</hbox>

Si vous pressez le premier bouton, son ordinal augmentera de un, de 1 à 2. Il apparaîtra à la fin de la ligne puisque les autres boutons ont un ordinal de 1. Si vous pressez le second bouton, son ordinal sera augmenté de un et sera déplacé à la fin de la ligne. Les éléments de même ordinal apparaîtront dans le même ordre que dans la source. Si vous pressez une nouvelle fois le bouton libellé Un, son ordinal augmentera à 3 et il sera déplacé à la fin. Finalement, presser le bouton libellé Trois augmentera son ordinal à 2 et le fera apparaître entre les deux autres boutons.

Attribut dir

L'attribut final d'ordonnancement de boîte est l'attribut dir, ou la propriété CSS -moz-box-direction. S'il est initialisé à reverse, tous les enfants dans la boîte sont affichés dans l'ordre inverse. Dans une boîte horizontale, les éléments seront affichés de la droite vers la gauche et dans une boîte verticale, les éléments seront affichés du bas vers le haut. Voici un exemple :

Exemple 7.4.5 : Source Voir

<hbox dir="reverse">
  <button label="Gauche"/>
  <button label="Centre"/>
  <button label="Droite"/>
</hbox>

Parcourir les n½uds en utilisant l'ordonnancement des objets de boîte vous renverra les éléments dans leur ordre d'affichage en tenant compte des ajustements faits sur leur ordinaux. Ainsi, si vous changez l'ordinal d'un élément, celui-ci aura une position différente dans la boîte. Toutefois, le renversement de la direction n'affectera pas l'ordre de la boîte.

---

Ensuite, nous verrons comment utiliser les objets XPCOM à partir de XUL et des scripts.