2.8 Utilisation des spacers

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.

Dans cette section, vous trouverez comment ajouter des espacements entre les différents éléments que vous avez créés.

Ajout de spacers

Un des problèmes avec le développement des interfaces utilisateur est que chaque utilisateur a son propre affichage. Certains utilisateurs peuvent avoir de grands écrans avec une haute résolution et d'autres de faibles résolutions. De plus, chaque plate-forme peut avoir des spécificités pour l'interface utilisateur. En ajoutant le support multi-langue, un texte dans une langue peut avoir besoin de plus de place que dans une autre.

Les applications qui doivent être compatibles avec différentes plates-formes ou langages ont souvent des fenêtres créées avec beaucoup de place pour permettre leur exécution. Certaines plates-formes et outils de développement d'interfaces utilisateur proposent des composants qui sont suffisamment intelligents pour se redimensionner et se repositionner eux-mêmes selon les besoins de l'utilisateur (Java utilise des gestionnaires de mise en page par exemple).

XUL fournit la possibilité aux éléments de se positionner et se redimensionner automatiquement. Comme nous l'avons vu, la fenêtre de "recherche de fichiers" est apparue avec une taille qui correspond aux éléments qui y sont inclus. Chaque fois que nous y ajoutons quelque chose, la fenêtre s'agrandit.

XUL utilise un système de mise en page appelé le " Box Model ". Nous en parlerons dans la prochaine section mais il vous permet essentiellement de diviser une fenêtre en une série de boîtes contenant vos éléments. Ces boîtes se positionnent et se redimensionnent en fonction des spécifications que vous avez définies. Pour l'instant, sachez simplement que l'élément window est un type de boîte.

Avant d'entrer plus dans le détail avec les boîtes, nous allons présenter un autre élément XUL qui se montre très utile pour la mise en page, le spacer. Un spacer est très simple et ne requiert qu'un seul attribut qui sera expliqué dans un moment. Le spacer le plus simple ressemble à ceci :

<spacer flex="1" />

Un spacer est utilisé pour placer des espaces vides dans une fenêtre. Sa principale caractéristique est de pouvoir s'agrandir ou se rétrécir lorsque l'utilisateur redimensionne la fenêtre. Il permet à quelqu'un de placer des boutons à droite ou en bas d'une fenêtre et de vouloir les fixer sur le coté droit ou en bas, quelle que soit la taille de la fenêtre. Comme vous le verrez, vous pouvez utiliser des séries de spacer pour créer quelques effets de mise en page.

Dans la syntaxe ci-dessus, spacer a un seul attribut appelé flex. Il est utilisé pour définir la " flexibilité " de l'espacement. Dans le cas ci-dessus, le spacer a un flex de 1. Il en devient un élément d'espacement flexible. Si vous placez un spacer directement dans une fenêtre, il s'adaptera à la taille de la fenêtre lorsque celle-ci est modifiée.

Nous allons bientôt ajouter un élément spacer dans notre boîte de dialogue "Recherche de Fichiers". Tout d'abord, voilà ce qu'il se passe si la fenêtre est agrandie :

Source Voir

Si vous changez la taille de la fenêtre, vous pouvez voir que les éléments ont conservé leur position. Aucun d'eux n'a bougé ou s'est redimensionné bien que la fenêtre dispose de plus de place. Regardons maintenant ce qu'il se passe si un élément spacer est ajouté entre la boîte de texte et le bouton Rechercher :

Source Voir

En ajoutant un spacer et en agrandissant la fenêtre, vous voyez que le spacer s'est agrandi de façon à remplir l'espace libre. Les boutons ont été repoussés.

<spacer flex="1"/>

<button id="find-button" label="Rechercher"/>

Plus d'informations sur la flexibilité

XUL place les éléments d'une fenêtre en calculant les largeurs et les hauteurs adéquates des éléments et ajoute ensuite des espacements là où ils sont flexibles. À moins que vous ne spécifiez la largeur et la hauteur d'un élément, la dimension par défaut de cet élément sera déterminée par son contenu. Vous noterez que le bouton Annuler des boîtes de dialogue a toujours adapté sa largeur pour contenir son texte. Si vous créez un bouton avec un très long libellé, la taille par défaut de ce bouton sera assez large pour contenir le libellé en entier. Les autres éléments, tels que la boîte de texte, se sont adaptés de façon adéquate.

L'attribut flex est utilisé pour spécifier si un élément peut changer sa dimension pour s'ajuster à sa boîte le contenant (dans notre cas, la fenêtre window). Nous avons montré l'application de l'attribut flex sur les spacer, mais il peut s'appliquer à n'importe quel élément. Par exemple, vous pouvez souhaiter avoir plutôt un redimensionnement du bouton Rechercher :

Source Voir

Comme vous pouvez voir sur l'image, en plaçant un attribut flex sur le bouton Rechercher, celui-ci s'agrandit en même temps que la fenêtre. Un spacer n'a rien de spécial. Il peut être considéré comme un bouton invisible. Il fonctionne de la même manière qu'un bouton, excepté qu'il ne se dessine pas à l'écran.

