2.7 Utilisation des spacers

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 ajoutons quelque chose, la fenêtre s'agrandit.

XUL utilise un système de mise en page appelé le " Box Model ". Nous parlerons de cela 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 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. Cela 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 "fléxibilité" de l'espacement. Dans le cas ci-dessus, le spacer a un flex de 1. Cela en fait un élément d'espacement fléxible. 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.

<spacer flex="1"/>
<button id="find-button" label="Rechercher" default="true"/>

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. A moins que vous ne spécifiez la largeur ou la hauteur d'un élément, la dimension par défaut de cet élément sera déterminé 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'est agrandi 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 numéro 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 signifie seulement quelle doit être la taille proportionnelle des éléments entre eux. Pour différentes raisons, incluant les dimensions explicites mises sur des éléments, ou l'emploi de certains éléments graphiques spéciaux, la flexibilité peut ne pas être rendue de manière exacte.

L'attribut flex peut être placé sur n'importe quel élément incluant les éléments HTML. Toutefois, cela n'a de sens que lorsqu'il est placé sur un élément inclus dans une boîte. Nous verrons l'emploi des boîtes dans la prochaine section. Cela signifie que même si vous pensiez placer un attribut flex sur un élément HTML, il n'aura aucun effet si cet élément n'est pas dans une boîte.

Regardons quelques exemples :

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 toujours d'un dixième de la taille du bouton Annuler. Le bouton Annuler sera 10 fois plus large car il a une valeur de flex de 10 fois celle du bouton Rechercher.

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 Rechercher 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.

Spécifier une valeur de 0 a le même effet que si vous enlevez l'attribut flex en entier. L'élément perd toute flexibilité.

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.

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.

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