 |
|
|
| |
| TUTORIEL XML |
|
|
|
| XUL : disposition des éléments |
| Présentation des principales méthodes de mise en place des éléments graphiques de XUL.
(22/04/2005) |
  |
Après avoir vu les principaux
éléments graphiques de XUL (voir notre article
du 17/03/2005), nous allons ici nous intéresser plus particulièrement
à la mise en page de ces éléments, c'est-à-dire les différentes
positions qu'il est possible de leur donner. XUL offre une large
palette de possibilité dans ce domaine, applicables à différents
niveaux de disposition : l'élément par rapport à son conteneur
ou aux autres éléments, ou le contenu de l'élément...
En règle générale, la disposition des éléments se fait par rapport
à la boîte qui les contient, à charge aux éléments contenus
de s'adapter entre eux aux indications marquées pour un des
leurs, ou plusieurs. Les options de disposition au sein d'une
boîte peuvent ensuite être regroupées selon la disposition à
opérer. Nous allons en aborder plusieurs ici-même.
Placer
les éléments entre eux
Par défaut, les éléments graphiques XUL sont disposés de manière
séquentielle, à la manière du HTML : sans autre indication,
ils se suivent de gauche à droite et de haut en bas, leur taille
ne prenant en compte que ce qu'ils contiennent. Il est cependant,
et heureusement, possible de surseoir à cela, et parvenir à
mettre un peu plus d'ordre dans cet ensemble.
a) Espacer les éléments
Plutôt que d'avoir les boutons collés les uns aux autres, le
premier affiché restant collé à la bordure de l'élément conteneur,
il est possible d'introduire des espaces entre ceux-ci. L'élément
spacer s'utilise comme un élément
classique, mais pour agir il doit recevoir un attribut spécifiant
son mode d'utilisation, le plus classique étant width.
Un attribut réellement utile, cependant, est flex.
Celui-ci détermine la flexibilité relative entre les éléments,
et est une des principales méthodes d'arrangement des éléments.
Dès son utilisation, la ligne d'élément prend tout l'espace
possible, et les éléments spacer
prennent un espace proportionnel à la valeur que l'on a donné
à leur attribut flex. Ainsi,
un spacer avec un flex
à 2 prendra deux fois plus de place qu'un autre dont le flex
est à 1. C'est le navigateur qui gère ensuite les placements
selon ces données.
b) Modifier l'ordre d'affichage des éléments
Il est possible de modifier la manière dont sont disposés, par
défaut, les éléments au sein d'une boîte, en faisant appel à
l'attribut dir de celle-ci.
Par défaut, cet attribut prend la valeur "forward",
qui place les éléments de gauche à droite. On peut cependant
lui assigner la valeur "reverse",
qui les placera de droite à gauche. Attention, la modification
sera complète : le premier élément de la suite partira non plus
du côté gauche, mais du côté droit : <hbox
dir="reverse">
On peut également sortir de la rigueur de l'affichage "dans
le sens du code" : en spécifiant pour chaque élément son ordre
dans la suite, ceux-ci peuvent être disposés à l'envi dans le
code XML, l'interpréteur XUL se chargeant de prendre en compte
leur position assignée. Cette position s'indique par l'attribut
ordinal de chaque objet : <button
label="4e élément" ordinal="4" />.
c) Regrouper les éléments
Le groupement des éléments permet de contrôler leur placement
horizontal. Celui-ci se détermine à l'aide de l'attribut pack
appliqué à l'élément parent. Cet attribut peut prendre, bien
sûr, plusieurs méthodes : start,
end et center.
La valeur par défaut est start,
c'est-à-dire que les éléments sont groupés sur la gauche du
conteneur. end les place sur
sa droite, et center en son
milieu : <hbox pack="center">.
d) Cacher un élément
Simplement : l'attribut booléen hidden,
appliqué à un élément, permet de l'enlever de l'interface, sans
laisser de trace (l'espace qu'il occupait n'est pas conservé).
Cela autorise des interfaces dynamiques.
<button label="caché" hidden="true"
/>
e) Obtenir des éléments de même taille
Bien sûr, vous pouvez faire appel à un attribut comme height,
et l'appliquer à tous les éléments voulus, mais le futur peut
amener un élément nécessitant une plus grande hauteur, et il
vous faudra dès lors adapter les tailles de tous les éléments
graphiques. Le plus simple reste de spécifier que certains éléments
d'un groupe doivent avoir la même taille que le plus grand élément
de ce groupe. Cela peut s'accomplir par le biais de l'attribut
align de la boîte contenant
les éléments, et en lui appliquant la valeur "stretch"
: <hbox align="stretch">.
Cet attribut peut également prendre les valeurs start,
center, end
et baseline., qui agissent sur
la position d'un élément par rapport au premier
de la suite d'éléments.
f) Faire que les éléments prennent tout l'espace disponible
Un flex appliqué à un seul élément
d'une suite lui fait occuper toute la largeur du conteneur.
Seulement dans ce cas l'élément "flexé" occupera souvent trop
de place, ou sera disproportionné par rapport aux autres. Appliquer
un flex de valeur 1 à chacun
des éléments leur fait occuper tout l'espace disponible, chacun
ayant la même largeur.
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Équipé de ces premières armes, il est possible de grandement
améliorer le rendu des interfaces d'un logiciel XUL. Nous explorerons
plus en avant ces possibilités de mise en page des éléments
graphiques dans notre prochain article. |
|
|
|
|
|
|
|
| Quand achetez-vous le plus en ligne ? |
|
|
|
|
|
|
|
|
| |
|
