Manuel de référence du programmeur XUL

<box>

Attributs Enfants communs
align <box>
valign <menu>
class <button>
id <text>
flex <image> 
width  
height  
autostretch  
orient  
oncommand  

<titledbox>

Attributs Enfants communs
mêmes qu'en haut mêmes qu'en haut +
  <title>
   

Le widget <box> fournit un usage universel et un mécanisme flexible de disposition. En utilisant des cadres, vous pouvez indiquer la position et le rapport de presque n'importe quelle combinaison de widgets dans l'IU. Beaucoup de widgets XUL héritent des cadres, incluant:

Les cadres utilisent des "câbles" (flex) pour étirer leurs positions dans une IU. Les ressorts (springs) avec câble poussent les cadres, les contraignant à aller dans le conteneur parent. L'exemple suivant montre une disposition de cadre simple et de ressort en utilisant tous les attributs de base du cadre:
 
<box id="parent_box" 
  orient="vertical" 
  style="background-color:lightblue;">
    <box flex="1">
       <button class="borderless" value="Start" />
       <button class="borderless" value="Stop" />
    </box>
    <spring flex="3" />
</box>

Cadre titre

Le cadre titre est dérivé du cadre de base, mais supporte un élément enfant spécial pour fixer un titre comme label dans le conteneur du cadre, comme dans l'exemple suivant:

 
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 

<window id="new-menu-stuff" 
  xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<titledbox style="background-color: lightblue;" orient="vertical">
<title>
<button value="Click me" />
<button value="Push me" />
</titledbox>
</window>

En outre, l'élément <titledbox> est identique au cadre.
 
 

align
Description
align est un attribut facultatif qui indique le cadrage des enfants de l'élément actuel.
Syntaxe
<element align="left | right | center | vertical | horizontal">
Exemple
 
 
<box width="150" orient="vertical" autostretch="never" 
style="border: solid 2px; background-color: lightblue" 
align="left">
       <button value="button1" style="font-size: 12pt"/>
       <button value="button2" style="font-size: 12pt"/>
       <button value="button3" style="font-size: 12pt"/>
</box>
<box width="150" orient="vertical" autostretch="never" style="border: solid 2px; background-color: lightblue" align="right">
       <button value="button1" style="font-size: 12pt"/>
       <button value="button2" style="font-size: 12pt"/>
       <button value="button3" style="font-size: 12pt"/>
</box>
 
Notes
La valeur par défaut pour align est left. En plus des valeurs left, center et right align supporte également "horizontal" et "vertical", bien que ces derniers soient tous deux désapprouvés. Rappelez-vous que l'attribut se réfère au cadrage des enfants et pas à l'élément parent.
 


 

valign
Description
valign est un attribut facultatif qui indique le cadrage vertical des enfants de l'élément actuel.
Syntaxe
<element valign="top | middle | baseline | bottom ">
Exemple
<box width="150" orient="vertical" autostretch="never" 
  style="border: solid 2px; background-color: lightblue" 
  valign="baseline">
    <button value="button1" style="font-size: 12pt"/>
    <button value="button2" style="font-size: 12pt"/>
    <button value="button3" style="font-size: 12pt"/>
</box>
<box width="150" orient="vertical" autostretch="never" 
  style="border: solid 2px; background-color: lightblue" 
  valign="middle"
    <button value="button1" style="font-size: 12pt"/>
    <button value="button2" style="font-size: 12pt"/>
    <button value="button3" style="font-size: 12pt"/>
</box>
Notes
La valeur par défaut pour valign est middle. Rappelez-vous que l'attribut se réfère au cadrage vertical des enfants et pas à l'élément parent.
 


 

flex
Description
flex est employé pour placer des widgets et pour établir leur flexibilité relative les uns par rapport aux autres.


Syntaxe

<element flex="integer">
Exemples
 
<box orient="vertical" style="background-color:lightblue;">
    <box flex="1">
       <button class="borderless" value="Start" />
       <button class="borderless" value="Stop" />
    </box>
    <spring flex="3" />
</box>
Notes
flex est une des principales manière de classer et arranger des widgets dans l'IU. En utilisant box, spring, flex et les widgets XUL fonctionnels dont vous avez besoin, vous pouvez disposer l'interface de la manière que vous voulez.

Dans l'exemple ci-dessus, le widget box interne lutte pour la prise d'espace avec le widget spring. Les deux ont été mis à flex mais la plsu grande flexibilité du widget spring a comme conséquence un élément de ressort (au-dessous des deux boutons) qui est trois fois plus grand que les boutons eux-mêmes. 

