Vite fait :

affiche la valeur de l’attribut attributeName de l’objet myObject.

affiche ce que renvoie la fonction functionName() de myObject.

A quoi ca sert ?

L’introspection est courante en Java lorsque l’on travaille sur les Annotations. En Groovy, c’est la base du metaprogramming et autre ‘magie’ du langage.

En Javascript, je l’utilise surtout pour créer des composants ExtJs :

La machinerie interne de mon SimpleCombo utilise assez simplement l’introspection et l’on peut déclarer ‘à droite’ l’attribut sur lequel on travail. Le combo affichera l’attribut name et le formulaire enverra la valeur id. Si displayField n’est pas renseigné, on peut alors exécuter la fonction toString().

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.

• Aucune configuration du serveur ni de la base de donnée : on dépose son application dans un conteneur.
• Il n’y a pas à choisir dans une gamme de serveurs : les requêtes seront exécutées par Google, et on sait qu’ils le font bien
• La facturation est faite selon les coûts réels : si votre application fait un bide, vous ne payez rien
• L’application est développée en un seul langage : Python, ou Java depuis Mars

Cette différentiation colle vraiment à l’innovation. Un bon programmeur Java avec une idée peu créer son application sans perdre de temps à configurer linux+apache+ssl ni faire un prévisionnel des capacités de serveur. Avec Edupassion.com, je sais de quoi je parle. Et si personne ne se connecte, il n’y a pas de coût de serveur inutile, et là aussi je sais… euh passons.

Malheureusement, concrètement, App Engine en Java ne marche pas.

Il est très simple de créer une application HTML, avec Ajax et même GWT, puis de l’uploader. C’est ce que j’ai fait pour le site de mon entreprise, Robusta Web. Si le site en fonctionne pas, essayez… trois minutes plus tard ! D’après le log, à cause d’une jsp déclanchant com.google.apphosting.api.DeadlineExceededException et java.security.PrivilegedActionException. Il semble que la security passe ou bloque de temps à autre. Etonnnant !

J’ai tout de suite essayé d’installer JAX-RS avec Jersey, mais non, pas possible, le container refuse. On propose une version adaptée, qui marche un peu, mais bloque aléatoirement l’accès au site – cette fois-ci avec une vraie exception. Normal, c’est du bidouillage.

Plus gênant est l’utilisation des JSP et son mapping. http://www.robustaweb.com/myjax/bond/ fonctionne, mais pas http://www.robustaweb.com/myjax/bond . Différence subtile, pas contraire aux spécifications assez muettes, mais juste incroyable.

Mais le grand problème est l’accès aux données. D’une part à cause des couches successives JPA->JDO->Implementation Google->DataNucleus->BigTable, comme l’avait déjà fait remarqué Bruno Marchesson. Pour faire court, quoi que vous tentiez, cela échouera :).

J’ai quand même réussi à « persister » quelques objets, et même à les lire. Mais s’il existe peut-être des logiciels permettant de visualiser ces données, aucun n’est clairement référencé. Alors qu’avec une table MySql, vous n’avez aucun problème à savoir ce que vos tests ont générés.

Pour l’instant App Engine me parait donc inutilisable dès qu’il s’agit de sauver des données. Il semble dangereux d’y mettre un simple site avec des JSP. Quelques pages HTML peut-être….

Mais n’oublions pas que App Engine est en Early Access, et je suis plutôt optimiste : Google developpe très bien ses produits quand ils trouvent un public en face. J’y retournerai dans six mois.

• Code Browser : HTML reçu par la front view, Ajax vers le web service
• Front view (Module Edupassion) : Distribution du HTML, redirection au Web Service
• Web Service (module wsedupassion) : http -> JSP -> Javabean -> validation -> accès données -> analyse -> résultat xml
• Code métier (module e-library) : contient les classes School, Teacher, Student, Work, etc.
• Accès données (module JPA+Crud) : Les classes Entities sont générées par Netbeans 6.5. Le Crud convertit ces entities en classes métiers de e-library.
• La base de donnée : On y accède soit par les entities, soit par des requêtes JPA, et parfois par des requêtes jdbc.

