Dans notre dernier post nous vous avons démontré comment utiliser le NavigationManager. Voici un petit démo qui vous aidera à figurer les propriétés d'un SectionData retourné par le système.

Vous verrez, l'essayer c'est l'adopter!

DÉMO
TÉLÉCHARGER

Le NavigationManager de QuatreCentQuatre est une enveloppe ou un Proxy qui sert à titre d’interface à la classe SWFAddress de Asual afin de mieux contrôler son comportement et d’en étendre les fonctionnalités.

SWFAddress d'Asual

SWFAddress est une combinaison de techniques permettant, à travers des classes Javascript et Actionscript, le deep-linking (la possibilité d’accéder à des sections ou des pages directement à partir de la barre d’adresse du fureteur) dans des sites programmés en Flash. Cette technique, en plus de permettre l’utilisation de signets et des boutons Suivant et Précédent du fureteur, est une des meilleures solutions afin d’optimiser son site pour les moteurs de recherche.

Afin d’utiliser SWFAddress, il suffit d’intégrer l’outil dans le HTML de la façon suivante :

<script type="text/javascript" src="library/swfobject.js"></script>
<script type="text/javascript" src="library/swfaddress.js"></script>
<script type="text/javascript">
	var flashvars = {};
	var params = {};
	var attributes = {id:"flashMovie"};
	swfobject.embedSWF("navigationExample.swf", "alternateContent", "100%", "100%", "9.0.124", false, flashvars, params, attributes);
</script>
 

UTILISATION DE SWFADDRESS

L’intégration dans Flash s’effectue ensuite comme suit :

private function init() :void{
	SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange, false, 0, true);
 
	//Exemple de changement de page, mais une page ‘’/’’ est reçue par défaut au départ de l’application
	SWFAddress.setValue(‘’page1’’);
}
 
private function handleChange(evt:SWFAddressEvent):void{
	var laSection:String = evt.value; 
 
	//La seule information obtenue est un string, une condition doit donc être programmée
	switch(laSection){
		case ‘’X’’ :
			//opération afin de changer de section
			//Changer le titre de la page (défini manuellement)
			//Vérifier si c’est la section demandée n’existe pas, etc…
	}
}
 

SWFAddress présente aussi plusieurs outils pour, par exemple :

