Alt-I, des informations alternatives - Informatique, Cultures alternatives et Geekeries saupoudrées d'Ajax. - AJAX

Extensions Firebug

Hadrien — Wed, 09 Jul 2008 13:46:00 +0200

Dascritch m'a indiqué ce matin un article très intéressant listant les meilleurs extensions pour Firebug. Pour rappel, Firebug est une extension Firefox incontournable pour tout développeur, facilitant grandement le debug dans le développement web.

On y retrouves des extensions très pratiques telles que :

Firecookie qui permet de lister tout les cookies de la page en cours et de les éditer
FirePHP, dont je parlais il y a peu, permet de logguer des informations dans la console Firebug à partir d'un script coté serveur, sans modifier le contenu de la réponse envoyée au navigateur. Les logs étant passés dans le header de la page. Nickel pour débugger de l'ajax.
RainbowForFirebug coloriera le code javascript dans votre console Firebug.
Jiffy calculera le temps d'éxécution de chacune de vos fonctions Javascript.

L'article en recense encore plein d'autres, mais c'était celles qui me paraissaient les plus intéressantes. Bon débug

Menu en colonne en Javascript

Hadrien — Tue, 12 Feb 2008 12:55:00 +0100

Xylpho voulait pour son site, un menu en colonne comme le fait Mac OS X :

Ce menu devait être à la fois accessible, référençable et dynamique. Donc, pas de flash ! Javascript à la rescousse. Je lui ai donc codé une classe JS qui construit un menu en colonne à partir de listes imbriquées…

En gros, tout le plan du site est intégré dans la page et structuré avec des ul et des li imbriqués :

Voir le code HTML

<ul id="menuCol">
	<li>
		2005
		<ul>
			<li>
				July
				<ul>
					<li>
						27
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=4">
									Joulie Interface
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				September
				<ul>
					<li>
						29
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=11">
									Version Texte
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				October
				<ul>
					<li>
						29
						<ul>
							<li class="selected">
								<a href="http://www.alti.info/post/2008/02/10/?id=18">
									Qjelt Octobre en VideoCast
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				November
				<ul>
					<li>
						08
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=19">
									www.alti.info
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				December
				<ul>
					<li>
						08
						<ul>
							<li>
								<a href="http://www.alti.info/post/2008/02/10/?id=20">
									OW Pick !!!
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Ensuite, ma classe Javascript va masquer et afficher les bons ul selon les clicks sur les li. Le menu se crée en créant un nouvel objet de la sorte :

<script type="text/javascript" charset="utf-8">
//<![CDATA[
	var test = new MenuCol.Menu('menuCol');
	MenuCol.Item.open();
//]]>
</script>

La statique open() permet d'initialiser le menu sur le li qui contient la classe 'selected' afin de revenir sur le menu correspondant après un chargement de page.

Tout ceci fonctionne grâce au script MenuCol.js, que je rends disponible sous licence GPLv3. Faites en ce que voulez, mais souvenez vous de citer mon nom.

Voir le code Javascript

// Global object
var MenuCol = {};

/**
 * Flag to stop propagation of event
 * @type Boolean
 */
MenuCol._stopPropagation = false;

/**
 Shortcut to document.getElementById
 * @param {String/Element} id Element or Element's id
 * @returns Element
 */
MenuCol.get = function(id)
{
	var elmt = document.getElementById(id);
	if (elmt)
	{
		return elmt;
	}
	return id;
};

// Objects collection
MenuCols = new Array();

/**
 * Menu class
 * @constructor
 * @param {String/Element} elmt UL menu Element or it's id
 * @author Hadrien Lanneau
 */
