Back in 1999 I used to wrote some scripts using ASP and Javascript in order to automagicaly display books related to the topics of my articles. Nowadays this task is quite simple using Amazon's API. There is no more cache problems with outdated prices or products availability. I created an account on AWS and Amazon affiliates and started to code a set of scripts using Amazon's API for education purpose.

I came up with a nice search engine that is unfortunately not working with Internet Explorer. The script is far from perfect but, since I find it interesting I put it on my Workshop for all you to see and comment.

If you have any lead that can help me to make it functional in Internet Explorer your feedback will be gladly welcomed!

I finaly managed to get it functional in IE!

• Amazon Associates & AWS - PHP5 and jQuery

jTemplate (http://jtemplates.tpython.com) est un plugin pour jQuery (http://jquery.com/). Il ajoute la merveilleuse fonctionnalité qu'est le templating à la librairie jQuery. J'avais longtemps souhaiter cela ! C'est chose faite à présent et c'est à la fois extrêmement pratique et puissant.

Les développeurs, par soucis de relecture et maintenance, cherchent à dissocier au maximum le contenu de la partie code. Appliqué à PHP, Smarty (http://www.smarty.net/) fût une véritable révolution lors de sa sortie en 2003.  Aujourd'hui des dixaines de milliers de développeurs l'utilisent quotidiennement dans des projets de grande envergure.

Si vous êtes comme moi un familier de la syntaxe Smarty, vous ne serez pas dépaysé par jTemplates.

La mise en oeuvre est ultra simple :

   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery-jtemplate.js"></script>

La première chose à faire est d'ajouter un conteneur qui recevra le résultats de la "transformation":

   <p id="my_list"></p>

Une fois ceci fait il faut créer un element contenant un template :

      <textarea name="template" id="template">
      <![CDATA[
      {#template MAIN}
        <p>Pour rouler une {$T.title} vous aurez besoin des fournitures suivantes :</p>
        <ul>
         {#foreach $T.elements as record}
            <li>{$T.record.element} ({$T.record.quantite})</li>
         {#/for}
        </ul>
      {#/template MAIN}
      ]]></textarea>

Et définir nos données JSON de la même manière :

      <textarea name="item" id="item">
      {
         "title" : "Cigarette",
         "elements": [
         {"element": "tabac", "quantite":"un peu"},
         {"element": "feuille", "quantite":1},
         {"element": "filtre", "quantite":1},
         ]
      }</textarea>

Nous venons de mettre en place un combo formidable que nous allons activer avec les deux lignes de code suivantes (à affecter sur l'evenement onClick d'un element par exemple) :

      $('#my_list').setTemplateElement('template');
      var data = eval( '(' + $('#item').attr('value') + ')');
      $('#my_list').processTemplate(data);

Le seul truc à noter si  on ne travaille par directement avec des objets, c'est qu'il faut impérativement  évaluer  le JSON avant d'appliquer la transformation. Pour une raison mal définie, il faut wrapper la chaîne de caractères JSON dans des parenthèses afin que l'eval() fonctionne...

Vous pouvez aussi consulter cet exemple ainsi qu'un outil de benchmark sur le Workshop.

Pour ma part j'utilise les fonctions $.setTemplate() et $.setTemplateURL(). En effet, je ne trouve pas qu'il soit optimal d'avoir les templates dans des textarea cachés dans la page pour plusieurs raisons :

• Cela oblige l'utilisateur à télécharger tous les templates au chargement de la page.
• L'utilisateur peut éventuellement modifier le contenu des templates à l'aide de Firebug et cela peut poser problème si vous utilisez jTemplates pour générer des formulaires.
  

J'ai donc opté pour une solution plus adaptée à l'Ajax et au Web 2.0.

Quand un template doit être utilisé souvent sur une page, je le télécharge en utilisant la fonction $.get() de jQuery au chargement de la page et je le stocke dans une variable, il sera disponible tant que l'utilisateur n'aura pas besoin de changer de page.

Si le template est sensé être utilisé dans des cas plus rare je le télécharge uniquement "on demand". Biensur, rien n'empêche de dire à la fonction de téléchargement de mettre en cache le template au bout d'un certains nombre de téléchargements :D

Fonction de mise en cache d'un template au chargement de la page (jQuery) :

      var tpl_root = "/templates/jtpl/";
      var table_template = '';
       
      $(document).ready(function(){
         $.get(tpl_root + "table.html", function(data) {
            table_template = data;
         });
      });