Tuto4.4

Positionnement dans une pile

 Traduit par Alain B., le 15/02/2004.
 Article original : [[http://www.xulplanet.com/tutorials/xultu/bulletins.html]]

Ce chapitre va décrire comment positionner des items dans une pile.

Placement des enfants d'une pile

Normalement, les éléments enfants d'une pile s'étirent pour s'ajuster à la dimension de la pile. Toutefois, vous pouvez aussi placer ces enfants à des coordonnées spécifiées. Par exemple, si la pile a deux boutons comme enfants, l'un deux peut être placé à 20 pixels du bord gauche et 50 pixels du bord supérieur. Le second bouton peut être placé à 100 pixels du bord gauche et 5 pixels du bord supérieur.

La position d'un élément enfant doit être précisée en plaçant deux attributs sur chaque élément. Pour le positionnement horizontal, utilisez l'attribut left et pour le positionnement vertical, utilisez l'attribut top. Si vous ne mettez pas ces attributs sur un enfant de la pile, celui ci va s'étirer pour s'ajuster à la dimension de la pile.

Exemple 4.4.1 : Source Voir

 <stack>
   <button label="Goblins" left="5" top="5"/>
   <button label="Trolls" left="60" top="20"/>
   <button label="Vampires" left="10" top="60"/>
 </stack>

La pile stack contient trois éléments, chacun d'eux est positionné aux coordonnées précisées par les attributs left et top. Ici, les trois éléments enfants sont des boutons, mais les éléments n'ont pas à être tous du même type. Il peut y avoir n'importe quels éléments, même des boîtes ou d'autres piles.

La dimension d'une pile est déterminée par les positions des ses éléments enfants. Elle est toujours dimensionnée pour que tous ses éléments enfants soient visibles. Ainsi, si vous initialisez à l'attribut left d'un enfant la valeur de 400, la pile aura une largeur d'environ 400 pixels plus la largeur de cet élément enfant. Vous pouvez outrepasser cette taille avec des propriétés de style variées telles que width et max-width.

Vous pouvez utilisez un script pour ajuster les valeurs des attributs left et top et de ce fait rendre les éléments mobile. Les piles ont l'avantage que lorsqu'un élément positionné de façon absolue change sa position, la position des autres éléments n'est pas affectée. Si vous essayez de déplacer des éléments dans une boîte normale, les autres éléments vont bouger en réaction.

Il est également possible de placer des éléments enfants de telle manière qu'ils se superposent. Lorsque les éléments enfants se dessinent, ils sont affichés dans l'ordre où ils sont apparus dans la pile. De ce fait, le premier enfant d'une pile apparaît en arrière plan, suivi du second et ainsi de suite. Le dernier enfant apparaît au premier plan. Vous pouvez utilisez les fonctions DOM pour modifier l'ordre des éléments.

Lorsqu'ils répondent aux évènements de la souris, seuls les éléments au premier plan vont capturer les évènements en premier. Cela signifie que si deux boutons se superposent, le bouton au premier plan va capturer le clic de la souris à l'endroit où il couvre l'autre bouton.