MenuCol.Menu = function(elmt)
{
	/**
	 * Element
	 * @type Element
	 */
	this.element = MenuCol.get(elmt);
	
	/**
	 * Items inside Menu
	 * @type Array
	 */
	this.items = new Array();
	
	MenuCols.push(this);
	
	this.init();
}
MenuCol.Menu.prototype =
{
	/**
	 * Initialize
	 */
	init: function()
	{
		// Make Item object with all li children
		var lis = this.element.getElementsByTagName('li');
		for (var i = 0; lis[i]; i++)
		{
			if (lis[i].parentNode == this.element)
			{
				var item = new MenuCol.Item(
					lis[i]
				);
				item.parent = this;
				this.items.push(
					item
				);
			}
		}
	},
	/**
	 * Hide menu
	 */
	hide: function()
	{
		this.element.style.display = 'none';
	},
	/**
	 * Show Menu
	 */
	show: function()
	{
		this.element.style.display = 'block';
	}
};

MenuCol.Items = new Array();
/**
 * MenuCol.Item class
 * @constructor
 * @param {String/Element} elmt UL menu Element or it's id
 * @author Hadrien Lanneau
 */
MenuCol.Item = function(elmt)
{
	/**
	 * Element
	 * @type Element
	 */
	this.element = MenuCol.get(elmt);
	
	/**
	 * Submenu
	 * @type MenuCol.Menu
	 */
	this.submenu = null;
	
	MenuCol.Items.push(this);
	
	this.init();
}
MenuCol.Item.prototype =
{
	/**
	 * Initialize
	 */
	init: function()
	{
		// Make Menu object with all UL children
		var uls = this.element.getElementsByTagName('ul');
		for (var i = 0; uls[i]; i++)
		{
			if (uls[i].parentNode == this.element)
			{
				this.submenu = new MenuCol.Menu(
					uls[i]
				);
				this.submenu.parent = this;
				this.submenu.hide();
			}
		}
		
		// Add on click Event on element
		this.element.parent = this;
		this.element.onclick = this.onclick;
	},
	/**
	 * onclick event
	 */
	onclick: function()
	{
		// Exec only on first fire
		if (!MenuCol._stopPropagation)
		{
			// If item hasn't submenu, we don't do anything
			if (!this.parent.submenu)
			{
				return true;
			}
			
			// Hiding all sub menus of same level
			for (var i = 0; this.parent.parent.items[i]; i++)
			{
				if (this.parent.parent.items[i].submenu)
				{
					this.parent.parent.items[i].submenu.hide();
					this.parent.parent.items[i].activate(
						true,
						true
					);
				}
			}
			
			// …and their children
			for (i = 0; this.parent.submenu.items[i]; i++)
			{
				this.parent.submenu.items[i].activate(true);
				if (this.parent.submenu.items[i].submenu)
				{
					this.parent.submenu.items[i].submenu.hide();
				}
			}
			
			// Show corresponding sub menu
			this.parent.submenu.show();
			
			// And its parents
			var parent = this.parent ?
				this.parent :
				null;
			while (parent)
			{
				parent.parent.show();
				parent.activate(
					false,
					false
				);
				parent = parent.parent ?
					parent.parent.parent :
					null;
			}
			
			// Activate item
			this.parent.activate(
				false,
				true
			);
			
			// Prevents event propagation on parent's elements
			MenuCol._stopPropagation = true;
			setTimeout(
				function()
				{
					MenuCol._stopPropagation = false;
				},
				20
			)
		}
	},
	/**
	 * activate element
	 * @param {Boolean} oupa True to deactivate
	 */
	activate: function(oupa, submenu)
	{
		// Activate item
		if (!oupa)
		{
			this.element.className = 'selected';
		}
		else
		{
			this.element.className = '';
		}
		// Activate submenu
		if (submenu)
		{
			if (!oupa)
			{
				this.submenu.element.className = 'selected';
			}
			else
			{
				this.parent.element.className = '';
			}
		}
	}
};

/**
 * Open menu on activated li. Will open on li with 'selected' class
 */
MenuCol.Item.open = function()
{
	for (var i = 0; MenuCol.Items[i]; i++)
	{
		if (MenuCol.Items[i].element.className == 'selected')
		{
			if (MenuCol.Items[i].submenu)
			{
				MenuCol.Items[i].element.onclick();
				
			}
			else
			{
				MenuCol.Items[i].parent.parent.element.onclick();
				MenuCol.Items[i].activate();
			}
		}
	}
}

