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 .

Saturday, July 22, 2006

Price List Jcpenney Hair Salon

AJAX - Rico LiveGrid: Customizing Lotus Notes

Using Firebug, we can see that Rico sends an Ajax request in the format: data.xml? Openview & id = data_grid & page_size = 70 & offset = 149 & title1 = & sort_col sort_dir = ASC & _ =. It is necessary to change the format of this query to take into account the parameters of standard URL Appeal Notes views.

reminder these parameters are:
  • Start: to set the starting line. It is equivalent to offset. Beware, the offset starts at 0 while the start begins at 1.
  • Count: number of rows to display. It's the equivalent of page_size.
  • ResortDescending = xx or ResortAscending = xx: to force a descending or ascending sort on the column xx. This is equivalent to & & title1 = sort_col sort_dir = CSA. Warning, Rico takes into account the title of the column while Notes expects the number of the column.
For more information about the format of URL for Domino, refer to "Domino URL cheat sheet " of IBM Lotus.

Function prototype object.extend

The URL parameters are encoded in the function of class fetchBuffer RICO.LiveGrid in file rico.js. Not wishing to change the file rico.js I preferred using the function prototype Object.extend. Object.extend
to redefine the function fetchBuffer without having to touch the file rico.js.
To use this function with Rico at the moment must be applied on an instance of the class. This should be corrected in the next version of prototype.

in practice this will give:
  PobreLiveGrid var = new Rico.LiveGrid ("data_grid", 18, 445, 
"data.xml? Openview", opts);
Object.extend (PobreLiveGrid, {
. ..
});
Customizing Notes for RICO.LiveGrid

I copy the function code is defined in RICO only modifies the definition of QueryString in the case of a standard call and in the case a call with a sort column.

The final code is:
  Object.extend (PobreLiveGrid, 
{/ ** *
PobreLiveGrid: * fetchBuffer
LiveGrid for IBM Lotus Notes / Domino
* -------------------------------------------
---------------- * Change the setting of the URL call update
* Data from the table to suit the control URL
* Lotus Notes views. * *

page_size \u0026lt;=> count
* offset \u0026lt;=> start
sortcol * = x & sort_dir AUC = \u0026lt;=> x = ResortAscending
sortcol * = x = DESC & sort_dir \u0026lt;=> x = ResortDescending * * ----------------------------------------------

-------------
* Special thanks to Ross Lawley we Rico Forum

* ** /

fetchBuffer: function (offset) {
if (this.buffer.isInRange (offset) & &
! This.buffer.isNearingLimit (offset)) {
return;}

if (this . processing request) {
this.unprocessedRequest = new Rico.LiveGridRequest (offset);
return;}


was bufferStartPos = this.buffer.getFetchOffset (offset);
this.processingRequest = new Rico.LiveGridRequest (offset);
this.processingRequest.bufferOffset = bufferStartPos;
was fetchsize = this.buffer.getFetchSize (offset);
was partialLoaded = False;

was QueryString;
if (this.options.requestParameters)
QueryString = this._createQueryString (this.options.requestParameters, 0);

QueryString = (QueryString == null)? '': QueryString +'&';

QueryString = QueryString + 'id =' + this.tableId + '& Count =' +
fetchsize + '& start =' + (bufferStartPos +1) + '& offset =' + bufferStartPos;

if (this.sortCol) {
was kind notes =
(this.sortDir == "ASC"? "ResortAscending": "ResortDescending");
QueryString = QueryString +'&'+ varietal notes +'='+ escape (this.sortCol) ;
}

this.ajaxOptions.parameters = queryString;

$ (ajax_call). InnerHTML = queryString;
ajaxEngine.sendRequest (this.tableId + '_request' this.ajaxOptions)

this.timeoutHandler = setTimeout (this . handleTimedOut.bind (this),
this.options.bufferTimeout)

}})
I kept the standard references Rico offset used in the code. This poses no problem to Lotus Notes that ignores this setting.
still remains a problem. We want to retrieve the column number to sort and not its name. Heaureusement LiveGrid offers an option paraméttrage class of very interresting that will not only help address the latter concerns but also allows to restrict the number of columns you want sortable.

