[google closure] Hello world avec Closure Library

décembre 30th, 2009 JS Antoine

Salut! Si tu veux suivre l'actualité de ce blog plus facilement, tu peux t'abonner gratuitement à son flux RSS. Ainsi tu seras mis au courant automatiquement des mises à jour.

Allez hop, maintenant que vous connaissez Google Closure on va pouvoir attaquer les tutoriels Bien sûr on ne va pas echapper au traditionnel « hello world »

Première étape, chopper la « Closure Library« . Il va falloir faire un checkout SVN du projet.

Cette ligne de commande suffit (placez vous dans le dossier de votre projet ). Sinon utilisez votre client SVN préféré…

svn checkout http://closure-library.googlecode.com/svn/trunk/ closure-library-read-only

Voila, maintenant vous avez la Closure Library nous allons pouvoir attaquer les choses sérieuses

L’objectif va être de créer un script javascript qui va créer un noeud dans l’arbre DOM de la page pour y insérer une balise H1 comprenant le texte…. »hello world »!

Allez C’est partit, créez un fichier javascript et appelez le, heu…hello.js.

A l’intérieur de celui ci, copiez ce petit bout de code. Essayer de le comprendre, les explications vont suivre

//on appelle les libs google
goog.require('goog.dom');
//on crée une fonction qui dit bonjour <img src='http://antoine.guiral.info/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
function ditBonjour() {
//on crée notre balise H1
var newTitle = goog.dom.createDom('h1', {'style': 'background-color:#EEE'},
'Hello world!');
//puis on l'append au body de notre page html
goog.dom.appendChild(document.body, newTitle);
}

Je pense que les commentaires dans le code ont dû vous aider :p Si je résume. Dans un premier temps on fait appel aux librairies google. « goog » est le namespace utilisé par google. Donc on utilise la méthode require du namespace « goog » et on lui demande de charger le namespace « goog.dom » afin de pouvoir utiliser ses méthodes. Les namespaces sont étroitements liés à l’objet, vous en déduirez qu’il va être très facile de faire du javascript objet avec Closure Library!! Ensuite nous créons notre balise h1 en utilisant la méthode « createDom » du namespace (ou package en java) « goog.dom » (lui même dans le namespace goog, vous suivez?). 3 paramètres : le type de balise qu’on veut créer, les attributs de cette balises au format json (ici des styles) et enfin le contenu de la balise.

Testons maintenant notre script. Un petit fichier html, allez, soyons fou : index.html.

<html>
<head>
<script src="closure-library-read-only/closure/goog/base.js"></script>
<script src="hello.js"></script>
</head>
<body onload="ditBonjour()">
</body>
</html>

Pas besoin d’explication je pense à ce niveau On link les librairies et notre script puis on appelle notre méthode au chargement de la page.

Plus qu’à tester dans votre navigateur favori!! (chrome? firefox?)

Visit Website

Antoine

Passionné du web et de tout ce qui s'en rapproche, je tiens se blog sans prétentions pour vous faire partager mes découverte et mes interrogations sur le développement, le management, l'agilité, la gestion de projet.

Did you enjoy this post?

If so, would you please consider sharing it with the world