But du tutorial
- Montrer comment faire un lien direct sur un onglet d’un TabPanel (cela fonctionne quasiment de la même manière avec un DeckPanel d’ailleurs).
- Montrer comment gérer l’historique dans GWT (boutons précédent et suivant du navigateur).
- Montrer un pattern pour une application avec un TabPanel.
Rappels sur GWT
Tout d’abord, petite précision sur les TabPanel : c’est un composant GWT de type composite qui comprends une TabBar et un DeckPanel. A chaque élément de la TabBar est associé un Deck, et seulement un Deck à la fois peut être affiché. C’est donc un outil très pratique qui permet de facilement gérer une interface avec des onglets.
L’exemple que je vais décrire montre comment associer un lien direct à un onglet de notre TabPanel. On peut ainsi donner une URL affichant notre application avec la vue choisie.
La solution utilise le mécanisme d’historique de GWT, qui consiste à associer un fragment de l’url à un état de l’application. Par exemple, index.html#vue1 et index.html#vue2 présente la même application mais dans un état différent. “vue1″ et “vue2″ sont appelé des tokens et ces éléments sont passé au navigateur lorsque l’utilisateur utilise les boutons “précédent” et “suivant”. Cela permet d’améliorer l’intégration de l’application dans le navigateur, ce qui est crucial pour une application AJAX.
L’application
Voici l’application qui va nous servir d’exemple :
Lorsque l’on clique sur un onglet, le token correspondant s’affiche dans l’URL de l’application. L’utilisation des boutons “précédent” et “suivant” permettent de retracer l’historique de la navigation. De plus, on peut accéder directement à la vue voulue (vous avez envie de voir un bout… d’Italie? ).
Description du projet
- Tuto1 : point d’entrée de l’application. Se charge de créer les onglets et charge l’application dans la page HTML.
- Tuto1Page : gère le TabPanel et l’historique. D’après la liste d’onglets reçus, on créé une HashMap qui associe à chaque onglet son token d’historique correspondant.
- Package tab : gère le contenu des onglets. La classe abstraite TabAbstract permet de factoriser le code et favoriser l’ajout de nouveaux onglets.
Comment cela fonctionne ?
- Cas d’un lien direct : on analyse le token reçu et on se sert de notre hashMap pour décider quel onglet affiché.
- Cas d’un changement d’onglet par l’utilisateur : grâce à un listener sur la TabBar, on peut modifier le token existant pour le remplacer par celui du nouvel onglet affiché.
Le code est très “straightforward” donc je ne pense pas qu’il soit nécessaire d’entrer dans les détails d’ordre technique. J’en profite juste pour préciser les 3 points à respecter pour gérer l’historique :
- Implémentation de l’interface ValueChangeHandler<>
- Enregistrement de l’handler (History.addValueChangeHandler(this))
- Ajout du code HTML pour le support de l’historique dans Internet Explorer (<iframe src=”javascript:” ” id=”__gwt_historyFrame” tabIndex=’-1′ style=”position:absolute; width:0;height:0 ;border:0″> </iframe>)