Enjoy.

A chaque fois que vous écrivez du code Java fonctionnant à la fois côté serveur et client, il faut garder en tête de :

– GWT utilise directement les composants du navigateur : il utilise le DOM interne, ainsi que l’objet XmlHttpRequest- et donc ne connait ni Sax, ni JDOM, si le java.net.HttpClient
– Ne pas utiliser de fonctions System : il n’y a pas de compatibilité entre la JVM et le moteur du navigateur. java.util.Locale est incompatible avec GWT car est capable de lire une Locale par défaut dans le System de la JVM
– Ne pas lire un fichier : il est très malheureusement impossible d’utiliser les ResourceBundle pour internationaliser son code.
– Ne pas se mêler des Charset : le fonctionnement est trop différent entre la JVM et le navigateur. Je ne suis pas spécialiste, mais concrètement, les fonctions de type public byte[] getBytes(« UTF-8″) ne fonctionneront pas. Cela rend les fonctions de types MD5 et base64 sont pour l’instant incompatibles.
– Vérifier la liste des fonctions émulées : une fonction assez simple comme Class.getSimpleName() n’est pas émulée.

Alors est-il possible d’écrire une bibliothèque Java utilisable – et utile – côté client et serveur ? Oui, vous y arriverez en y passant suffisamment de temps et à la simple condition de maîtriser le concept de l’interface. Vous pouvez aussi attendre Octobre et la sortie de Robusta Web Library qui vous facilitera grandement la tâche.

Après cette accroche quelque peu racoleuse, je m’explique :
JsUnit est un outil permettant de tester ses fonctions écrit en JavaScript. C’est tout simplement l’équivalent Javascript de JUnit. J’ai programmé mes tests au fur et à mesure en utilisant Firefox, puis à la fin de la semaine, je me suis rappelé l’existence d’Internet Explorer. Au vu des résultats, je me suis dit que la compatibilité présumée de Prototype envers FF et IE allait prendre du plomb dans l’aile. Il m’a donc fallu chercher l’origine de ces bugs.

Première partie : des variations minimes mais suffisantes

Les lecteurs avisés me diront que je ne teste pas la même chose, puisque j’ai 56 tests sur FireFox et 59 sur IE. C’est parce que JUnit sous IE s’amuse à évaluer des fonctions telles que celle-ci :

Avec Prototype, j’ai étendu l’objet Element pour y mettre la fonction getParentElement() qui renvoit le paragraph le plus proche de l’élément.
J’utilise donc la ligne : parent=element.up(".paragraph");

IE me renvoit une erreur "Not Implemented". Je pensais qu’il y avait une erreur avec l’implémentation de up() par Prototype mais en fait mÔnsieur Internet Explorer n’accepte pas le nom de variable parent. Essayez parent="" ou parent="java" et vous aurez une erreur "Not Implemented".

En déclarant la variable var parent="", tout va mieux.

Il faut ensuite savoir que lorsque vous écriver du code HTML, les moteurs de Firefox et IE les réécrivent derrière vous. Cela se voit en utilisant alert(monElement.innerHTML). J’ai repéré deux problèmes notables :

Internet Explorer réécrit au lieu de . Les guillemets de l’attribut value disparait : ce qui fait que value n’est d’ailleurs plus un attribut au sens xml. Assez génant pour les tests unitaires tels que celui-ci :
assertTrue (divControllers.innerHTML.include(‘ value="I" ‘));

Internet Explorer réécrit ses balises en majuscules. InnerHTML renvoit H3 au lieu de h3. Il faut donc réécrire les tests :
assertTrue(divForm.innerHTML.toLowerCase().include(‘h3′));
au lieu de :
assertTrue(divForm.innerHTML.include(‘h3′));

Deuxième partie : Le XML avec Prototype

Dans mes tests unitaires, j’utilise une String :

Et je teste ma fonction sensée recevoir transport.responseText.

Une fonction utilisant transport.responseText est à priori plus facile à tester qu’une autre utilisant transport.responseXML.

result.select("firstname")[0].innerHTML fonctionne très bien sous FireFox et me renvoit « Nicolas ». Mais sous IE, impossible de parser un élément non inscrit dans le document ! Prototype fonctionne bien, mais considère, sous IE, result comme une string, et pas comme un ensemble d’élément organisés en arbre. Il est donc nécessaire de passer par responseXML et d’ignorer ici les avantages de Prototype.

