Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le deeplinking

Compatible Flex. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par slyc3 (Steve Domin), le 05 octobre 2008

Introduction

Comme l’indique le titre, l’objet de ce tutoriel est le deep linking dans une application Flex. Autrement dit la possibilité pour l’utilisateur de bénéficier de tous les avantages de la navigation par URL dans une application qui n’est pas composé de pages HTML. Dans un tel site l’utilisateur peut accéder à une partie précise du site simplement en entrant l’URL correspondant à cette partie, du style http://monsite.fr/contact ou http://monsite.fr/accueil . Cela permet par exemple de garder un lien direct vers cette page du site en favoris ou de la transmettre.
Tout ceci n’est pas possible dans une application Flex qui n’utilise pas le deep linking. Il est ainsi impossible de sauvegarder en favoris un state particulier de l’application. Le deep linking règle heureusement tout ça, en plus d’apporter la possibilité d’utiliser les boutons Suivant et Précédent ou de transmettre des informations pour l’application dans l’URL.

Extrait de l’aide du Flex Builder sur le deep linking :
La base du deep linking est la communication entre le navigateur et l’application Flex. Si un changement a lieu dans l’application le navigateur en est informé, si un changement a lieu dans le navigateur l’application en est informée.

Tout ceci fonctionne grâce à l’utilisation des fragments, la partie de l’URL après le #. Voici un exemple où « view=1 » est un fragment : http://monsite.fr#view=1 Si l’utilisateur se rend à une nouvelle vue dans votre application, le fragment de l’URL devient « view=2 ».L’utilisateur peut alors revenir à la vue 1 en cliquant sur le bouton Précédent de son navigateur.

Pour mettre en place le deep linking dans notre application Flex nous avons principalement besoin de deux classes : BrowserManager et URLUtil. La première nous permet de manipuler les fragments, de changer le titre de la page et gérer les évènements en rapport avec l’URL. La deuxième va nous permettre de manipuler les URL.

A savoir:
Seuls les navigateurs suivants supportent le deep linking :

  • Internet Explorer 6 et versions antérieures
  • Firefox (Mac et PC)
  • Safari (Mac)

Solution

Première application Flex utilisant le deep linking

Notre première application utilisant le deep linking est un simple TabNavigator contenant trois canvas dont les labels sont les suivants : Tab 1, Tab 2 et Tab 3.
Pour que le deep linking fonctionne il faut passer la propriété historyManagementEnabled à false car sinon le HistoryManager (qui permet d’utiliser les boutons Précédent et Suivant) interfèrerait avec le traitement de nos fragments.
Nous devons maintenant déclarer deux variables : une qui contiendra une référence de notre BrowserManager et l’autre qui nous indiquera si l’application est en train de « parser » une URL ou non.
Voici le code :

import mx.utils.URLUtil;
import mx.managers.IBrowserManager;
import mx.managers.BrowserManager;
import mx.events.BrowserChangeEvent;
 
public var browserManager:IBrowserManager;
private var isParsing:Boolean;


Nous allons ensuite créer notre première fonction : initApp() qui se déclenchera sur le creationComplete de notre application.
Cette fonction va tout d’abord récupérer l’instance du BrowserManager, puis initialiser ce dernier en spécifiant le titre HTML de la page. Ensuite on ajoute un écouteur d’événement de changement de l’URL, puis on appelle notre fonction parseURL.
Voici le code :

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

Ensuite nous créons la fonction parseURL() : cette fonction va se charger de désérialiser l’URL et de récupérer le fragment s’il y a et, suivant ce fragment, afficher le state correspondant et changer le titre de la page.
Voici le code :

private function parseURL(event:Event = null):void{
    isParsing = true;
    var o:Object = URLUtil.stringToObject(browserManager.fragment) 
    if (o.view == undefined)
      o.view = 0;
    myTabNav.selectedIndex = o.view;
    browserManager.setTitle("DeepLinking: "+myTabNav.selectedChild.label);
    isParsing = false;
}

La fonction updateURL appelle la fonction doUpdateURL si la propriété parseURL est fausse.
Voici le code de cette fonction :

private function updateURL():void{
   if (!isParsing)
	callLater(doUpdateURL);
}

Nous devons maintenant nous occuper de la fonction doUpdateURL. Dans cette fonction nous allons créer un nouvel objet qui contiendra l’index courant de notre TabNavigator. On change ensuite le titre HTML de la page puis on modifie le fragment de l’URL pour qu’il reflète l’index du TabNavigator sur lequel l’utilisateur est actuellement.
Voici le code :

