ObjectDumper: référence rapide pour les propriétés d'objects javascript

nospam@example.com (Argh) — Fri, 03 Sep 2004 19:36:02 +0200

Durant le développement de l'Aide de jeu pour Galactic Civilizations, j'ai aussi programmé un petit outil qui peut être bien pratique: le ObjectDumper. Il suffit d'inclure un petit fichier javascript pour pouvoir afficher toutes les propriétés et fonctions d'un object javascript - sympa pour vérifier avec quel genre d'objet on a affaire et aussi pour comparer les propriétés dans plusieurs navigateurs.

Dans sa version actuelle, il peut afficher les informations dans un calque (layer), juste à côté d'un élément dans la page ou dans une nouvelle fenêtre. Les informations incluses sont toutes les propriétés et fonctions de l'objet, le type de variable (object, châine de caractères, nombre...) et le contenu lui-même. Si le contenu est de type objet, un bouton permet d'afficher les propriétés de celui-ci.

L'utilisation est simple, vu qu'il suffit de faire ObjectDumper.dump( objet ); pour afficher les informations dans une nouvelle fenêtre. Pour les afficher dans un calque, faire ObjectDumper.dump( objet, 'layer' ); fait l'affaire, et pour les afficher juste à côté d'un objet existant de votre choix (comme un élément dans la page), il faut simplement faire ObjectDumper.dump( objet, 'inline', objetCible );. Notez que l'objet cible ne doit pas obligatoirement être une référence à un objet, mais peut aussi être l'identifiant de l'objet cible (ID).

L'ObjectDumper est disponible par mon WebCVS personnel* - cependant, le code source n'est pas encore documenté. Je l'ai testé avec Mozilla 1.7, Firefox 0.8, Internet Explorer 6 et Opera 7, donc il ne devrait pas y avoir de problème dans ces navigateurs.

* Pour télécharger un fichier, cliquer sur celui-ci puis tout à droite en haut il y a un lien 'download'.

À la recherche du meilleur départ dans Galactic Civilizations

nospam@example.com (Argh) — Wed, 01 Sep 2004 12:27:20 +0200

En parlant de javascript... pour l'Aide de jeu en ligne pour le jeu PC Galactic Civilizations, j'ai ajouté la possibilité de changer le visuel et la langue de l'interface entièrement en Javascript.

Cet outil permet de calculer la valeur d'un jeu en se basant sur un système de notation de la qualité des planètes. Chaque élément (comme une planète, un système solaire) est un objet qui peut communiquer avec les autres et peut créer son propre code HTML. Le visuel de l'interface est défini en grande partie dans des feuilles de style, le code HTML étant le plus simple possible. La base de l'outil est l'objet gameManager - celui-ci s'occupe des éléments de navigation, et offre une série de fonctions dont les autres objets peuvent se servir, comme la fonction button() qui crée le code nécessaire pour un bouton.

Le changement de langue n'était pas trop difficile à faire - j'ai d'abord fait une recherche avec Google sur les possibilités d'inclure des fichiers javascript par le javascript, mais la méthode du document.write( '[balise script]' ); faisait que Mozilla rechargeait la page. Finalement j'ai trouvé une méthode plus élégante pour le faire: créer la balise 'script' avec la fonction document.createElement( 'script' ) ; et l'ajouter à la balise 'head' par document.getElementsByTagName('head')[0].appendChild( tag );. Comme mes définitions de langue sont composées d'une longue liste de variables, en chargant un de ces fichiers les variables existantes sont remplacées. Ensuite, une simple demande à chaque objet d'actualiser son contenu HTML suffit pour passer à la nouvelle langue.

Le changement de visuel lui a été un peu plus difficile: le principe est le même qu'avec le changement de langue, sauf qu'ici on insère une balise 'link' au lieu de la balise 'script' pour charger une nouvelle feuille de style. Le hic est que les styles définis dans les deux feuilles de style se complémentent: un padding:8px; peut être défini pour la balise 'h1' dans la première feuille de style, si la deuxième n'en a pas, ce style ne sera pas effaçé... Solution: effacer tous les styles existants avant de charger la nouvelle feuille de style. Cette opération est simple, il suffit de passer dans chaque feuille de style chargée et d'effacer les styles un par un avec la fonction document.styleSheets[x].deleteRule( x );. Peter-Paul Koch a une référence très complète là-dessus.

Pour l'instant, l'Aide de jeu ne fonctionne qu'avec des navigateurs basés sur le Gecko engine, comme Mozilla ou Firefox: j'ai utilisé des fonctions spécialisées comme addEventListener() (pour vérifier quand le fichier javascript est chargé), mais aussi parce-que je n'ai utilisé que la méthode recommandée par le w3c pour accéder aux informations de style.

Le résultat est ce que j'attendais: un outil en ligne très rapide, qui aurait demandé bien plus de travail avec un mélange javascript/PHP, et aurait été bien loin de cette rapidité. La seule chose qui reste à faire maintenant est d'ajouter le bouton 'sauvegarder' et ça marchera du tonnerre Rajouter cette fonctionalité prendrait un petit peu de temps, mais toutes les fonctions nécessaires sont déjà présentes: si vous avec cliqué sur un des boutons 'Vue XML', vous avez déjà remarqué que tous les objects peuvent se sérialiser en XML. De là il suffirait d'ajouter le stockage de cet XML par un script PHP, et de pouvoir le recharger et de créer les structures à partir de ça... mais ça, je vais le garder pour une autre entrée dans mon blog

Le Temple du Argh tout puissant - DHTML/Javascript

ObjectDumper: référence rapide pour les propriétés d'objects javascript

À la recherche du meilleur départ dans Galactic Civilizations