must modify the definition opts like this:
 var opts = { 
PrefetchBuffer: false,
onscroll: updateHeader,
sortAscendImg 'sort_asc.gif'
sortDescendImg 'sort_desc.gif'
columns: [ ["1", true], ["3", true], ["5", true], ["7", true], ["9", true]]}
;
parameter columns: [ ["column value ', sortable (true / false)]] should contain all references displayed in columns. He reference "column value" as an identifier for the column instead of its name.

Be very careful because the number of columns displayed on the webpage do not necessarily correspond to the column number of the Lotus Notes view. Thus in the example presented in the previous article ( AJAX - LiveGrid Rico to represent the views Lotus Notes), a two-column was used to define HTML tags which are then interpreted.
The columns contain the values are the odd columns in this case (1, 3, 5, 7, 9). That remains to be returned to Lotus Notes.

To see the code complete, I invite you to read the source code for the example online LiveGrid Rico.

Saran Wrap Weight Loss Preparation H

AJAX - LiveGrid Rico to represent the views of Lotus Notes

There are a number of increasingly important AJAX Javascript libraries. After much talk about Scriptaculous, it is time to introduce new ones. RICO, based on prototype.js as scriptaculous. It offers class LiveGrid I was particularly interrested after discovering the new Microsoft search engine, live.com . On this site, the navigation bar to access the pages disappeared. Farewell "next page" or "previous page". The search results are displayed in a long list that loads depending on the position of the elevator. Outside, what bothers me most about the views management notes on the web is just managing the navigation between pages. RICO would provide the answer?

Rico LiveGrid
LiveGrid The class is certainly not perfect, however the result seems interresting to follow. All views are not representative notes on this type of interface, like categorized views. It should be noted that the views are categorized in any case not really usable on the Web either natively.

Installing library RICO RICO

The library has only one javascript file. There will, for cons,
must also install the prototype.js library.
  1. 1.1.2 download library on the RICO download page Site
  2. Download 1.4.0 prototype library on site conio (select the link "Just the. Js, please").
  3. Integrating the two files into the resources of the Lotus Notes database.

class Rico.LiveGrid

LiveGrid To use, you will have to define a Web page calling bookstores and initializing a table for representing the view. This table will consist of two parts: a
  • header: for definition of column headings
  • data: to properly receive, the first lines of data must be initialized in the page. Subsequently these data will be extracted directly from an XML file.
Compared to other classes already presented Javascript, using LiveGrid is particularly restrictive. I hope this will be improved in version 2 of the library.
To represent a Lotus Notes view with LiveGrid, so I use an HTML page and a picture with a mask associated with the XML format. We could also use an agent to generate the XML stream, but as already explained, the use of a view saves server resources.

Defining the XML view

Data transmitted to the class LiveGrid should have the following XML format:
  \u0026lt;ajax-response> 
\u0026lt;RESPONSE type="object" id="data_grid_updater">
\u0026lt;ROW update_ui="true">
\u0026lt;td> Value 1 \u0026lt;/ td> \u0026lt;td> Value 2 ...\u0026lt;/ td> \u0026lt;/ tr>
...
\u0026lt;tr> ...\u0026lt;/ tr>
\u0026lt;/ rows>
\u0026lt;/ response>
\u0026lt;/ ajax-response>
To achieve such a representation I set my sight with the following parameters;
View Name: data.xml
Treat contents as HTML from the penultimate options tab view.
  • Column 1: "\u0026lt;td>"
  • Column 2: Field or formula to represent the grid
  • Column 3: "\u0026lt;/ td> \u0026lt;td>"
  • Column 4: Scope or formula to represent the grid
  • ...
  • Column n: "\u0026lt;/ td> \u0026lt;/ tr>"
Moreover, in order to use the sorting options to be ticked the "Click on column heading to sort" with value "The Couple for each column representing values to display.

must now declare a mask associated view
name mask: $ $ For ViewTemplate data.xml
Since the second tab of the properties of the mask, check "Content Type: Other" and give the value: application / xml
The content of the mask is:
  \u0026lt;ajax-response> 
\u0026lt;response type = "object" id = "data_grid_updater">
\u0026lt;ROW update_ui="true">
Added integrated view
data.xml \u0026lt;/ rows>
\u0026lt;/ response>
\u0026lt;/ ajax- response>
The number of rows displayed in the embedded view is irrelevant. To test your new XML file, open the data.xml view from a web browser. The XML format is very contraigant it is possible that you have an error message as the text displayed. It is not allowed, for example, display the character '&'. You can delete it or replace it automatically if necessary, through the formula of the column.

Web page

I declare the contents of my page as HTML in the page options. Furthermore, I voluntarily removed all references to the style in the code provided so you do not burdened. The content of the page should look like this:
  \u0026lt;body onload="javascript:bodyOnLoad();"> 

\u0026lt;table id = "data_grid_header" class = "fixedTable"
cellspacing = "0" cellpadding = "0" style = "width: 560px">
\u0026lt;tr>
\u0026lt;th class="first tableCellHeader"> Title Column 1 \u0026lt;/ th> \u0026lt;th
class="tableCellHeader"> Column 2 Title \u0026lt;/ th> \u0026lt;th
class="tableCellHeader"> Column 3 Title \u0026lt;/ th>
\u0026lt;/ tr>
\u0026lt; ; / table> \u0026lt;div

id="viewPort" style="float:left">
\u0026lt;table id = "data_grid" class = "fixedTable"
cellspacing = "0" cellpadding = "0" style = float: left; width: 560px ">
is added here to view the integrated
data.xml \u0026lt;/ table>
\u0026lt;/ div>
\u0026lt;/ body>
\u0026lt;/ html>
note, the number of rows displayed in the embedded view is very important here. We need this number is slightly higher than the number of lines displayed.

It remains only to declare the header of the HTML file to initialize the LiveGrid.
  \u0026lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
\u0026lt;head>
\u0026lt;title> Domino & Web 2.0 : LiveGrid Rico \u0026lt;/ title>
src="prototype.js" \u0026lt;script type="text/javascript"> \u0026lt;/ script>
src="rico.js" \u0026lt;script type="text/javascript"> \u0026lt;/ script> \u0026lt;script language="javascript">



bodyOnLoad function () {var opts = {

PrefetchBuffer: false,
onscroll: updateHeader
}
new Rico.LiveGrid ("data_grid", 18, 445, "data.xml? openview", opts);}


function updateHeader (LiveGrid, offset) {}


\u0026lt;/ script>
\u0026lt;/ head>
options LiveGrid statements are
  • "datagrid" ID picture which will represent the values
  • 18: number of rows to display on the screen
  • 445: number of lines of sight. This value should be calculated
  • "data.xml? Openview": URL of the XML stream
  • opts: options further. For the moment it does not serve

page so defined does not sort the view by clicking on a column or manage data download in the background. The call parameters of the XML view are coded in the library rico.js. Outside these parameters are obviously not call syntax views Lotus Notes. This will be fixed in the next section.

In the meantime, here is a complete example online. Having been unable to test the application on all platforms, thank you to leave a comment if you find an incompatibility.