Julien Carnelos Blog – Archives

Deux mois après la version 1.0 finale, une update majeure est sortie avec la 1.1. La liste des nouveautés est assez impressionnante mais voici les principales compréhensibles pour les non railistes (j’invente ce mot) :

• RJS : Javascript écrit en Ruby. On peut écrire maintenant un code comme :

# Highlight all the DOM elements of class "product"  page.select(".product").each do |element|    element.visual_effect :highlight  end

 # 4 seconds after rendering, set the font-style of all company  # spans inside tds to normal  page.delay(4) do    page.select("td span.company").each do |column|      column.set_style :fontStyle => "normal"    end  end

Ce qui générera le code Javascript correspondant. L’intérêt est de ne pas forcer sur l’apprentissage du Javascript et de continuer à programmer en Ruby même sur le poste client avec une étape intermédiaire d’interprétation du Ruby en JS…

Techniquement assez impressionnant quand même !

• Active Record : C’etait déjà le gros pavé de Rails avec l’intégration du mapping objet-relationnel dans le framework. La couche a donc été amélioré avec des possibilités accrues dans l’association des objets. Je ne rentrerais pas plus dans les détails, n’ayant pas suivi de près.

• Integration Test : Des outils sympathiques ont été ajouté qui permettent d’exécuter des tests d’IHM sur l’application codés en Ruby. Exemple de code :

   def test_signup_new_person      get "/login"      assert_response :success      assert_template "login/index"

     get "/signup"      assert_response :success      assert_template "signup/index"    end

Au passage, si vous suivez un peu le framework Rails, je vous conseille de suivre l’excellent blog Ruby’s Cube qui donne pas mal d’astuces sur Ruby/Rails et en francais pour ne rien gacher !

Via l’article original posté sur le blog Rails qui donne les nouveautés de façon bien plus exhaustive.

Vu sur TechCrunch, le calendrier google pointe le bout de son nez.

Evidemment il brille tellement il est frotté à l’ajax 🙂 .

Vivement l’ouverture d’une open béta. Pour l’instant c’est limité à 200 personnes.

J’inaugure cette catégorie avec ce concept qui parait assez sympathique :

Ce principe de portable transverse n’est pas nouveau mais on peut espérer qu’avec un Windows installé dessus, on pourra plus facilemement bidouiller que sur les autres consoles/PDA portables du marché.

Benjamin, ta PSP peut aller se cacher je crois 😉

Passons maintenant à ce qui nous intéresse le plus, les Framework AJAX pour Java :

• DWR – 1.1 RC1
• AjaxTags – 1.2
• AJAX Toolkit Framework (ATF) Project

DWR (Direct Web Remoting) est donc un framework Ajax spécialisé pour J2EE. Son utilisation coté serveur est donc simplifiée et se traduit par une « installation facile » :

0. Ajouter le dwr.jar dans le projet web dans WEB-INF/lib.

1. Ajouter DWR comme servlet au projet dans le web.xml :

