Création d’un Layout de toute pièce

Introduction

Le layout est une composante essentielle d’une application, car il détermine les sections fixes qui restent accessibles à l’utilisateur, peu importe la page consultée. Voyons ensemble comment créer un « layout » à partir de rien, en suivant une approche simple et structurée. Que ce soit pour créer une interface complexe avec plusieurs panneaux ou une structure plus minimaliste, tout est possible avec un peu de créativité.

Le layout de cet exemple comprendra quatre éléments distincts :

• Un HEADER pour inclure un logo et des boutons d’accès rapide.

• Une navSideBar pour faciliter la navigation latérale.

• Une PAGE CONTENT où sera affiché le contenu des pages.

• Un FOOTER contenant des liens utiles et les mentions légales.

En suivant les étapes proposées, il sera possible de concevoir une structure claire et flexible, prête à être adaptée à différents besoins.

Étapes à suivre

1. Création du Layout

Ouvrez le dossier « More » dans le panneau « Project Explorer ». Effectuez un clic droit sur le dossier « Layout » et sélectionnez « Add Layout ».

Donnez un nom à votre layout, puis sauvegardez-le.

2. Création d’une page

Afin de visualiser le Layout, il est nécessaire de créer une page. Dans la structure du projet, clique droit sur le dossier « Pages », puis sélectionne « Add custom page ».

Dans « Route », il convient d’indiquer le chemin de la page. Dans ce cas précis, la « route » n’a pas d’importance puisque la page est simplement un exemple, mais il est obligatoire d’y indiquer une « route » pour permettre la création de la page. Dans le menu déroulant « Layout », il faut spécifier le « layout » à appliquer à la page. Logiquement, il s’agira de celui créé à l’étape #1.

Ensuite, double-clique sur la page pour l’afficher. La structure par défaut inclura trois éléments visibles : HEADER, SIDEBAR et PageContent (partie blanche).

3. Modifier le Layout par défaut

Afin d’apporter des modifications au Layout, il sera impératif de basculer le mode « Designer » de « Page » à « Layout ».

Une fois la structure ouverte, les composantes mentionnées à la fin de l’étape 2 seront visibles.

1. Pour créer un « layout » à partir de zéro, il est nécessaire de commencer par supprimer le code CSS du « layout » par défaut. Pour cela, il faut sélectionner la « Box » parente de la structure UI, puis accéder à l’onglet « Styles » dans le panneau « component » et supprimer le code CSS existant.

      

2. Depuis la « Toolbox », glisser le composant Grid dans la Box parente. Ceci va nous permettre d’avoir un « layout » avec des lignes et des colonnes (bidimensionnelle).

   

    

3. Une fois le « component Grid » en place, il est temps de structurer le « layout ». Pour ce faire, il faut cliquer sur le bouton orange « Edit ».

   Assurez-vous de sélectionner le « component Grid » afin que le bouton « Edit » soit visible.

   

4. Après avoir cliqué sur « Edit », la structure de votre « grid » apparaît. Par défaut, elle se compose de 2 lignes et 2 colonnes, mais pas d’inquiétude, cela est entièrement personnalisable ! Pour commencer, il faudra ajouter une ligne qui représentera le « HEADER ».

   

5. Une composante « Box » est placée dans la structure, sous la « Box » parente. Pour faciliter la visualisation, un « background » rouge est ajouté à cette nouvelle « Box ». Ensuite, une composante de texte est insérée dans cette « Box ». Dans l’onglet « Attribut », la valeur « FOOTER » est ajoutée. Enfin, l’étape 12 est répétée pour le « footer ».

   

6. La deuxième ligne, composée de deux colonnes, est destinée à accueillir la barre de navigation latérale (sideBar 1) et le contenu principal (pageContent 2). Pour cela, les opérations de glisser-déposer (drag and drop) sont répétées pour placer les deux éléments respectivement dans la première et la deuxième colonne.

   

   

7. Ensuite, pour aérer le « layout », il est nécessaire d’ajouter du « sizing » à la « Box » parente. Les dimensions « width » et « height » sont définies à 100 %.

   

8. Pour terminer, la propriété des composantes « Box » sera modifiée afin de délimiter leur taille. Dans cet exemple, la valeur min-content est attribuée aux trois éléments : HEADER, sideBar et FOOTER. Ainsi, la première ligne correspondra au HEADER, la dernière ligne au FOOTER, et la première colonne sera réservée à la sideBar. Ensuite, une propriété sera appliquée à pageContent (située sur la deuxième ligne et la deuxième colonne) en lui attribuant la valeur auto.

(Optionnelle #1) : Pour mieux visualiser la taille de pageContent, il est possible d'appliquer une bordure à la « Box Content ».

(Optionnelle #2) : Il est également possible d'ajuster l'écart entre les lignes et les colonnes en modifiant les attributs de la composante Grid. Dans cet exemple, les valeurs par défaut peuvent simplement être supprimées.

Conclusion

Ce guide vous a permis d’apprendre à configurer des grilles, ajuster des propriétés CSS, et organiser les éléments de manière intuitive. Avec ces bases, il devient facile de créer des structures flexibles, prêtes à accueillir des contenus variés, tout en offrant une expérience utilisateur optimale. Que ce soit pour des projets simples ou des interfaces plus complexes, cette méthode garantit une base solide pour construire des applications modernes et dynamiques.