Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex DeepLinking – DeepLinking simple avec Flex par l'exemple

Tutorial Flex écrit par Vincent Le Gallic (www.frianbiz.com). Publiez vous aussi sur flex-tutorial!

Une application Flex est généralement composée de plusieurs états (ou de plusieurs pages par abus de langage).

Le fait de passer d'un état A à un état B sans rafraîchir la page est un des principes fondamental des RIA : l'expérience utilisateur est améliorée par une navigation fluide et la charge serveur est réduite (l'application Flex est téléchargée une seule fois, ensuite la communication avec le serveur ne porte que sur les données).

Mais l'abandon de l'architecture "une page par état" n'est pas sans conséquence :

Si l'URL de la page ne change pas en fonction de son état, les boutons "Précédent" et "Suivant" du navigateur ne fonctionnent pas, la gestion des Favoris ou le partage de liens se limitent à afficher l'application dans son état initial.

Le problème : Pour les navigateurs, l'état d'une application est couplé à son URL. Si nous couplons les états de notre application à des URL, à chaque changement d'état, l'URL sera modifié et notre application sera rechargée entièrement.

La solution : Utiliser les fragments (la partie d'une URL située après le #).
Lorsque l'on met à jour un fragment d'URL, la page Web ne se recharge pas mais l'historique du navigateur va enregistrer les modifications.
Coté Flex, nous pouvons coupler des états à des fragments. Si un changement intervient dans l'application, le navigateur doit être notifié (Flex modifie le fragment), si un changement se produit dans le navigateur, (l'utilisateur clique sur le bouton précédent du navigateur par exemple) l'application doit être notifiée (Flex écoute les changements d'URL).

Voila pour la théorie

En pratique, il faut créer des points d'entrée (ou liens profonds) dans notre application en utilisant les classes BrowserManager et URLUtil

Ecouter le navigateur

La première étape consiste à écouter les changements d’URL déclenchés par le navigateur :

browserManager = BrowserManager.getInstance();
browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);

Mettre à jour l'URL

Nous allons ajouter des informations à notre URL. Ces informations seront toujours situées après le "#" de notre URL pour empêcher le navigateur de rafraîchir la page à chaque changement d’URL.

L’objectif est de construire cette URL :

www.monsite.com/#page=2

• Le nom du premier paramètre est «page»
• La valeur du premier paramètre est 2

var o:Object = {};
o.page=2; //Affecter une valeur au paramètre page
var s:String = URLUtil.objectToString(o); //Formater les paramètres
browserManager.setFragment(s); // Change le fragment de l'URL situé après le '#' dans le navigateur et ajoute une entrée dans l’historique du navigateur.

Lire l'URL

Cette méthode doit nous permettre de récupérer et interpréter la partie de l'URL située après le #.

var o:Object = URLUtil.stringToObject(browserManager.fragment); // Formate la liste des paramètres.
trace(o.page); //Affiche la valeur du paramètre page

Un exemple basique de deep linking en Flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="initApp()"
    historyManagementEnabled="false"
    height="200"
    width="350">
    <mx:Script>
    <![CDATA[
    	import mx.controls.Alert;

        import mx.events.BrowserChangeEvent;
        import mx.managers.IBrowserManager;
        import mx.managers.BrowserManager;
        import mx.utils.URLUtil;

        public var browserManager:IBrowserManager;

        private function initApp():void {
            browserManager = BrowserManager.getInstance();
            browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
            browserManager.init("", "Page 1");
        }

        private var parsing:Boolean = false;
        private function parseURL(event:Event):void {

            parsing = true;

            var o:Object = URLUtil.stringToObject(browserManager.fragment);
            if (o.page == undefined)
                o.page = 0;

            tn.selectedIndex = o.page;
            browserManager.setTitle((tn.selectedIndex == 0) ? "Page 1" : "Page 2");
            tn.validateNow();
            parsing = false;
        }

        private function updateURL():void {
            if (!parsing)
                callLater(actuallyUpdateURL);
        }

        private function actuallyUpdateURL():void {
            var o:Object = {};
            var t:String = "";

            if (tn.selectedIndex == 1) {
                t = "Page 2";
                o.page = tn.selectedIndex;

            } else {
                t = "Page 1";
                o.page = tn.selectedIndex;
            }
            var s:String = URLUtil.objectToString(o);
            browserManager.setFragment(s);
            browserManager.setTitle(t);
        }
    ]]>
    </mx:Script>
    <mx:TabNavigator id="tn" change="updateURL()" width="100%">
            <mx:Panel label="Page 1">
            </mx:Panel>
            <mx:Panel label="Page 2">
            </mx:Panel>
    </mx:TabNavigator>
</mx:Application>

Même si ce premier exemple fonctionne, en approfondissant le sujet, on remarque que beaucoup  de développeurs privilégient le couple SWFAddress/SWFObject pour gérer le deep linking de leur projet Flex. En effet, la technique présentée dans cet article vous oblige à utiliser les template  HTML de Flex (beaucoup critiqués). De plus, le deep linking avec SWFAddress  propose une solution optimisée pour le référencement des applications Flex.

Enfin, pour se faire une idée du deep linking "à grande échelle" vous pouvez observer la gestion des fragments dans les URL du  site www.deezer.com.

Avec ce petit exemple très simple, nous mettons un pied dans le vaste sujet du référencement des applications Flex. Des expériences sur un site en production sont en cours   je ne manquerais pas de vous faire parts des résultats prochainement.