Design d'interfaces

Design structurel

Nous n’allons pas parler ici de design graphique mais de design structurel. Le sujet vient très tôt, car les conteneurs sont vraiment la base du design d’interface en x4js.

Pour rappel, le design graphique se fait en CSS (ou SCSS).

Découper une page

Prenons une page d’application classique : un en-tête avec un logo, des boutons de navigation et l’avatar de l’utilisateur, puis un titre, puis le contenu.

Cette page est faite de conteneurs, soit horizontaux, soit verticaux :

• La page est un conteneur vertical : les éléments sont ajoutés du haut vers le bas.
• L’en-tête est un conteneur horizontal : les éléments sont ajoutés de la gauche vers la droite.
• Le titre est un élément standard.
• Le contenu est un conteneur qui occupe tout l’espace disponible. Ce comportement s’appelle « flex ».

Dans l’en-tête, un élément flexible vide est placé après la barre de boutons : il pousse le reste vers la droite.

Le code

Pour reproduire ceci, on utilise HBox (conteneur horizontal) et VBox (conteneur vertical).

import { Button, Component, Flex, HBox, Image, Label, VBox } from 'x4js';

// la page (verticale)
const page = new VBox( {
  cls: "main-doc",
  content: [
    // l'en-tête (horizontal)
    new HBox( {
      cls: "header",
      content: [
        // logo
        new Image( { cls: "logo", src: "img/mark.svg" } ),

        // barre de boutons (horizontale)
        new HBox( {
          cls: "btnbar",
          content: [
            new Button( { label: "Dashboard" } ),
            new Button( { label: "Team" } ),
            new Button( { label: "Projects" } ),
            new Button( { label: "Calendar" } ),
          ]
        }),

        // élément flexible
        new Flex( ),

        // icône
        new Button( { cls: "msgs", icon: "var:icon-bell" } ),

        // avatar de l'utilisateur
        new Image( { cls: "user", src: "img/avatar.jpg" } ),
      ]
    }),

    // titre de la page
    new Label( { cls: "title", text: "Dashboard" } ),

    // contenu de la page
    new Component( { cls: "content", flex: 1 } ),
  ]
});

Tout le reste (couleurs, marges, tailles) se règle dans le CSS, à partir des classes données dans cls.

Les conteneurs disponibles

Conteneur	Rôle
HBox	Place ses enfants horizontalement.
VBox	Place ses enfants verticalement.
HSplitBox, VSplitBox	Comme HBox et VBox, avec une barre de redimensionnement entre les panneaux.
StackBox	Empile des pages et n’en montre qu’une à la fois.
GridBox	Place ses enfants sur une grille de lignes et de colonnes.
Tabs	Des pages accessibles par des onglets.
Flex	Élément vide qui prend la place restante.
Space	Élément vide de taille fixe.

Répartir l’espace

Trois propriétés, communes à tous les composants, suffisent dans la plupart des cas :

• width et height fixent une taille ;
• flex fait occuper l’espace restant. Avec un nombre, les éléments flexibles se partagent l’espace en proportion.

import { Component, HSplitBox, Listbox } from 'x4js';

// une liste de 250px à gauche, le reste pour le contenu,
// et une barre que l'utilisateur peut déplacer entre les deux
const split = new HSplitBox( {
  flex: 1,
  content: [
    new Listbox( { width: 250, items: [ { id: 1, text: "First" } ] } ),
    new Component( { flex: 1 } ),
  ]
});

Dans un HSplitBox, le panneau flex prend la place restante, et c’est son voisin que la barre redimensionne.