Vous aurez remarqué quelque chose sur l'image ci-dessus. Il n'y a pas que le bouton Rechercher qui s'agrandit mais un espacement est également apparu entre le texte à gauche et le bouton. Bien entendu, il s'agit du spacer que nous avons placé tout à l'heure. Il s'est redimensionné de lui même également. Si vous regardez suffisamment de près, vous devriez remarquer que ce changement de taille a été partagé en part égale entre le spacer et le bouton. Le spacer a reçu la moitié de l'espace libre et le bouton a reçu l'autre moitié.

La raison de ce comportement est que le spacer et le bouton ont chacun un attribut flex. Parce qu'ils sont flexibles, le spacer et le bouton se redimensionnent équitablement.

Comment faire si vous voulez qu'un élément s'agrandisse deux fois plus qu'un autre ? Vous pouvez choisir un nombre plus grand pour la valeur de l'attribut flex. Les valeurs de l'attribut flex sont des ratios. Si un élément a un flex de 1 et un second un flex de 2, le second s'agrandira du du double par rapport au premier. En effet, un flex de 2 signifie que cet élément a une flexibilité de deux fois celle d'un élément de flex de 1.

L'attribut flex ne sert pas à définir une taille. Il spécifie au contraire comment se répartissent les espaces vides entre les différents éléments fils d'une boîte. Nous aborderons les boîtes dans le prochain chapitre. Dès lors que les dimensions par défaut des éléments fils d'une boîte sont déterminées, les valeurs de flexibilité sont appliquées pour diviser l'espace restant dans la boîte. Par exemple, si la boîte fait 200 pixels de large, qu'elle contient deux boutons flexibles respectivement de 50 pixels et 90 pixels, il restera un espacement de 60 pixels. Si ces deux boutons ont une valeur de flex de 1, cet espacement sera divisé en deux moitiés égales de 30 pixels affectées à chacun d'eux. Si le second bouton voit sa valeur de flexibilité augmentée à 2, le premier bouton recevra 20 pixels d'espacement supplémentaire et le second en recevra 40 pixels.

L'attribut flex peut être placé sur n'importe quel élément, toutefois il n'a de sens que si cet élément est directement inclus dans une boîte. Donc, même si vous placez un attribut flex sur un élement HTML, il restera sans effet cet élément est situé dans un élément n'étant pas une boîte.

Exemples d'utilisation de flex

Exemple 1:
    <button label="Chercher" flex="1"/>
    <button label="Annuler" flex="1"/>
Exemple 2:
    <button label="Chercher" flex="1"/>
    <button label="Annuler" flex="10"/>
Exemple 3:
    <button label="Chercher" flex="2"/>
    <button label="Remplacer"/>
    <button label="Annuler" flex="4"/>
Exemple 4:
    <button label="Chercher" flex="2"/>
    <button label="Remplacer" flex="2"/>
    <button label="Annuler" flex="3"/>
Exemple 5:
    <html:div>
    <button label="Chercher" flex="2"/>
    <button label="Remplacer" flex="2"/>
    </html:div>
Exemple 6:
    <button label="Chercher" flex="145"/>
    <button label="Remplacer" flex="145"/>

Exemple 1 :

dans ce cas, la flexibilité est divisée en part égale pour les deux boutons. Leurs tailles changeront en proportion égale.

Exemple 2 :

ici, les deux boutons sont flexibles, mais le bouton Chercher sera dix fois plus petit que le bouton Annuler qui a une valeur flex dix fois plus importante que celle du bouton Chercher. L'espace restant est divisé en une part pour le bouton Chercher et 10 parts pour le bouton Annuler.

Exemple 3 :

seuls deux boutons sont flexibles ici. Le bouton Remplacer ne changera jamais sa taille mais les deux autres le pourront. Le bouton Annuler aura toujours une taille du double du bouton Chercher parce qu'il a une valeur de flex du double.

Exemple 4 :

dans ce cas, les trois boutons sont flexibles. Les boutons Chercher et Remplacer auront exactement la même taille mais le bouton Annuler sera un peu plus large (50% plus large pour être exact).

Exemple 5 :

ici, les deux boutons sont placés dans une balise div. La flexibilité perd toute signification puisque les boutons ne sont pas directement dans une boîte. L'effet serait le même si les attributs flex étaient enlevés.

Exemple 6 :

Comme les valeurs de flex sont identiques, les deux boutons auront la même taille. Cela fonctionne aussi bien que si vous aviez mis une valeur de 1 au lieu de 145. Il est recommandé de mettre les valeurs les plus basses pour une meilleure lecture.

Notez que d'autres facteurs tels que les libellés des boutons et les tailles minimales des boutons peuvent affecter les dimensions réelles des boutons. Par exemple, un bouton ne peut pas être réduit au delà d'une taille nécessaire pour y placer son libellé.

Spécifier une valeur de 0 a le même effet que si vous enleviez l'attribut flex en entier. L'élément perd toute flexibilité. Vous verrez parfois des valeurs de flex avec un pourcentage. Il n'y a aucune signification spéciale et le signe pourcentage est traité comme s'il n'existait pas.

Vous avez dû remarquer que si vous redimensionnez verticalement la boîte de dialogue « Recherche de fichiers », les boutons se redimensionnent également en hauteur pour s'ajuster à la hauteur de la fenêtre. Ceci s'explique par le fait que les boutons ont une valeur de flex verticale implicite donnée par la fenêtre. Dans une prochaine section, nous expliquerons comment changer ce comportement.

Nous allons maintenant apprendre des nouvelles caractéristiques sur les boutons.