Les Layouts

Les Layouts sont des composants essentiels qui permettent de créer une structure cohérente et réutilisable pour votre application. Ils agissent comme des templates qui encapsulent les éléments communs de votre interface utilisateur.

Un Layout est un composant parent qui partage une interface commune entre plusieurs Views, il définit la structure globale d'une section de l'application

Création d'un Layout

Un Layout est un composant Nexy spécial défini dans controller.py. Contrairement aux Views, il sert de conteneur automatiquement pour les composants View et Layout.

Voici quelques exemples de structures et d'implémentations pour vous aider à démarrer avec les Layouts.

Structure Simple

La structure la plus basique consiste en un Layout principal qui englobe la View :

Structure Basique

●controller.py
●Layout.html
●View.html

Structure Imbriquée

Pour des applications plus complexes, vous pouvez imbriquer les Layouts :

Structure Imbriquée

●controller.py
●Layout.html

admin

●View.html

users

●Layout.html
●View.html

Exemples de Code

Voici un exemple simple d'un Layout de base :

app/controller.py

from nexy import Component
from typing import Any

@Component()
def Layout(caller: Any):
  return {
      "children": caller(),
      "title": "Mon Site"
  }

app/Layout.html

<!DOCTYPE html>
<html>
  <head><title>{{ title }}</title></head>
  <body>
      <header> 
          <a href="/">Accueil</a>  
          <a href="/contact">Contact</a>
      </header>
      {{ children }}
      <footer>© 2025</footer>
  </body>
</html>

Exemple d'un Layout spécifique pour une section admin :

app/admin/controller.py

from nexy import Component
from typing import Any

@Component()
def Layout(caller: Any):
  return {
      "children": caller(),
      "user": get_current_user()
  }

app/admin/Layout.html

<div class="admin-layout">
  <nav class="sidebar">
      <div class="user-info">
          Connecté en tant que : {{ user.name }}
      </div>
      <ul>
          <li><a href="/admin/dashboard">Dashboard</a></li>
          <li><a href="/admin/users">Utilisateurs</a></li>
      </ul>
  </nav>
  <main>
      {{ children }}
  </main>
</div>

Layouts et Héritage

Les Views héritent automatiquement du Layout parent le plus proche dans la hiérarchie des dossiers. Il n'est pas nécessaire d'avoir un Layout dans chaque répertoire. Cette approche permet une organisation flexible et modulaire de votre interface utilisateur.

👌 Bravo !

Vous avez maintenant une bonne compréhension des Layouts et de leur utilisation dans Nexy. Nous sommes convaincus que cette approche vous sera très utile pour structurer votre application de manière efficace.

←views Fichiers statiques→