AJAX - Rico LiveGrid pour représenter les vues Lotus Notes

Il existe un nombre de plus en plus important de librairies Javascript AJAX. Après avoir beaucoup parlé de Scriptaculous, il est temps d'en présenter de nouvelles. RICO, s'appuie sur prototype.js, comme scriptaculous. Il offre la classe LiveGrid qui m'a particulièrement interressé après avoir découvert le nouveau moteur de recherche de Microsoft, live.com. Sur ce site, la barre de navigation pour accéder aux pages a disparu. Adieu "page suivante" ou "page précédente". Les résultats de la recherche s'affichent dans une longue liste qui se charge selon la position de l'ascenceur. Hors, ce qui me dérange le plus dans la gestion des vues Notes sur le web est justement la gestion de la navigation entre pages. RICO apporterait il la solution ?


La classe LiveGrid n'est certes pas encore parfaite, cependant le résultat me semble interressant à suivre. Toutes les vues notes ne sont pas représentables sur ce type d'interface, comme les vues catégorisées. Il est à noter que les vues catégorisées ne sont de toute façon pas vraiment utilisables sur le Web en natif non plus.

Installation de la librairie RICO

La librairie RICO ne comporte qu'un seul fichier javascript. Il faudra, par contre,
obligatoirement installer aussi la librairie prototype.js.

1. Télécharger la librairie RICO 1.1.2 sur la page de téléchargement du site
2. Télécharger la librairie prototype 1.4.0 sur le site de conio (sélectionner le lien "Just the .js, please").
3. Intégrer les deux fichiers dans les ressources de la base Lotus Notes.

La classe Rico.LiveGrid

Pour utiliser LiveGrid, il va falloir définir une page Web appelant les librairies et initialisant un tableau permettant de représenter la vue. Ce tableau sera constitué de deux parties :

• une entête : pour la définition des titres de colonnes
• les données : pour bien s'afficher, les premières lignes de données doivent être initialisées dans la page. Par la suite ces données seront directement extraites d'un fichier XML.

Par rapport aux autres classes Javascript déjà présentées, l'utilisation de LiveGrid est particulièrement contraignante. J'espère que celà sera amélioré dans la version 2 de la librairie.
Pour représenter une vue Lotus Notes avec LiveGrid, j'utilise donc une page au format HTML et une vue avec un masque associé au format XML. On pourrait aussi passer par un agent pour générer le flux XML mais, comme déjà expliqué, l'utilisation d'une vue permet d'économiser des ressources serveur.

Définition de la vue XML

Les données transmises à la classe LiveGrid devront avoir le format XML suivant :

<ajax-response>
  <response type="object" id="data_grid_updater">
    <rows update_ui="true">
      <tr><td>Valeur 1</td><td>Valeur 2...</td></tr>
      ...
      <tr>...</tr>
    </rows>
  </response>
</ajax-response>

Pour arriver à une telle représentation j'ai définie ma vue avec les paramètres suivants ;
Nom de la vue : data.xml
Traiter contenu comme code HTML depuis l'avant-dernier onglet des options de la vue.

• Colonne 1 : "<tr><td>"
• Colonne 2 : Champ ou formule à représenter dans la grille
• Colonne 3 : "</td><td>"
• Colonne 4 : Champ ou formule à représenter dans la grille
• ...
• Colonne n : "</td></tr>"

De plus, afin de pouvoir utiliser les options de tri de la vue il faut cocher "Cliquer sur titre de colonne à trier" avec la valeur "Les deux" pour chacune des colonnes représentant des valeurs à afficher.

Il faut maintenant déclarer un masque de vue associé
Nom du masque : $$ViewTemplate For data.xml
Depuis le second onglet des propriétés du masque, cocher "Type de contenu : Autre" et indiquer comme valeur : application/xml
Le contenu du masque est :

<ajax-response>
<response type="object" id="data_grid_updater">
<rows update_ui="true">
Ajout de la vue intégrée data.xml
</rows>
</response>
</ajax-response>

Le nombre de lignes affichées dans la vue intégrée n'a aucune importance. Pour tester votre nouveau fichier XML, ouvrir la vue data.xml depuis un navigateur Web. Le format XML étant très contraigant il est possible que vous ayez un message d'erreur selon le texte affiché. Il n'est pas autorisé, par exemple, d'afficher le caractère '&'. Vous pouvez le supprimer ou le remplacer automatiquement, si nécessaire, à travers la formule de la colonne.

La page Web

J'ai déclarer le contenu de ma page comme étant au format HTML dans les options de la page. De plus, j'ai volontairement supprimé toutes références au style dans le code fourni afin de ne pas l'allourdir. Le contenu de la page doit ressembler à celà :

<body onload="javascript:bodyOnLoad();">

<table id="data_grid_header" class="fixedTable" 
  cellspacing="0" cellpadding="0" style="width:560px">
  <tr>
    <th class="first tableCellHeader">Titre Colonne 1</th>
    <th class="tableCellHeader">Titre Colonne 2</th>
    <th class="tableCellHeader">Titre Colonne 3</th>
  </tr>
</table>

<div id="viewPort" style="float:left">
<table id="data_grid" class="fixedTable" 
  cellspacing="0" cellpadding="0" style="float:left;width:560px;">
  On ajoute ici la vue vue intégrée data.xml
</table>
</div>
</body>
</html>

Attention, le nombre de lignes affichées dans la vue intégrée est très important ici. Il faut que ce nombre soit un peu supérieur au nombre de lignes à affichées.

Il ne reste plus qu'à déclarer l'entête du fichier HTML afin d'initialiser la LiveGrid.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Domino & Web 2.0 : Rico LiveGrid</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="rico.js" type="text/javascript"></script>

<script language="javascript">

function bodyOnLoad(){
  var opts = { 
    prefetchBuffer: false, 
    onscroll : updateHeader
  };
  new Rico.LiveGrid ("data_grid",18, 445, "data.xml?openview", opts);
}

function updateHeader( liveGrid, offset ) {
  }

</script>
</head>

Les options de déclarations de la LiveGrid sont :

• "datagrid" : ID du tableau où seront représenter les valeurs
• 18 : nombre de lignes à afficher à l'écran
• 445 : nombre de lignes de la vue. Cette valeur devrait être calculée
• "data.xml?openview" : URL du flux XML
• opts : options complémentaires. Pour le moment celà ne sert pas

La page ainsi définie ne permet pas encore de trier la vue en cliquant sur une colonne ni de gérer le téléchargement des données en tâche de fond. Les paramètres d'appel de la vue XML sont codés dans la librairie rico.js. Hors ces paramètres ne correspondent évidemment pas à la syntaxe d'appel des vues Lotus Notes. Ceci sera corrigé dans le prochain article.

En attendant, voici un exemple complet en ligne. N'ayant pas pu tester l'application sur toutes les plateformes, merci de laisser un commentaire si vous constatez une incompatibilité.