Posts tagged ‘Javascript’

GWT : javascript sans les maux de tête ?

Je suis un fan inconditionnel du framework jquery. Rapide, cross browser et surtout incroyablement pratique a utiliser grace à la magie du chaînage.

Toutefois, jquery n’est pas la librairie a utiliser si vous souhaitez déveloper des applications dites RIA, ou Rich Internet Applications.

Je vous propose aujourd’hui de découvrir avec moi un outil fourni par google appelé GWT.

Je pense qu’aujourd’hui cette librairie est mature : elle existe depuis plus de deux ans maintenant, et est utilisée sur des sites mis en production. Les avantages pour le programmeur Java EE (anciennement J2EE) sont inombrables: intégrations facile avec les serveurs applicatifs (Tomcat pour ne pas le citer – ca va être notre cas, mais aussi Jetty et Resin), intégration parfaite avec Netbeans (et probablement aussi avec Eclipse) grace a des plugins, rédaciton du code en Java, respects des règles de constructions propres (programmation par interfaces et non par implémentation, utilisation de RPC, implémentation des principaux design patterns: observer, MVS, Fabrique, etc…)

Voici donc l’heure de passer à son utilisation. Cette série d’articles se verra exclusivement rédigée en Français, car pour les anglophones, le site de référence est tout simplement digne de google.

——-

Après quatre jours d’utilisations intensive de GWT, je suis littérallement comblé. Il est difficile de dire du mal du Framework de développement RIA de Google tant il est facile à utiliser et bien pensé. Du point de vue du programmeur java, GWT est tout simplement puissant, limpide, et élégant.

Publicités

8 octobre 2008 at 17 h 05 min Laisser un commentaire

Probleme de portée de variable et boucles for avec javascript

il peut arriver d’avoir besoin de définir des attributs d’une balise HTML de manière programmée.
Imaginez par exemple qu’on veuille afficher le titre (attribut title) d’une centaine de balise <a> lorsqu’elle sont survolée par la souris.

Nous pourrions commencer par écrire une boucle, quelque chose dans ce style:

<html><a id="0" href="./0" title="the first"> lien n.0 </a>
<a id="1" href="./1" title="the second"> lien n.1 </a>
<a id="2" href="./2" title="the third"> lien n.2 </a>
<a id="3" href="./3" title="the fourth"> lien n.3 </a>
<a id="4" href="./4" title="the fifth"> lien n.4 </a></html>


<script>
var number_of_link = 5;
for(i=0;i<number_of_link;i++){
document.getElementById(i).onmouseover =
function(){
alert("Je suis le lien numéro "+i)
};
}
</script>

Bon début, non ? Mais essayez ce code. Vous avez vu le probleme ?

Décortiquons ce qui se passe:

Nous commençons par itérer avec une variable appeée i. Cette variable a une portée globale. Pour chaque élément trouvé, nous attachos a l'évenement onmouseover une nouvelle fonction, qui affiche le contenu de la variable globale i. Mais cette variable est passée par référence, ainsi c'est toujours la dernière valeur de la variable i qui est affichée par cette fonction! Nous voudrions qu'elle soit apssée par valeur!

Rassurez vous, la solution n'est pas très loin: il suffit d'attacher a l'évènement onmouseover un objet Function créé par le constructeur a partir d'un texte qui défnira la fonction de manière statique.

<html><a id="0" href="./0" title="the first"> lien n.0 </a>
<a id="1" href="./1" title="the second"> lien n.1 </a>
<a id="2" href="./2" title="the third"> lien n.2 </a>
<a id="3" href="./3" title="the fourth"> lien n.3 </a>
<a id="4" href="./4" title="the fifth"> lien n.4 </a></html>

<script>
var number_of_link = 5;
for(i=0;i<number_of_link;i++){
document.getElementById(i).onmouseover =
new Function("alert(\"je suis le lien numéro \"+i)");
}
</script>

Le constructeur Function permet de prendre une chaine de caractère et de la déclarer en tant que fonction. Cette astuce oblige l'interpreteur javascript a construire la chaine de caractère, et seulement après à compiler la fonction elle même. AInsi, ous arrivons à écrire un nombre dans une fonction statique, et a obtenir l'effet désiré lors du survol.

Pour plus d'informations sur l'objet Function, je vous recommande la lecture de cette page:
http://www.howtocreate.co.uk/tutorials/javascript/functions

Jetez un oeil également aux articles avec les mots clés "javascript" et " closure"
http://www.jibbering.com/faq/faq_notes/closures.html

26 août 2008 at 13 h 05 min Laisser un commentaire

Dealing with Javascript variable scope and for-loop or external function.

Sometimes, you need to set some HTML attributes automatically with a batch declaration.
By example imagine you want to set an mouseover over hundred of <a> links, in order to display their title content in an alert box. How to proceed ?

You could try to achieve this using a loop. Something like:

<html>
<a id="0" href="./0" title="the first"> link number 0 </a>
<a id="1" href="./1" title="the second"> link number 1 </a>
<a id="2" href="./2" title="the third"> link number 2 </a>
<a id="3" href="./3" title="the fourth"> link number 3 </a>
<a id="4" href="./4" title="the fifth"> link number 4 </a>
</html>


<script>
var number_of_link = 5;
for(i=0;i<number_of_link;i++){
document.getElementById(i).onmouseover =
function(){
alert("I'm the number "+i+" link")
};
}
</script>

Just try this tiny snippet: have you seen the problem ?
Every link has a function showing the last value of the i variable!

So, what does happened ?

We start iterating over a integer called i. This variable is in a global socpe. For each element found, we set a new function, wich display the i value. But the variable is passed by raference, and we want it to be passed by value !

Fortunately, we have a solution: we will dynamically add a new Function object, which will result in « statically » defined function.


<html>
<a id="0" href="./0" title="the first"> link number 0 </a>
<a id="1" href="./1" title="the second"> link number 1 </a>
<a id="2" href="./2" title="the third"> link number 2 </a>
<a id="3" href="./3" title="the fourth"> link number 3 </a>
<a id="4" href="./4" title="the fifth"> link number 4 </a>
</html>


<script>
var number_of_link = 5;
for(i=0;i<number_of_link;i++){
document.getElementById(i).onmouseover =
new Function("alert("I'm the number "+i+" link)");
}
</script>

The Function constructor allow us to take a String, and declaring it as a function. This tip forces the js interpetor to build the string, and only after, to build the function itself. So we achieve to have a static number written in each function we defined and desired omouseover effect.

For further information about function creation, i should recommend you this page:

www.howtocreate.co.uk/tutorials/javascript/functions

Have a look too, to some article describing the javascript closure:

www.jibbering.com/faq/faq_notes/closures.html

26 août 2008 at 12 h 44 min 7 commentaires