Outils pour utilisateurs

Outils du site


cours2009:multimedia:projet_basique_deep_linking

Projet basique : Deep Linking

Le but de cette activité est de mettre en place le “deep linking” sur votre application.

On utilisera SWFAddress qui, lui-même, s'appuie sur SWFObject (une méthode alternative pour incorporer Flash dans les pages HTML).

La technique employée par SWFAddress consiste en la modification de l'ancre (”#”) de la page affichant le fichier SWF. À chaque “ancre” correspond une page à afficher.

Mise ne place

C'est sans doute le plus embêtant à faire. Mais j'ai préparé cela pour vous.

Pour fonctionner, SWFAddress nécessite :

  • Le code ActionScript (3.0) à placer avec les autres fichiers sources.
    • Basée sur SWFObject et avec du code JavaScript propre à SWFAddress. Voire les exemples des projets respectifs pour explications.
    • Cette page est dans un dossier (”dist”), car elle nécessite d'autres fichiers annexes. Il serait difficile de la laisser à la racine du projet.

À faire : Extraire le code ActionScript et les fichiers pour la page HTML.

Comme on place la page HTML dans un sous-dossier (”dist” comme distribution), il faut modifier les paramètres de publication pour placer le SWF dans ce dossier.

Vous pouvez tester le bon fonctionnement de SWFAddress en plaçant le code suivant dans le constructeur :

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, function(e:SWFAddressEvent) {
	trace(e.value);
});
SWFAddress.setValue("test");

Explications :

  • SWFAddress.setValue(”…”)
    • Change l'ancre de l'URL.
  • SWFAddress.addEventListener(SWFAddressEvent.CHANGE, …)
    • Met en place un gestionnaire d'événement qui est appelé quand l'ancre de l'URL change.
      • e.value est l'objet SWFAddressEvent passé au gestionnaire d'événement.
        • Il contient la valeur de la nouvelle ancre de l'URL.

Remarque : Pour voir l'ancre de l'URL changer, il faut publier les fichiers (contenu de dist) sur un serveur WEB.

Utilisation

La mise en oeuvre est très simple si l'on a fait la partie “navigation généralisée”.

  • Application.navigueVers(”…”) est strictement identique à SWFAddress.setValue(”…”)
    • On va faire que Application.navigueVers(”…”) appel SWFAddress.setValue(”…”)
      • Ainsi, on change l'ancre de l'URL avec le nom de la page à afficher.
  • On met en place un gestionnaire d'événement :
    • SWFAddress.addEventListener(SWFAddressEvent.CHANGE, swfAddressChange);
      • La méthode est appelée quand l'ancre change (suite à un bouton ou une modification de l'URL par l'utilisateur).
        • Cette méthode fera le travail qui était fait par Application.navigueVers(”…”)
          • Le code est plus simple, car ce n'est pas une méthode statique.
      • L'instance de SWFAddressEvent reçue par la méthode, à une propriété value qui contient la nouvelle ancre de l'URL.
        • C'est le nom de la page précédé d'un ”/”.
          • Il faut modifier les correspondances entre chaînes de caractères et les Classes en conséquence.

Cela donne :

Modifier navigueVers :

public static function navigueVers(nomPage:String):void
{
	SWFAddress.setValue(nomPage);
}

Mettre en place le gestionnaire d'événement dans le constructeur :

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, swfAddressChange);

Écrire le gestionnaire d'événement (swfAddressChange) qui fera le travail anciennement fait par navigueVers :

private function swfAddressChange(e:SWFAddressEvent):void 
{
	var nomPage:String = e.value;
	trace("SWFAddress "+nomPage);
	var PageClass:Class = {
		"/":PageAccueil,
		"/Accueil":PageAccueil,
		"/Page1":Page1,
		"/Page2":Page2
	}[nomPage];
	afficheClass(PageClass);
}

Conclusion

Sincèrement c'est une modification simple et impressionnante. Le seul réel problème c'est la mise en place des fichiers et le fait de devoir publier sur un serveur pour voir les changements d'ancre.

Ce qu'il faut retenir :

  • Comme la logique de navigation était bien encapsulée, il a suffi de la rediriger vers SWFAddress.
  • Au final, on a simplement ajouté une étape au processus de navigation.
cours2009/multimedia/projet_basique_deep_linking.txt · Dernière modification: 2010/05/10 22:00 (modification externe)