Voici un exemple du résultat qui affiche les archives de ce blog.
Télécharger le script

Requêtes Ajax et Internet Explorer

Hadrien — Fri, 04 Jan 2008 12:05:00 +0100

J'inaugure une nouvelle catégorie "IE SUX" dans laquelle j'exprimerais mes coup de gueules envers les malfonctions de cette bouse infâme qu'est Internet Explorer. Aujourd'hui, IE et les requêtes Ajax.

Un bug sur Over-blog : impossible de mettre un caractère accentué à un nom de catégorie sous IE. Celui-ci envoie systématiquement le string en ISO au lieu d'UTF-8.

Après moulte fouilles et tentatives de debug, j'ai finalement trouvé la cause du problème. Il s'agit en fait d'un bug de l'objet ActiveX XMLHTTP de IE (6 et 7). Lorsque l'on envoie des données via une requête Ajax en Get, IE se fait un malin plaisir à envoyer la donnée en tant que UTF-8, mais en réalité en ISO. D'où la réception d'un caractère foireux. Par contre, si les données sont envoyées en Post, aucun problème, c'est de l'UTF-8 qu'il envoit.

Conclusion, envoyez toute vos requêtes Ajax en Post. Merci Microsoft.

Ajax, navigation et accessibilité… Exemple pratique

Hadrien — Sat, 08 Sep 2007 23:42:00 +0200

J'ai codé à l'arrache un exemple pratique pour illustrer mon astuce concernant la navigation en Ajax accessible. Bon, c'est pas encore top au point, mais ça fonctionne nickel sous Firefox. Sous Safari 2, l'historique n'est pas modifié donc, pas de précédent ou suivant. Seul le rechargement de page fonctionne. Opera 9.5, seul le bouton Suivant ne fonctionne étrangement pas. Et IE, j'ai pas testé : j'ai pas envie de lancer VMWare : j'attends vos retours en commentaires.

Donc, de quoi s'agit il ? Nous avons une liste paginée. Sont affichés la liste des articles de ce blog par lot de 10 éléments. Une pagination en dessous permet d'afficher les 10 éléments suivants grâce à Ajax. Vous constaterez que lors d'un clic sur un numéro de page, une ancre s'ajoute à l'url. Mais aucun rechargement de page ne s'effectue.

Faîtes donc le test suivant : naviguez de page en page, puis rechargez la page. Vous vous retrouverez à la même pagination où vous étiez \o/ Attention, ce n'est pas fini. Cliquez sur le bouton précédent de votre navigateur… Pas de rechargement ni de changement de page, mais vous voilà quand même à la pagination précédente, toujours en ajax :o Revenez donc en arrière deux ou trois fois, puis repartez en avant. Même principe. Tout se charge par Ajax.

Voilà une application Ajax totalement accessible et qui reste utilisable comme tout site traditionnel.

Ah oui, ça se passe ici :

Exemple pratique pour rendre Ajax accessible

La prochaine étape sera d'écrire un module pour YUI afin de faciliter l'implémentation de cette méthode.

Ajax, navigation et accessibilité…

Hadrien — Sun, 26 Aug 2007 14:55:00 +0200

Quand on fait un site tout en Ajax, la problématique principale est l'accessibilité. Quand le contenu de la page web est chargée avec Ajax, il n'y a plus de changement physique de page, donc d'url. Du coup, les boutons précédents, suivant et recharger du navigateur ne serve à rien, hormis ramener à la page d'accueil du site. Sans débattre sur l'utilité de faire un site 100% ajax, voici un moyen de ne pas perdre le fil de la navigation.