• Ouvrir des liens externes
• Reculer dans l’historique
• Monter de niveau hiérarchique (section1/section1-1 vers section1/)
• Changer le titre de la page (dans quel cas SWFAddress doit être déclaré sous la balise dans le html.

Note : SWFAddress, quand il est utilisé adéquatement, remplace et surclasse le moteur d’indexation des fichiers swf des moteurs de recherche populaires tels que Google, c’est pourquoi il est important d’inclure un fichier robots.txt afin d’empêcher ceux-ci d’indexer automatiquement les fichiers gérés par SWFAddress ou le NavigationManager.
Exemple de fichier robots.txt :

Sitemap: http://www.asual.com/sitemap.xml
User-agent: *
Disallow: /*.swf*
 

 
 
NAVIGATIONMANGER

Le mandat de SWFAddress est de permettre le deep-linking et cet objectif est atteint. Toutefois, des mécanismes personnalisés doivent être mis en place afin d’en régir le fonctionnement ainsi que les cas d’exception. Que faites-vous si vous voulez que la description des sections soit chargée à l’externe, passer à la section suivante, assigner des descriptions aux sections, obtenir les infos de son parent ou encore que vous désirez savoir à quel niveau hiérarchique se trouve la section courante? Vous devrez programmer vos propres mécanismes ou utiliser le NavigationManager.

Propriétés et méthodes publiques

 
 
Étant donné que le NavigationManager est une enveloppe à SWFAddress, les classes de ce dernier seront requises et l’intégration Javascript s’effectuera de la même façon.
 
 

 
<script type="text/javascript" src="library/swfobject.js"></script>
<script type="text/javascript" src="library/swfaddress.js"></script>
<script type="text/javascript">
	var flashvars = {};
	var params = {};
	var attributes = {id:"flashMovie"};
	swfobject.embedSWF("navigationExample.swf", "alternateContent", "100%", "100%", "9.0.124", false, flashvars, params, attributes);
</script>
 

Le NavigationManager fonctionne selon un schéma XML qui peut être défini manuellement ou chargé à l’externe, voici un exemple de la structure du XML requis.

 
<response>
<header>
	</header>
 
	<body>
<page>
			<item type="default">
				<description>Section 1</description>
				<tag>section1</tag>
				<ressource>sectionclasses.Section1</ressource>
				<subitems>
					<item type="normal">
						<description>Ceci est la section 1.1</description>
						<tag>section1-1</tag>
						<ressource>sectionclasses.Section1_1</ressource>
					</item>
					<item type="normal">
						<description>Ceci est la section 1.2</description>
						<tag>section1-2</tag>
						<ressource>sectionclasses.Section1_2</ressource>
					</item>
				</subitems>
			</item>
			< item type="notfound">
				<description>Section  not found</description>
				<tag>sectionnotfound</tag>
				<ressource>sectionclasses.Section1</ressource>
			</ item>
		</page>
	</body>
</response>
 

Les informations d’une section doivent se retrouver à l’intérieur d’une balise <item> et doivent se situer à l’intérieur du node <page> qui sert de conteneur aux informations de la navigation.

Les informations à retrouver sont les suivantes :

• L’attribut type qui peut valoir normal au default. Une valeur default indique que cette section est celle qui sera chargée par défaut lors de l’initialisation du système (au lieu de « / »)
• La balise tag, qui sera utilisée comme identifiant dans la barre d’addresse et pour google analytics.
• La balise description, qui est une valeur qui peut servir, par exemple, à nommer le bouton qui mènera à la section ou encore au titre de la page si la propriété useDescriptionAsTitle a une valeur de true.
• La balise ressource, que vous pourrez utiliser afin de spécifier à quelle ressource (classe, fichier swf ou lien externe) la section est liée.
• Une balise subitems optionnelle qui contiendra des nodes items qui seront considérés les enfants de l’item courant.

Notez qu’un deuxième node de structure similaire mais d’un type notfound peut être placé à la racine de l’arbre afin de régir la section utilisée lorsqu’une page reçue n’est pas définie dans le XML. Si ce node facultatif n’est pas défini, la page par défaut sera utilisée.

UTILISATION DU NAVIGATION MANAGER

L’intégration dans Flash est simple :

 
private function init() :void{
	NavigationManager.instance.addEventListener(NavigationManagerEvent.SECTION_CHANGED, handleSectionChanged, false, 0, true);
	NavigationManager.instance.addEventListener(NavigationManagerEvent.MENU_XML_LOAD_COMPLETE,
		handleMenuLoadComplete, false, 0, true);
	NavigationManager.instance.loadMenuXML(new URLRequest(‘’menu.xml’’));
}
 
private function handleSectionChanged (evt: NavigationManagerEvent):void{
	//Référence vers la section courante
	var laSection:SectionData = evt.section;
	//ou
	var laSection2:SectionData =NavigationManager.instance.getCurrentSection();
	//On pourrait créer une section à partir de la ressource :
	var sectionClass:Class = getDefinitionByName(e.section.ressource) as Class;
	var currentSection <img src='http://blog.quatrecentquatre.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> isplayObject = new sectionClass() as SectionObject
	addChild(currentSection);
} 
 
private function handleMenuLoadComplete (evt: NavigationManagerEvent):void{
	//Effectue les operations afin de créer le menu
	var iterator:ISubSectionIterator = NavigationManager.instance.sectionsList;
	var length:int = iterator.numSubSections;
	for (var i:int = 0; i < length; i++) {
		var laSection:SectionData = iterator.getSubSectionAt(i);
	}
}
 

Comme on peut le constater, il peut être pratique d’écouter sur l’événement MENU_XML_LOAD_COMPLETE afin de savoir si le XML est chargé alors que l’événement SECTION_CHANGED est utile afin de savoir quand une section a changé. Notez que l’événement SECTION_CHANGED ne sera jamais diffusé avant que la fin du chargement du XML externe ou avant l’assignation manuelle du XML à travers la fonction NavigationManager.instance. sectionsList. setMenuStructure().


PRATIQUES À ADOPTER

• Dans les items associée à une section (un bouton de menu par exemple) implémentez une propriété qui entreposera une référence vers le SectionData de la section qu’ils représentent afin de faciliter l’utilisation du système. En plus, l’espace mémoire requis sera plus petit qu’une valeur textuelle de son chemin enregistrée dans un String.
• Si vous avez plus d’un menu pour la navigation, vous pouvez les englober dans des nodes à la racine du groupe qui serviront ni plus ni moins de conteneurs aux sous-sections qu’ils contiendront. Pour y accéder individuellement lors de la création dynamique des menus, vous pouvez utiliser la fonction NavigationManager.instance.sectionsList.getSectionByTag(‘’conteneur X’’) à partir duquel vous pourrez accéder à ses enfants. De plus, la structure dans Google Analytics n’en sera que plus claire étant donné que la section sera identifée comme suit : conteneurX/sectionY

 
 
BIBLIOGRAPHIE
SWFAddress Bad Practices
http://www.asual.com/blog/swfaddress/2007/05/18/swfaddress-bad-practices.html
SWFAddress and robots.txt
http://www.asual.com/blog/swfaddress/2008/11/25/swfaddress-and-robots-txt.html

Télécharger la version 1.0 du NavigationManager:
LIEN