Wednesday, July 26, 2006

Can I Give Penicillin To My Dog?

AJAX - Rico Accordion: The views categorized

The accordion class of RICO provides a very simple solution representing the views categorized as an accordion.


The data structure must be represented in the following format:
  \u0026lt;div id="un_identifiant_de_bloc_pour_rico"> 
\u0026lt;div>
\u0026lt;div> Title class \u0026lt;/ div>
\u0026lt;div> Content panel \u0026lt;/ div>
\u0026lt;/ div>
...
\u0026lt;/ div>
Preparation Notes view

The Notes view can be defined as:
  • 1st column: categorized with the formula
      "\u0026lt;/ div> \u0026lt;/ div> \u0026lt;div> ; \u0026lt;div> "champ_categorie + +" \u0026lt;/ div> ";  
  • columns:
     " \u0026lt;span> " Valeur_affichée + + "\u0026lt;/ span>"  
The \u0026lt;span> just allows to separate the values shown in this example. We can replace any other tag.
must also check "Treat contents as HTML" fifth tab from the Properties view.

Preparing mask for
The mask associated with the previous view must be called $ $ For ViewTemplate nom_de_la_vue. Even if we can encode the mask entirely in HTML by checking Content-type: HTML "from the second tab of the properties of the mask I'll porfiter the opportunity to not in this example.

First we must include the Javascript libraries. This is normally done between the bales HEAD of the HTML page. The equivalent Lotus Notes is the reference "content as HTML" present from the panel submitted under the mask. Fautindiquer it as a formula: {
  src="prototype-1.4.0.js" \u0026lt;script type="text/javascript"> \u0026lt;/ script> 
\u0026lt;script src = "rico.js" type = " text / javascript "> \u0026lt;/ script>}
Beware path Booksellers Javascript.

Then you instantiate the accordion in case it specifies the ID transformed to the element. This is usually done at the OnLoad event of the page. Also since the panel of reference present in the mask, you must click on "OnLoad" and enter the Javascript code:
  new Rico.Accordion ($ ('identifiant_bloc'));  

Finally, in the mask, it remains to incorporate the view by adding the statement block accordion like this:
  \u0026lt;div id="identifiant_code"> 
\u0026lt;div>
inserting the embedded view
here \u0026lt;/ div> \u0026lt;/ div>
\u0026lt;/ div>
Do not forget to declare the HTML code to insert as HTML relay by selecting it and clicking the menu item text \\ HTML Relay. An example

online can view the result by presenting the articles of this blog by topic. Furthermore you can find other examples of using this class on the Malaysian blog (but in English) Lotus Notes on Web 2.0 .

0 comments:

Post a Comment