Design d'interfaces

Design d’interfaces en x4

Nous n’allons pas parler ici de design graphique mais plutôt de design structurel. Nous abordons ce sujet très tôt car les containers sont vraiment la base du design d’interface en x4.

Pour rappel, le design graphique est fait en css / less.

Regardons comment est dessinée la page suivante (issue de tailwindcss)

la page est constitué de différents containers, soit horizontaux, soit verticaux:

La page est un container vertical, les éléments sont ajoutés du haut vers le bas. Le header est un container horizontal, les éléments sont ajoutés de la gauche vers la droite. Le titre est un élément standard, et le contenu est un container standard qui occupe tout l’espace disponible (nous appelons ce comportement ‘flex’).

Regardons à présent le header, nous verrons qu’il contient les éléments suivants:

• le logo,

• une barre de commande qui est un container de boutons, horizontal,

  • 5 boutons

• un élément flexible vide (qui pousse le reste vers la droite)

• une icone

• et l’avatar de l’utilisateur.

Pour reproduire ceci, nous allons utiliser les HBox (container horizontal) et les VBox (container vertical).

Voici le code:

// the main page (vertical)
new VBox( {
    cls: 'main-doc',
    content: [
        // the header (horizontal)
        new HBox( {
      cls: 'header',
            content: [
                // logo
                new Image( { cls: 'logo', src: 'img/mark.svg' } ),
                // button bar (horizontal)
                new HBox( {
                    cls: 'btnbar sm:hidden',
                    content: [
                        new Button( { text: 'Dashboard' } ),
                        new Button( { text: 'Team' } ),
                        new Button( { text: 'Projects' } ),
                        new Button( { text: 'Calendar' } ),
                    ]
                }),
                // flexible element
                new Flex( ),
                // icon
                new Button( { cls: 'msgs', icon: 'var(--icon-bell)' } ),
                // user avatar
                new Image( { cls: 'user', src: 'img/photo-1472099645785-5658abf4ff4e.avif' } ),
            ]
        } ),
        // page title
        new Label( { cls: 'title', text: 'Dashboard' }),
        // page content
        new Component( { cls: 'content' } )
    ]
})