JPA
La seule originalité est la séparation franche entre les Entities issues de la Bdd et les classes métiers qui en sont presque des clones. Mais pour moi il est hors de question de rajouter la moindre ligne au milieu d’un code remplit d’annotation et de requêtes à mon avis difficile à maintenir.

J’apprécie cependant énormément de faire un Crud via ces Entities plutôt que par JDBC. La maintenance est plus simple, puisque, par exemple, en renommant une colonne de ma BDD, Netbeans génèrera des classes différentes et fera remarquer une erreur dans le code de mon CRUD. Cela est impossible avec du JDBC pur.

REST
L’accès aux web service se fait par REST, via des requêtes GET, POST, PUT et DELETE. Il a fallut pour cela modifier le fichier de Prototype, ce qui n’est pas très difficile. Un Web Service RESTFul permet principalement une montée en charge du projet sereine, sans modifier le code source.

Vous pouvez tester de ce début de préversion en vous connectant via les login/pass : edupassion/edupassion ou me demander un compte (ou toute autre question) en m’écrivant à nzozol@edupassion.com

Technologiquement parlant, l’éditeur incorpore côté Client TinyMCE et une interface Ajax spécifique au métier de l’enseignant. Le Client adresse ses requêtes à un serveur Tomcat jouant avec des JSP et des Beans. Je ferais prochainement un tutoriel sur l’intérêt d’un Web Service en JSP, par rapport aux Servlets ou JSF.

Le transfert Client-Serveur étant en XML, j’inclus au passage des méta-données sur le texte comme <lieu>Angleterre</lieu>. Cela permettra plus tard la génération d’exercices automatiques.

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"));
}

Ca y est, c’est fait, le loup est bel et bien sorti. M$ propose 45 milliards de dollards, soit le double de son trésor de guerre accumulé par la vente de licences Windows et Office. A ce prix-là, elle est pour sûr amicale.

Selon moi, Yahoo! poosède trois activités majeures : le contenu, la publicité et les logiciels web (e-mails, jeux). Est-ce que ces activités combinées remporterons un succès équivalent à Office et Windows ? Quoi qu’il en soit, Steve Balmer a pour ambition d’avoir 30% de son chiffre d’affaire issu de la publicité en ligne, et cela ne pouvait passer sans le rachat de Yahoo!

Sérieusement concurencé et souvent défait par Google sur la plupart de ses marchés, les actions de Yahoo! n’ont pas cessé de chuter ces derniers trimesres bien qu’elles furent, à l’instar d’Ebay et Amazon, encensées au sortir de la crise. Il y a déjà 4 ans… Ce sont ces succès à durée déterminée qui me font toujours douter des prix faramineux atteints par Yahoo et surtout Facebook. Ce matin l’action valait 20$ et augmente de 50% car l’offre de M$ correspond à 30$ l’action.

Edupassion.com n’est pas à vendre, mais si il y a emballement, on peut négocier :D. ]]> 5 https://blog.developpez.com/java_rest/p5007/ajax/creation_dynamique_d_elements_html_avec_6 https://blog.developpez.com/java_rest/p5007/ajax/creation_dynamique_d_elements_html_avec_6#comments Fri, 01 Feb 2008 06:27:28 +0000 L’essence d’Ajax est de manipuler un objet ou un document sur le navigateur sans être géné par le temps de latence du serveur.

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.

J’ai depuis quelque mois troqué ma page iGoogle pour Netvibes, plus pratique et faisant moins ramer mon Firefox. En passant à la conférence LeWeb3, j’ai pu obtenir une invitation à l’utilisation de Netvibes Ginger.

Rappelons que Netvibes est une société francaise dont le but premier est d’offrir sur une seule page tout ce qui vous interesse dans le web via des flux RSS ou des Widgets. Netvibes a été très recemment courroné meilleure start-up internationale par les blogs « influents ».

Avec Ginger, Netvibes devient social. Vous gardez vos flux dans des pages privées, et vous pouvez maintenant partager ces flux avec vos amis dans des « universes » (en anglais dans le texte).