Browser History

La classe BrowserHistory dans webforJ fournit une API de haut niveau pour interagir avec l'historique du navigateur. L'historique du navigateur permet aux applications web de suivre la navigation de l'utilisateur au sein de l'application. En utilisant l'historique du navigateur, les développeurs peuvent activer des fonctionnalités telles que la navigation arrière et avant, la préservation de l'état et la gestion dynamique des URL sans nécessiter de rechargements de page complets.

Naviguer dans l'historique

Gérer l'historique du navigateur est une fonctionnalité essentielle de la plupart des applications web. L'API BrowserHistory permet aux développeurs de contrôler comment les utilisateurs naviguent à travers les pages et les états de leurs applications, imitant ou modifiant le comportement standard du navigateur.

Initialiser ou récupérer une instance d'historique

Pour utiliser l'API BrowserHistory, vous avez deux principales options pour obtenir une instance d'historique :

Créer un nouvel objet d'historique : Si vous travaillez indépendamment d'un contexte de routage, vous pouvez créer une nouvelle instance de la classe BrowserHistory directement.

BrowserHistory history = new BrowserHistory();

Cette approche est adaptée aux scénarios où vous devez gérer l'historique explicitement en dehors d'un cadre de routage.

Récupérer l'historique depuis le Router : Si votre application utilise la solution de routage de webforJ, le composant Router crée et gère une instance partagée de BrowserHistory. Vous pouvez accéder directement à cette instance depuis le routeur pour une approche de gestion de l'historique cohérente à travers votre application.

BrowserHistory history = Router.getCurrent().getHistory();

Cette méthode est recommandée lorsque votre application repose sur le routage, car elle maintient la constance dans la gestion de l'historique à travers toutes les vues et actions de navigation.

Gérer l'historique

Les méthodes suivantes peuvent être utilisées pour la navigation dans l'historique dans une application webforJ :

back(): Déplace l'historique du navigateur d'un pas en arrière, simulant un utilisateur appuyant sur le bouton arrière dans son navigateur. S'il n'y a plus d'entrées dans la pile d'historique, il reste sur la page actuelle.
```
history.back();
```
forward(): Déplace l'historique du navigateur d'un pas en avant, simulant un utilisateur appuyant sur le bouton avant dans son navigateur. Cela ne fonctionne que s'il y a une entrée devant dans la pile d'historique.
```
history.forward();
```
go(int index): Navigue vers un point spécifique dans la pile d'historique selon un index. Un nombre positif avance, un nombre négatif recule, et zéro recharge la page actuelle. Cette méthode offre un contrôle plus granulaire par rapport à back() et forward().
```
history.go(-2); // Recule de deux entrées dans la pile d'historique
```
size(): Récupère le nombre total d'entrées dans la pile d'historique de la session, y compris la page actuellement chargée. Ceci peut être utile pour comprendre le chemin de navigation de l'utilisateur ou pour implémenter des contrôles de navigation personnalisés.
```
int historySize = history.size();
System.out.println("Longueur de l'historique : " + historySize);
```
getLocation(): Retourne le chemin URL actuel par rapport à l'origine de l'application. Cette méthode aide les développeurs à obtenir le chemin actuel, ce qui est utile pour gérer le routage basé sur l'URL dans les applications à page unique.
```
Optional<Location> location = history.getLocation();
location.ifPresent(loc -> System.out.println("Chemin actuel : " + loc.getFullURI()));
```

Comprendre comment naviguer efficacement est la pierre angulaire de la construction d'applications dynamiques. Une fois que vous avez les fondamentaux de la navigation, il est essentiel de savoir comment accéder et mettre à jour les URL associées à ces événements de navigation.

Accéder et mettre à jour l'URL

Un aspect fondamental de la navigation et de la gestion de l'historique du navigateur est d'être capable d'accéder et de mettre à jour le chemin URL actuel de manière efficace. Cela est essentiel dans les applications web modernes, où les changements d'URL correspondent à différentes vues ou états au sein de l'application. L'API BrowserHistory offre un moyen simple de récupérer et de manipuler le chemin actuel par rapport à la racine de l'application.

webforJ Router

Voir l'article sur le Router pour en savoir plus sur la gestion complète des URL et des itinéraires.

getLocation() récupère le chemin URL actuel par rapport à l'origine de l'application. La méthode getLocation() retourne un Optional<Location>, vous permettant d'obtenir la partie chemin de l'URL sans le domaine.

Optional<Location> location = history.getLocation();
location.ifPresent(loc -> System.out.println("Chemin actuel : " + loc.getFullURI()));

Gérer l'état

BrowserHistory vous permet de sauvegarder et de gérer des informations d'état personnalisées à l'aide des méthodes pushState() et replaceState(). En utilisant les méthodes de gestion d'état, vous pouvez contrôler quelles informations sont stockées comme partie de l'entrée d'historique, ce qui aide à maintenir une expérience utilisateur cohérente lors de la navigation en avant et en arrière dans votre application. Les méthodes suivantes peuvent être utilisées pour gérer l'état dans votre application webforJ.

pushState(Object state, Location location): Ajoute une nouvelle entrée à la pile d'historique. Accepte un objet d'état et un objet Location représentant la nouvelle URL.

Location location = new Location("/new-page");
history.pushState(myStateObject, location);

replaceState(Object state, Location location): Remplace l'entrée actuelle de l'historique. Cela ne crée pas de nouvelle entrée dans la pile comme la méthode ci-dessus.

Location location = new Location("/updated-page");
history.replaceState(myStateObject, location);

getState(Class<T> classOfT): Récupère l'objet d'état associé à l'entrée actuelle de l'historique. Cette méthode retourne un Optional contenant l'objet d'état, qui est désérialisé dans la classe spécifiée.

Optional<MyState> currentState = history.getState(MyState.class);
currentState.ifPresent(state -> System.out.println("Page actuelle : " + state.getViewName()));

Écouter les changements d'état

La classe BrowserHistory permet d'enregistrer des écouteurs d'événements qui réagissent aux changements dans l'état de l'historique.

La méthode addHistoryStateChangeListener(EventListener<HistoryStateChangeEvent> listener) enregistre un écouteur qui se déclenche lorsque l'état change, par exemple lorsque l'utilisateur clique sur les boutons arrière ou avant du navigateur. Cette méthode configure un écouteur pour l'événement popstate du navigateur, permettant à votre application de répondre aux actions de l'utilisateur ou aux changements d'état déclenchés par programme.

history.addHistoryStateChangeListener(event -> {
  System.out.println("L'état de l'historique a changé vers : " + event.getLocation().getFullURI());
});

Gérer efficacement l'état vous permet de créer des applications qui réagissent dynamiquement aux actions de l'utilisateur. Les utilisateurs peuvent naviguer dans votre application sans perdre le contexte, ce qui rend l'expérience plus fluide et intuitive. De plus, la sauvegarde de l'état permet des fonctionnalités avancées telles que la restauration des positions de vue, le maintien des paramètres de filtre ou de tri, et le support des liens profonds, tout cela contribuant à une application plus engageante et fiable.

Naviguer dans l'historique​

Initialiser ou récupérer une instance d'historique​

Gérer l'historique​

Accéder et mettre à jour l'URL​

Gérer l'état​

Écouter les changements d'état​