AJAX - Rico Accordion : Les vues catégorisées

Le classe accordion de RICO offre une solution très simple de représentation des vues catégorisées sous forme d'accordéon.


La structure des données à représenter doit être sous le format suivant :

<div id="un_identifiant_de_bloc_pour_rico">
<div>
  <div>Titre de la catégorie</div>
  <div>Contenu du panneau</div>
</div>
...
</div>

Préparation de la vue Notes

La vue Notes pourra être définie ainsi :

• 1ère colonne : Catégorisée avec pour formule

  "</div></div><div><div>" + champ_categorie + "</div>";

• colonnes suivantes :

  "<span>" + valeur_affichée + "</span>"

Le <span> permet juste de séparer les valeurs affichées dans cet exemple. On pourra le remplacer par n'importe quelle autre balise.
Il faut aussi cocher "Traiter contenu comme code HTML" depuis le cinquième onglet des propriétés de la vue.

Préparation du masque de vue
Le masque associée à la vue précédente devra porter le nom $$ViewTemplate For nom_de_la_vue. Même si on peut coder le masque entièrement en HTML en cochant l'option Type de contenu: HTML" depuis le second onglet des propriétés du masque je vais porfiter de l'occasion pour faire sans dans cet exemple.

Pour commencer il faut inclure les librairies Javascript. Celà se fait normalement entre les balese HEAD de la page HTML. L'équivalent Lotus Notes est la référence "Contenu de titre HTML" présent depuis le panneau présenté sous le masque. Il fautindiquer comme formule :

{<script src="prototype-1.4.0.js" type="text/javascript"></script>
<script src="rico.js" type="text/javascript"></script>}

Attention au chemin des libraires Javascript.

Il faut ensuite instancier la casse accordion en lui spécifiant l'ID de l'élément à transformé. Ceci se fait généralement à l'évènement OnLoad de la page. Toujours depuis le panneau de référence présent sous le masque, il faut cliquer sur "OnLoad" et indiquer le code Javascript :

new Rico.Accordion( $('identifiant_bloc') );

Enfin, dans le masque, il reste à intégrer la vue en ajoutant la déclaration du bloc accordéon comme ceci :

<div id="identifiant_code">
 <div><div>
 insertion de la vue intégrée ici
 </div></div>
</div>

Ne pas oublier de déclarer le code HTML insérer comme HTML relais en le sélectionnant puis en cliquant sur l'option du menu Texte\HTML Relais.

Un exemple en ligne permet de visualiser le résultat en présentant les articles de ce blog par thème. De plus vous pourrez trouver d'autres exemples de l'utilisation de cette classe sur le blog Malaisien (mais en anglais) Lotus Notes on Web 2.0.