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?
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.2 download library on the RICO download page Site
- Download 1.4.0 prototype library on site conio (select the link "Just the. Js, please").
- 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.
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>"
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.
0 comments:
Post a Comment