Le test unitaire de la fonction traitant le résultat devient plus compliqué : le Mock object n’est plus une String mais un document. Si vous avez une petite fonction fiable transformant mon String en document XML, je suis preneur.

Finalement, on y arrive.

<form action ="script.php" >

<input type="radio" name="radioGroup" id="radio" value="LEAVE_IT" />Leave It
<input type="radio" name="radioGroup" id="radio2" value="TAKE_IT" /> Take It
<input type="button" value="OK" />

</form>

Cette astuce du jour a pour but de récupérer le bouton radio en Javascript, avec la bibliothèque Prototype, sans script php, ni même la balise form.

En Ajax, on veut éviter le plus souvent possible l’action sur les balises FORM. Même si l’action est nulle : <form action ="" >, alors le navigateur affiche une nouvelle url : http://mypage?Submit=OK, par exemple. On peut utiliser un bouton de type « button » ou « submit » utilisant l’attribut onclick= »doIt(); »

La fonction javascript doIt() pourra alors récupérer la valeur du bouton radio avec cette fonction qui ne nécessite que l’attribut name du groupe de boutons radio :

/**
* Returns the value of the selected radio button in the radio group
* returns "" if the radio is not found or if nothing is checked
* Public Domain
*/
function $RF(radioName){
    array=$$('input');
    var value="";
     
    array.each(
          function (radio){
               if (radio.hasAttribute("name") && radio.readAttribute("name")==radioName)
                  if (radio.checked=="true" || radio.checked) value=radio.getValue();  
         }
   );//End of each()
   return value;  
}

Le nom de la fonction est dans le plus (im)pur style Prototype, RF signifiant RadioForm.
On l’utilisera ainsi :

function doIt(){
  alert($RF("radioGroup"));
}

Cette astuce du jour propose de préparer un peu le terrain en créant dynamiquement sur la page du contenu HTML. Nous verrons dans des articles plus fouillés comment enregistrer la modification sur le serveur.
Le deuxième objectif est de documenter en français la fonction Element#insert( ) de Prototype, qui a ce jour a été « oubliée » par les faiseurs de documentation.

Voici comment créer un Element HTML à l’intérieur d’un autre élément :

<script type="text/javascript" src="js/prototype.js"></script>

<div id="haut">Haut</div>
<div id="bas">Bas</div>

<script type="text/javascript">
/* Création de l’élément */
var numero = new Element(‘h3′, { ‘class': ‘pNumber’ }).update(‘Titre’);
/* Insertion de l’élément */
$(‘haut’).insert( {bottom: numero});

</script>

« Mon dieu quelle horreur ! » s’écrierait tout programmeur orthodoxe de Java. J’en fus et pourtant cette écriture complexe est extrèmement productive. Le fait d’être compact est également un plus quand c’est mélangé au milieu du XHTML.

Pour la création de l’élément, vous trouverez la documentation et les exemples ici. L’insertion de l’élément necessite plus d’explications :

$(‘haut’) correspond bien-sûr à l’élément HTML ayant pour id : ‘haut’. Pour les non-initiés à Prototype, cela correspond à document.getElementById(‘haut’); tout en s’assurant que $(‘haut’) aura des propriétés compatibles avec tous les navigateurs.

{bottom : numero} contient d’une part la position, puis l’élément OU le contenu à rajouter.
On peut par exemple faire :

$('haut').insert( {after: '<h3 class="pClass">Petit paragraph</h3>'});
$('haut').insert( {before: 'Un peu de texte, sans balise'});

Il y a quatre positions possibles : before, after, top , bottom. Voici ce que les différentes positions donnent en pratique avec le code suivant :

var numero = new Element('h3', { 'class': 'pNumber' }).update('Titre'); /* nouvel element */  
$('haut').insert( {position : numero }); /* Insertion */

Ces quatres possibilités rendent l’ajout d’Elements bien plus aisés que le temps du document.write(…). Attention toutefois au style de programmation : comme pour le PHP et sans doute le Ruby, on peut toutefois facilement faire proliférer les abominables guillemets simples, doubles et backslachés.

Dernière astuce :il est possible de raccourcir l’écriture en se passant de la position et des accolades en écrivant simplement :

$('haut').insert( numero);

Cela revient à utiliser la position bottom, ce qui sera probablement 80% de vos insertions.