<servlet>    <servlet-name>dwr-invoker</servlet-name>    <display-name>DWR Servlet</display-name>    <description>Direct Web Remoter Servlet</description>    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>    <init-param>      <param-name>debug</param-name>      <param-value>true</param-value>    </init-param>    <init-param>      <param-name>scriptCompressed</param-name>      <param-value>false</param-value>    </init-param>    <load-on-startup>1</load-on-startup>  </servlet>  <servlet-mapping>    <servlet-name>dwr-invoker</servlet-name>    <url-pattern>/dwr/*</url-pattern>  </servlet-mapping>

2. On déclare nos objets Java dans le dwr.xml (qui se situe à coté du web.xml) On peut marquer ces objets avec des propriétés comme par exemple des droits limités d’accès sur les méthodes ou d’autorisation.

Par exemple ici, je déclare un objet JDate qui est une instance de java.util.date :

  <create creator="new" javascript="JDate">      <param name="class" value="java.util.Date"/>      <exclude method="getHours"/>      <auth method="getMinutes" role="admin"/>    </create>

Pour cet objet, j’exclus l’appel à la méthode getHours() et je demande une autorisation pour le getMinutes() .

3. On ajoute dwr sur nos pages web.

 <script src='dwr/engine.js'></script>  <script type='text/javascript' src='/dwr/dwr/interface/JDate.js'></script>

Et c’est tout !

DWR va alors générer dynamiquement du code javascript en fonction de son parametrage et créer des objets javacript reprenant les objets et méthodes Java déclarés. On appele alors de manière transparente un objet distant Java dans notre code Javascript…

De plus, on peut également consulter directement un objet « partagé » sur le client par une url http du style : http://localhost:8080/dwr/dwr/test/JDate

exemple de résultat :

Ce qui est très agréable avec DWR, c’est qu’on écrit pas de javascript supplémentaire technique pour accéder à nos objets. Tout le cablage est réalisé de façon transparente par le framework.

AjaxTags

Il s’agit d’une ancienne librairie qui ne fonctionnait que sous Struts mais qui fonctionne maintenant avec tout container JSP.

L’installation est également aisée :

0. Installation du ajaxtags-1.2.jar et dépendances dans WEB-INF/lib

1. Mise en place du TLD des tags dans le web.xml si la version des JSP est inférieure à 2.0

2. C’est parti ! Par exemple, pour coder un auto-completer, dans notre jsp on va utiliser le tag autocomplete :

<ajax:autocomplete  source="model"  target="make"  baseUrl="${contextPath}/autocomplete.view"  className="autocomplete"  indicator="indicator"  minimumCharacters="1"  parser="new ResponseXmlToHtmlListParser()" />

En paramètre, les champs les plus importants sont le champ source d’auto complétion et l’url / classe Java de la servlet qui pourra être remplacé par une action struts si on souhaite.

Le résultat est une auto complétion qui fonctionne sans soucis 😉

ATF (AJAX Toolkit Framework)

Projet incubateur sur eclipse.org, il possède l’appui d’éditeurs majeurs comme BEA, IBM, Oracle… Ce framework vise à standardiser la syntaxe Ajax et à réaliser un toolkit Ajax sous Eclipse. Projet donc très intéressant. Pour le moment ce projet est disponible sur le site d’IBM. Je le testerai quand il sera téléchargeable sur eclipse.org.

Bilan

Si le besoin est d’ajouter quelques effets graphiques sur un site, Rico ou scriptaculous sont à peu près équivalent et restent simple d’utilisation.

Pour Dojo, je le vois plutôt comme un composant de haut niveau. C’est à dire qu’il soit directement intégré par un framework web et que le développeur l’utilise par ce framework. Cela permettra de simplifier le travail du développeur pour les cas déjà implémentés par le framework tout en lui fournissant une librairie complète si besoin.

Concernant un développement Java, DWR est tout indiqué dans le cas ou il s’agit d’appeler des composants métier directement depuis le navigateur et AjaxTags permet d’accélerer l’intégration de composants prêt à l’emploi. Les deux approches ne sont pas concurrentes mais gare au mélange de trop de frameworks Ajax, donc bien choisir en fonction du besoin…

Pour ATF, je ne me prononce pas, ne l’ayant pas encore testé.

Suite à mon premier article où je montrais une implémentation simple de l’objet XmlHttpRequest sous Struts, il serait dommage de considérer cette méthode comme idéale. Il existe en effet de nombreuses bibliothèques prêtes à l’emploi qui permettent d’accélerer le développement d’interfaces riches en AJAX.

Je vais tenter ici de comparer plusieurs de ces frameworks parmi les plus connus en me limitant à ceux open-source. La finalité de cet article n’est pas d’être le N-ième article publié à décrire les avantages de AJAX mais de regarder avec une vision pragmatique comment ils s’implémentent. Attention, ce guide n’est absolument pas exhaustif et ne cite que des frameworks dont j’ai déjà entendu parler.

N’étant pas un designer très balaise, je vais passer rapidement sur les framework avec des fonctionnalités quasi-uniquement cotés client.

Parmi ceux ci, on a :

• script.aculo.us – version 1.5.3
• rico – version 1.1.1
• dojo toolkit – version 0.2.2

Scriptaculous est bien connu par ceux qui codent avec ruby on rails car ce framework est directement intégré dans rails. Son utilisation est donc transparente dans ce langage et permet d’écrire du code comme :

<%= text_field_with_auto_complete :contact, :name %>

Et hop un champ texte avec auto-complétion… Par contre, si on veut utiliser scriptaculous avec un serveur Java, il faudra coder toute la partie serveur à la main, ce qui est beaucoup moins simple.

Le suivant est Rico basé lui-même sur Prototype (même librairie de base que scriptaculous). Comparé à scriptaculous, il semble plus complet avec des animations, gestion de Behavior, etc. Je ne suis pas spécialiste du sujet, si un lecteur le sent, qu’il n’hésite pas à me préciser les différences en commentaire et je les ajouterai au texte.

Dojo est un framework « lourd » qui tente de rassembler tout ce qu’on pourrait demander à un toolkit de browser. La liste des sous-projets est à ce titre impressionnante puisque le répertoire src contient 388 fichiers et 33 dossiers.

Plusieurs packages ou « editions » sont disponibles, mais la version qui nous intéresse est le package « Ajax-Edition ».

Avantages de dojo sur les autres : Gestion du bouton Back du navigateur. Ceci est un gros problème d’utilisabilité qui concerne tous les framework et Dojo propose une solution élégante :

Chaque appel XmlHttpRequest ressemble à ça :

dojo.io.bind({    url: "http://foo.bar.com/sampleData.js",    load: function(type, evaldObj){        // hide the form when we hear back that it submitted successfully        sampleFormNode.style.display = "none";    },    formNode: sampleFormNode });

Et bien, dans le cas où on veut gérer le retour arrière par bouton, un simple paramètre supplémentaire suffit :

dojo.io.bind({    ...    backButton: function(){        // ...and then when the user hits "back", re-show the form        sampleFormNode.style.display = "";   ... });

Pas mal non ! On peut même gérer si l’utilisateur appuie sur la flèche avant (Qui sera compté comme une action différente) avec un « :forward »

C’est une intention louable de traiter le problème du back mais son implémentation implique de rajouter 2 méthodes à chaque appel pour traiter les 2 cas, ce qui peut paraître un peu lourd à l’utilisation.

Dojo gère également le bookmarking. Il suffit de rajouter un parametre à la méthode de binding qui ajoutera une ancre fantôme de la forme #xxx à la fin de l’url. Une idée excellente et simple à mettre en oeuvre !

pour les framework spécial Java, à suivre avec la deuxième partie.

Vous vous souvenez de JSF, les Java Server Faces qui allaient remplacer à coup sûr Struts et les JSP ? Je ne sais pas vous, mais JSF ca doit faire 6 mois que j’en entend quasiment plus parler.

Alors pour vérifier que je ne suis pas le seul, j’ai mesuré sur technorati la popularité de quelques termes :

7000 posts c’est pas mal 🙂

On peut en conclure que Struts est au moins 3 fois plus important avec 22 000 articles…

Le grand gagnant, mais tellement prévisible :

100 000 articles. Aucun commentaire, le buzz tourne à plein régime, il y a juste à attendre que la bulle se dégonfle 😉 .

P.S. : Même JSP renvoit 37 000 articles.

Conclusion : Pauvre JSF, on te souhaite un rapide retour sur le devant de la scène… (Pour voter pour JSF, taper « 1 » ).

Update:

Merci pour les commentaires constructifs postés.

Concernant le débat de savoir si JSF est une technologie d’avenir, je serais plutôt de l’avis d’alexis, c’est à dire en attente de voir un jour JSF réellement utilisé.

Car après avoir gouté au joies d’un environnement ASP.NET – Visual Studio avec composants riches, on se plait à rêver d’un jour où l’on disposera de la même toolbox sous Java (ce que JSF peut apporter).

En revanche le but de mon post était seulement de montrer où en était la buzz-machine actuelle sur certains mots-clés. Et là clairement, les bloggeurs ont plus envie de raconter comment ils ont réussi à implémenter pour la Nème fois un Input auto-complété que raconter leurs implémentations JSF…

Ces derniers jours sont riches en nouveauté pour les naviteurs web.

Firefox 1.5 reçoit sa première mise à jour avec la 1.5.0.1. C’est pas énorme mais si ça pouvait corriger quelques leaks ca serait pas plus mal. Du genre, ceux qui font que www.meebo.com ouvert pendant des heures se met à faire ramer grave le navigateur. J’avoue que je ne prend pas l’exemple le plus sympa vu la complexité de la webapp Meebo (DHTML et AJAX dans tous les sens)…

Le gros événement reste quand même la Beta 2 d’Internet Explorer 7. Ca doit faire un an que je suis passé sur Firefox en utilisation à 100% (Auparavant, c’etait plutôt du 50-50 avec IE6). Donc voici mes impressions sur cette version :

Donc premièrement, c’est tout bizarre de revoir les petites planètes bleues qui tournent ! 🙂 Passé quelques minutes d’utilisation, on voit que l’équipe a fait tous les efforts qu’il fallait pour combler l’écart fonctionnel avec Firefox et il redevient enfin agréable d’utiliser ce navigateur pour surfer. Désormais tout y est, comme la lecture des flus RSS, la boite de recherche rapide, une vrai gestion de l’impression et les fameuses tabs. Il y a même le gadget sympa qui affiche toutes les pages en cours pour basculer dessus.

En revanche, la nouveauté qui m’intéresse le plus c’est le changement d’interface et d’ergonomie qui s’accompagne. Voici une capture de la barre du haut du navigateur :

On voit qu’un gros effort a été fait pour réduire la taille des menus afin de gagner en lisibilité et en surface d’écran disponible pour l’affichage des sites. Même les menus « Fichier », « Edition », .. ont disparu et sont remplacés par des icônes d’accès direct. Si il y avait une seule idée à piquer pour améliorer Firefox, c’est celle-là !

Petit bémol sur cette béta, la gestion des favoris n’a pas évolué et reste toujours aussi peu intuitive, je doute qu’elle reste telle quelle dans la version finale.

Si vous voulez tester vous aussi : http://www.microsoft.com/windows/IE/ie7/tour/default.mspx

update :

• En réalité c’est la version PREVIEW de la BETA 2 d’IE7. Donc on est loin du compte, mais franchement, aucun plantage durant l’utilisation de la journée d’hier.
• Asa (developpeur de Mozilla) a posté une comparaison super complète sur son blog.
• Toutes les nouveautés sont également présentés sur le IEBlog avec des captures d’écran. Idéal pour suivre ce qui se passe sans installer la bête.

J’ai pris conscience que quand je codais sous Eclipse, j’étais un Control-Shift-F addict. Ce n’est encore déclaré comme maladie grave et c’est même carrément pratique !

Pour les non-initiés, le Control-Shift-F c’est le raccourci qui reformate entièrement la page en fonction de règles décrites dans les propriétés d’Eclipse.

L’intérêt de cette pratique est facile à comprendre puisqu’elle permet de respecter les normes Java (qui sont celles mises dans Eclipse) et de partager ces règles avec les autres développeurs. Donc ca c’est dit et ca parait évident.

Par contre, là où pour moi ca devient plus intéressant, c’est qu’à force de lire du code Java sous Eclipse, je me suis habitué à retrouver ce formalisme. Résultat, quand je tombe sur une classe non formatée, il me faut plus de temps pour déchiffrer (-défricher ?-) le contenu…

Mon utilisation de la fonction est même encore plus poussée, puisque quand j’effectue une modification dans le code (ajout d’une ligne, d’un commentaire, n’importe quoi d’autre), je vais systématiquement reformater le code. Le gros avantage c’est que je ne me prend jamais la tête sur les espacements et visuellement ça continue à être correct pour mes yeux habitués 😉 .

Bon formatage !

J’avais déjà entendu parler de ça il y a longtemps mais je viens d’en avoir la confirmation.

Un chercheur gagnant du prix nobel de physique a inventé une méthode révolutionnaire d’amplification de l’ADN appelée PCR (polymerase chain reaction) sous trip LSD. Il est clair qu’à un certain niveau de recherche, l’abstraction devient tellement haute qu’être dans le « trip » doit sûrement aider à matérialiser des idées complétement dingues mais qui se revèlent révolutionnaires…

Je vais donc faire une commande groupée pour les jours de livraison en production. Faite votre demande dans les commentaires 🙂 .

Vu sur 37signals.

Pour rappeler l’affaire, aux Etats-Unis, Microsoft a perdu un procès de la société Eolas sur l’utilisation d’objets « embedded » (embarqués) dans les pages Web affichées sur IE.

La conséquence est qu’Internet Explorer ne doit plus afficher de Flash, vidéos et autres plugins/active-x intéractifs. Le brevet Eolas interdit en effet aux navigateurs de démarrer ces objets en intéractif.

Pour contourner le problème, Microsoft va sortir un patch qui agit en demandant à l’utilisateur de cliquer d’abord sur l’animation ou l’objet afin de l’activer.

Prennons l’exemple d’une vidéo affichée en Flash : La navigateur ouvre la page HTML contenant la vidéo « embedded ». La vidéo commence à s’animer en mode autonome (non couvert par le brevet). L’utilisateur souhaite faire pause. Là la vidéo doit passer en mode intéractif. L’utilisateur doit donc cliquer une première fois sur la vidéo pour l’activer, PUIS cliquer sur le pause maintenant que l’objet est actif.

Pour plus d’infos et captures d’écran, l’article de Baekdal en lien en fin article présente tout cela.

La conséquence pour nous développeurs Web se situe à deux niveaux. Concernant les vidéos et les animations, le comportement de l’utilisateur est changé d’un clic vers deux clics à la première action. Cela n’est pas vraiment grave et n’est pas urgent à corriger. Par contre pour tous les sites qui utilisent le flash dans les menus par exemple, il parait vraiment génant de demander à l’utilisateur de cliquer pour activer 🙂 .

Heureusement, des solutions existent !

Concernant la navigation, un petit passage en DHTML/CSS2 peut s’envisager 😉 . Sinon il existe également une solution technique préconisée par Microsoft qui règle le problème.

Voici l’exemple pris sur MSDN:

// HTML File <html>  <body leftmargin=0 topmargin=0 scroll=no>    <script src="Embed.js"></script>  </body> </html>

// embed.js document.write('<embed src="examplecontrol">')

Comme l’objet embedded est affiché depuis le javascript, il ne tombe plus sous le coup de brevet. Encore une fois, oui c’est débile mais ça marche !

Article écrit en partie sur la base des informations de Baekdal.

Par contre, quid des impacts du brevet sur les autres navigateurs ? Si quelqu’un a des infos, je suis preneur.