private function doUpdateURL():void {
    var o:Object = {};
    o.view = myTabNav.selectedIndex;
    browserManager.setTitle("DeepLinking: "+myTabNav.selectedChild.label);
    browserManager.setFragment(URLUtil.objectToString(o));
}

Et voilà, nous avons fini notre premier exemple utilisant le deep linking. On a maintenant une URL redirigeant directement vers un onglet de notre TabNavigator.

Voici le code complet de cette application :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" historyManagementEnabled="false" creationComplete="initApp()">
 
    <mx:Script>
    <![CDATA[
        import mx.utils.URLUtil;
        import mx.managers.IBrowserManager;
        import mx.managers.BrowserManager;
        import mx.events.BrowserChangeEvent;
 
	public var browserManager:IBrowserManager;
	private var isParsing:Boolean;
 
        private function initApp():void {
            browserManager = BrowserManager.getInstance();           
            browserManager.init("", "DeepLinking: Tab 1");
            browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
            callLater(parseURL);            
        }
 
        private function parseURL(event:Event = null):void{
            isParsing = true;
	    var o:Object = URLUtil.stringToObject(browserManager.fragment);
	    if (o.view == undefined)
	       o.view = 0;
            myTabNav.selectedIndex = o.view;
            browserManager.setTitle("DeepLinking: "+myTabNav.selectedChild.label);
	    isParsing = false;
        }
 
        private function updateURL():void{
            if (!isParsing)
                callLater(doUpdateURL);
        }
 
        private function doUpdateURL():void {
             var o:Object = {};
	     o.view = myTabNav.selectedIndex;
	     browserManager.setTitle("DeepLinking: "+myTabNav.selectedChild.label);
             browserManager.setFragment(URLUtil.objectToString(o));
        }
 
 
    ]]>
    </mx:Script>
 
    <mx:TabNavigator id="myTabNav" width="350" height="300" x="28" y="26" change="updateURL()">
        <mx:Canvas label="Tab 1" width="100%" height="100%">
        </mx:Canvas>
        <mx:Canvas label="Tab 2" width="100%" height="100%">
        </mx:Canvas>
        <mx:Canvas label="Tab 3" width="100%" height="100%">
        </mx:Canvas>
    </mx:TabNavigator>
 
</mx:Application>

Télécharger le projet.



Application Flex permettant de passer des paramètres en URL

Nous allons maintenant voire une technique qui va nous permettre de passer des paramètres dans l’URL qui seront récupérés dans notre application.
Pour cette exemple j’ai repris le code de l’aide d’Adobe sur le sujet car je ne voyais pas quoi changer ou améliorer et l’on peut difficilement faire plus simple et clair.
Voici donc le code de cet exemple :

<?xml version="1.0" encoding="utf-8"?>
<!-- deeplinking/PassURLParamsAsFragments.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" 
    historyManagementEnabled="false" 
    creationComplete="init(event);">
 
    <mx:Script>
    <![CDATA[
        import mx.managers.BrowserManager;
        import mx.managers.IBrowserManager;
        import mx.utils.URLUtil;
 
        private var bm:IBrowserManager;
        [Bindable]
        private var fName:String;
        [Bindable]
        private var lName:String;            
 
        private function init(e:Event):void {
            bm = BrowserManager.getInstance();                
            bm.init("", "Welcome!");
 
            /* Le code suivant va parser l'URL qui passe firstName et lastName en paramètres après le #.
               Par exemple:
http://www.mydomain.com/MyApp.html#firstName=Nick&lastName=Danger */
            var o:Object = URLUtil.stringToObject(bm.fragment, "&");                
            fName = o.firstName;
            lName = o.lastName;                
        }
    ]]>
    </mx:Script>
 
    <mx:Form>
        <mx:FormItem label="First name:">
            <mx:Label id="ti1" text="{fName}"/>
        </mx:FormItem>
        <mx:FormItem label="Last name:">
            <mx:Label id="ti2" text="{lName}"/>
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

Télécharger le projet.

On peut voir dans la function init() que lorsqu’on récupère le fragment, on spécifie un délimiteur pour chaque paramètre. Ensuite on récupère dans nos variables fName et lName les valeurs spécifiées dans l’URL.
On peut ensuite y accéder n’importe où dans notre code.



Conclusion

Voilà, c’est fini pour cet article. On a pu voir que le deep linking sous Flex offrait de nombreuses possibilités et qu’il permettait vraiment de profiter des avantages des URLs que l'on retrouve sur un site HTML.

En savoir plus

Si vous voulez en savoir plus référez-vous à l’aide de Flex sur le sujet, venez en discuter ici sur le forum, ou bien je vous invite à m’écrire à :
slyc3isback[at]me.com