Créer des pages et gérer la navigation

Déploiement et publication

Résumé express : Créer plusieurs pages avec navigation, menus et routing pour une application multi-pages complète.

Introduction à la navigation

Ce tutoriel explique comment créer différentes pages dans une application Luna Park et mettre en place un système de navigation entre elles.

1. Création de pages

Principe de base

Créer une page = créer un composant avec Type : Page

Première page (Home)

1. Créer un composant, le renommer "home"
2. Type : Page
3. Ajouter un Custom Text : "This is the home page"
4. Path : laisser vide (page par défaut = "/")

Deuxième page (Options)

1. Créer un composant, le renommer "options"
2. Type : Page
3. Path : "option" (accessible via "/option")
4. Ajouter un Custom Text : "Options page"

Vérification des URLs

• Page home : URL se termine par "/"
• Page options : URL se termine par "/option"

2. Composant Menu réutilisable

Création du composant Menu

1. Nouveau composant "menu"
2. Widget → Header Menu (menu pré-fait Luna Park)
3. Layout : Stretch pour occuper tout l'espace disponible

Configuration des liens

Propriété "links" (tableau d'objets) :

Élément 1 :

• Label : "Home"
• Target : "/" (racine)

Élément 2 :

• Label : "Options"
• Target : "/option"

Comportement intelligent

• Lien actuel affiché en bleu automatiquement
• Detection automatique de la page courante

3. Intégration du menu

Dans la page Home

1. Ajouter le composant Menu
2. "Home" apparaît en bleu (page active)

Dans la page Options

1. Ajouter le composant Menu
2. "Options" apparaît en bleu (page active)

Test de navigation

En mode Preview : clic sur les liens change automatiquement de page.

4. Alternatives pour les menus

Widget Side Panel Layout

Layout → Side Panel : menu latéral gauche

Router Link pour liens individuels

Navigation → Router Link : créer des liens personnalisés

Exemple Router Link

1. Créer un Router Link
2. Texte : "Hello World"
3. Propriété target : "/option"
4. Clic redirige vers la page options

Concepts de routing

Structure d'URL

• "/" : page par défaut (home)
• "/option" : page spécifique
• Path dans les composants définit l'URL d'accès

Navigation automatique

• Changement d'URL lors des clics
• État actif visuel automatique
• Historique navigateur fonctionnel

Types de navigation

• Header Menu : navigation horizontale principale
• Side Panel : navigation latérale
• Router Link : liens contextuels dans le contenu

Avantages système

Réutilisabilité

• Composant Menu utilisable partout
• Configuration centralisée des liens
• Cohérence automatique de l'interface

Simplicité

• Pas de code de routing complexe
• Detection automatique de l'état actif
• URLs propres et SEO-friendly

Flexibilité

• Multiple types de menus disponibles
• Personnalisation via propriétés
• Extensibilité facile pour nouvelles pages

Bonnes pratiques

Nommage

• Composants pages : noms descriptifs (home, options)
• Paths : courts et explicites
• Labels menus : clairs pour l'utilisateur

Organisation

• Menu dans toutes les pages pour navigation cohérente
• Structure logique des URLs
• Composants réutilisables pour maintenance facile

Structure typique

       → Page d'accueil

/about → À propos
/contact → Contact
/products → Produits
/admin → Administration