Quand les widgets flexibles (widgets pour lesquels une certaine valeur de flex a été indiquée) sont arrangés avec d'autres widgets non flexibles, on considère que la flexibilité des widgets flexibles est toujours complétée. Les widgets inflexibles prennent dans ce cas-ci seulement l'espace nécessaire pour remplir leurs autres conditions: que leurs valeurs soient affichées, que les considérations de modèle comme le cadre et les bordures soient résolues, et ainsi de suite.

Quand l'attribut flex n'est pas indiqué, on considère qu'un élément a une flexibilité nulle.


 

width
Description
width est un attribut facultatif qui indique la largeur du cadre en pixel ou en pourcentage de l'espace disponible.
Syntaxe
<element width="largeur en pixels">
Exemple
<menubar width="100px" 
  style="background-color:lightblue;">
Notes
Quand vous n'indiquez pas une largeur ou hauteur, les cadres et les autres éléments compteront sur flex pour regarder comment occuper l'espace. Sans flex et aucun attribut de taille, un cadre prendra seulement l'espace nécessaire pour afficher les attributs de valeur ou de nom qui ont été indiqués.

Quand un élément possède une flexibilité, on considère que la largeur est la largeur minimale, occupant uniquement l'espace nécessaire à l'élément.


 

height
Description
height est un attribut facultatif qui indique la hauteur du cadre en pixel ou en pourcentage de l'espace disponible.
Syntaxe
<element height="height in pixels">
Exemple
<menubar height="100" 
  style="background-color:lightblue;">
Notes
Quand vous n'indiquez pas une largeur ou hauteur, les cadres et autres éléments compteront sur flex pour regarder comment occuper l'espace. Sans flex et aucun attribut de taille, un cadre prendra seulement l'espace nécessaire pour afficher les attributs de valeur ou de nom qui ont été indiqués.

Quand un élément possède une flexibilité, on considère que la hauteur est la hauteur minimale, occupant uniquement l'espace nécessaire à l'élément.


 

 

autostretch
Description
autostretch est un attribut facultatif d'un cadre auto-étiré (on ou off).
Syntaxe
<element autostretch="never | always">
Exemple
<box autostretch="never" 
  style="background-color:lightblue;">
Notes
L'attribut autostretch vous donne la possibilité d'étirer les éléments enfants d'un cadre pour les ajuster dans la direction opposée du cadre. Quand un cadre est aligné verticalement, par exemple, il étirera ses enfants horizontalement automatiquement à moins que vous ne l'indiquiez autrement. La figure ci-dessous montre comment l'autostretch empêche l'étirement des enfants du cadre bouton.
<box style="background-color: lightblue; border: solid 2px" orient="vertical">
  <button value="button1" style="font-size: 10pt"/>
  <button value="button2" style="font-size: 14pt"/>
  <button value="button3" style="font-size: 24pt"/>
  <button value=" default stretching " style="font-size: 10pt"/>
</box>

<box style="background-color: lightblue; border: solid 2px" autostretch="never" orient="vertical">
  <button value="button1" style="font-size: 10pt"/>
  <button value="button2" style="font-size: 14pt"/>
  <button value="button3" style="font-size: 24pt"/>
  <button value=" autostretch=never " style="font-size: 10pt"/>
</box>
 

 

orient
Description
orient est un attribut facultatif qui indique le cadrage des enfants de l'élément actuel.
Syntaxe
<element orient="vertical | horizontal">
Exemple
 
 
<menubar orient="horizontal" 
  style="background-color:lightblue;">
<menubar orient="vertical" 
  style="background-color:lightblue;">
Notes
L'attribut orient prend la place de align pour orienter les éléments de l'enfant d'un élément mis bout à bout ou de manière longitudinale. Cependant, align accepte toujours "verticale" et "horizontal" comme valeurs, bien que celles-ci soient maintenant désapprouvées.


 

oncommand
Description
oncommand est un attribut général auditeur d'événement qui est appelé quand l'utilisateur applique une action à l'élément.
Syntaxe
<element oncommand="code javascript dérouleur d'évènement">
Exemple
<box oncommand="alert('Parent box got the event')">
  <menulist ...
  ...
</box>
Notes
L'attribut oncommand est accessible à tous les éléments qui héritent d'un cadre (box est omniprésent dans le toolkit). Utilisez oncommand toutes les fois que vous voulez écrire un dérouleur d'événement pour un élément qui n'a pas encore d'attribut spécifique auditeur d'événement.


 


 
 
 
 
Last updated: 3/27/00 Ian Oeschger
French version (6/28/00) Matthieu Camus