Imaginons le cas pratique suivant. J'arrive sur une page avec une liste d'items et des boutons de pagination (précédent - 1 - 2 -3 - suivant). Je clique sur suivant, et seul la liste des items est chargée via ajax. Je clique 3 fois sur suivant, je suis donc à 4 chargements de listes, et je trouve enfin ce que je cherche. Sur l'item en question, un lien externe m'envoie vers une nouvelle page. Zut, c'était pas ça. Je clique sur le bouton précédent de mon navigateur… Arf… Me revoilà à la première page de pagination de ma liste d'item. Heureusement que je me souviens que j'était à la 4° page, sinon, j'aurais du me retaper tout les clics sur suivant jusqu'à reconnaitre la page où j'étais.

Pour éviter ceci, je vous propose une solution toute simple. Le concept est de placer des paramètres en tant qu'ancre dans l'url :

Nous arrivons sur la page principale, nous sommes à l'adresse :
http://www.monsiteenajax.com/liste.html

Je clique sur suivant, l'adresse ne change pas. C'est ici qu'il faut agir. Lors du clic, je vais ajouter une ancre à l'url avec mes paramètres pour me retrouver avec une url de ce style :
http://www.monsiteenajax.com/liste.html#page-2

Pour ce faire, il suffit de changer la valeur de window.location. Voici une fonction qui permet de changer cette valeur :

var changeAnchor = function(anchor)
{
	// Si l'url possède déjà une ancre
	if (window.location.href.match(new RegExp('#.*$')))
	{
		window.location = window.location.href.replace(
			new RegExp('#.*$'),
			'#' + anchor
		);
	}
	// Sinon, il suffit de l'ajouter à la fin
	else
	{
		window.location = window.location.href + "#" + anchor
	}
	
	return window.location;
}

Donc, lors de l'évenement qui va déclencher la requete ajax et l'affichage de la deuxième page de la liste, je fais un petit changeAnchor('page-2') afin de changer mon ancre et garder en mémoire que je suis sur la pagination numéro 2.
Ainsi, si je change de page, puis que je clique sur Précédent, ça sera l'url http://www.monsiteenajax.com/liste.html#page-2 qui sera chargée.

Ne reste plus qu'à exploiter cette fonction. C'est encore tout simple. Implémentez cette fonction :

var getAnchor = function()
{
	return window.location.href.match(
		new RegExp('#.*$')
	);
}

Il ne reste plus qu'à l'appeler au load de la page, et de faire les actions relatives à ce qu'elle renvoit.

Reprenons notre cas. Je clique sur le lien pour avoir la pagination suivante. Cela va appeler une fonction qui va charger la liste et à la fin, elle va faire un changeAnchor('page-2').

Sur le onload de la page, je met un switch sur le getAnchor pour effectuer les actions relative. Donc, là, si mon anchor contient page, il faudra afficher la page dont le numéro suit :

window.onload = function()
{
	// Je récupère l'ancre et la splite sur le '-' car
	// j'ai décidé de séparer mes paramètres par des '-'
	var startParams = getAnchor()page.split('-');
	
	// Je teste le premier paramètre
	switch (startParams[0])
	{
		case 'page':
			// Je suis dans le cas de la pagination
			
			// Si le deuxième paramètre est setté
			if (startParams[1])
			{
				// J'apelle ma méthode d'affichage de page
				// avec le paramètre adéquat
				displayPage(
					startParams[1]
				);
			}
			break;
		
		// Je peux imaginer un autre cas
		case 'autrecas':
			doSomething();
			break;
	}
}

Et voilà. Si je quitte cette page, puis que j'y reviens en consultant mon historique, je reviendrais à l'affichage ajax correspondant. Autre bonus, à chaque fois que l'on change l'ancre via changeAnchor(), c'est une nouvelle entrée dans l'historique du navigateur qui se crée. Donc, on peut réellement utiliser les boutons de la navigation comme pour un site traditionnel.

Un autre avantage très important, c'est que le site redevient bookmarkable. L'utilisateur peut sans problème mettre en signet une page modifiée par ajax.

Si vous avez des remarques ou des améliorations à proposer, n'hésitez pas

EDIT : Voici un exemple pratique.