Alt-I, des informations alternatives

YAHOO nous offre une nouvelle version de YUI (YAHOO User Interface) qui passe donc au numéro 2.3.0 \o/

Cette nouvelle version apporte 250 corrections de bugs et améliorations mais surtout de nouveaux éléments !!!

• Rich Text Editor (beta) : La nouvelle classe YAHOO.widget.Editor propose d'ajouter en tout simplicité un éditeur de texte WYSIWYG du même style que FCKEditor ou TinyMCE. D'après la démo que j'ai essayé, il a l'air carrément mieux que ces précédents ! Très prometteur !!
• Base CSS : Le pack de CSS comporte maintenant Reset CSS qui permet de supprimer tout les styles par default de tout les navigateurs. Bon, là, je suis pas trop partisan de cette idée, mais ça plaira à certain…
• YUI Loader (beta) : La nouvelle classe YAHOO.util.YUILoader permet de charger des modules à la volée. Du coup, on ne charge plus que le loader au début du script. Ensuite, en cours de script on appelle l'un ou l'autre module dont on a besoin (colorpicker, treeview…) et il seront chargé seulement s'ils ne le sont pas déjà. Ça peut être bien pratique.
• ImageLoader (expérimental) : YAHOO.util.ImageLoader permet de programmer le chargement des images dans la page. Avec cette classe, on peut déterminer que telles images qui ne sont pas forcément visibles au début ne seront chargées que quand on en aura besoin. Cela permet donc d'accélérer le chargement de la page.
• Color Picker Control (beta) : YAHOO.widget.ColorPicker est un outil pour sélectionner facilement une couleur dans une palette.
• Test Utility (beta) : Voilà une classe très intéressante et très attendue ! YAHOO.tool.TestCase permet de réaliser des tests unitaires sur vos scripts. Je vais m'y pencher dès demain et vous faire un petit tutorial sur son utilisation.

Pour finir, cette nouvelle version de YUI sera plus facilement skinnable et pour le prouver, un nouveau thème par defaut plus agréable est fourni (voir screenshot).

• Vous pouvez télécharger YUI chez sourceforge immédiatement !
• Se tenir informé des nouvelles de YUI sur le YUI Blog

Quand on fait de l'AJAX, plusieurs type de réponses peuvent être utilisées. Les puristes préconiseront l'XML, l'objet XML_HTTP_REQUEST étant au départ prévu pour faire transiter de l'XML. Les débutant utiliseront du texte plein ou du HTML.

Déjà, il faut éviter le HTML. Sauf pour le chargement de zones d'interfaces bien entendu. Le genre de cas fréquent à éviter est le suivant : une liste triable avec un événement AJAX lors du changement d'ordre. La requete envoit le nouvel ordre au serveur, qui renvoit, en html la liste entière dans le nouvel ordre. Puis sur le callback, on insére ce HTML à la place de la liste initiale. Faut pas faire ça… :/ Déjà, c'est crade, mais surtout, ça demande des ressources inutiles au serveur et un temps de chargement plus long.

Ensuite, XML peut être intéressant en théorie, mais en pratique, il est très lourd : le nombre de balises peut alourdir intensément la réponse, et surtout, il faut le parser à l'arrivée.

Heureusement, il y a JSON !

JSON (JavaScript Object Notation) est une façon d'écrire des objets en javascript très pratique qui permet de placer dans une seule variable, une infinité de données structurées. Sur une seule réponse Ajax, je peux donc avoir séparément le nouvel ordre des éléments de ma liste, un code erreur, un message de feedback, etc.

Sans aller jusqu'au débat à savoir quelle est la meilleure méthode à adopter, je vais simplement vous donner un exemple de fonctionnement de la réponse de type JSON.<
Nous allons prendre comme exemple un tableau de données à deux colonnes qui se rafraîchit toute les 30 secondes.

// Nous partons d'un array en PHP :
$datas = array(
	"fraise"	=> 2,
	"cerise"	=> 5,
	"bannane"	=> 1,
	"citron"	=> 10,
	"orange"	=> 15
);
// Nous le transformons en JSON grâce à la lib json
//(ou à la main avec un foreach mais, c'est con :/)
include_once("JSON.php");
$json = new JSON();
return $json->encode($datas);
// NB, on peut JSONner des tableau, mais aussi des objet, et même des objet d'objet dans des tableaux avec des tableaux dedans :p

Le résultat est envoyé en tant que text/plain à javascript :

// Voici ce que l'objet ajax reçoit :
// {"fraise" : 2, "cerise" : 5, "bannane" : 1, "citron" : 10, "orange" : 15}
// Ne reste qu'à l'exploiter
// Allons dans la fonction de callback success de notre objet Ajax :
// Je prends l'exemple de YAHOO UI car j'ai l'habitude de travailler avec ça
// Mais on peut faire pareil avec n'importe quelle lib et même sans
YAHOO.util.Connect.asyncRequest(
	"post",
	"traitement.php",
	{
		success: function(o)
		{
			// On commence par mettre notre JSON dans une variable.
			// Pour cela, on utilise la fonction eval()
			eval ("var result = " + o.responseText);
			
			// A partir de là, toute les données sont accessibles par la varibale result
			alert (result.citron); // Affichera 10
			alert(result.['fraise']) // Affichera 2
			
			// Cette double notation nous permet d'accéder aux données même si on ne connait pas les clés
			
			// Nous allons créer un tableau qui affiche ces données
			var table = document.createElement("table");
			
			// Maintenant, on utilise un pseudo foreach pour parser l'objet result
			for (r in result)
			{
				var tr = document.createElement("tr");
				
				// r représente la clé ("fraise"),
				// result[r] représente sa valeur (2)
				var td1 = document.createElement("td");
				td1.innerHTML = r;
				
				var td2 = document.createElement("td");
				td2.innerHTML = result[r];
				
				tr.appendChild(td1);
				tr.appendChild(td2);
				table.appendChild(tr);
			}
			
			// On finit par afficher le tableau dans la page :
			document.getElementById("affichage").appendChild(
				table
			);
		}
	}
);

Dans cet exemple tout simple où on ne fait qu'afficher un tableau de données, on aurait pu simplement renvoyer le tableau mis en forme par php. Ainsi, coté Javascript, on se tape juste un document.getElementById('affichage').innerHTML o.responseText; et puis basta. Sauf que :

• Il faut écrire le tableau coté php. Du travail supplémentaire pour le serveur, un template supplémentaire si on en utilise un, du code html dans du php en plus dans le cas contraire.
• La réponse est bien plus lourde.
• Coté Javascript, on est totalement limité. En fait, on ne peut rien faire à part afficher le tableau. Si finalement, on nous demande d'afficher une liste, ou d'ajouter une colonne avec le pourcentage, on est obligé d'aller taper coté PHP. Avec le JSON, je peux ajouter cette colonne en rajoutant ceci dans la boucle for :
  var td3 = document.createElement('td');
td3.innerHTML = result[r] * total / 100; // total ayant été calculé auparavant

Ne retenez qu'une chose : dans le JSON tout est bon :D