addedValues Plugin

...Powerful Free! Database Expansion for Manila
logoBottle:

(1 or more words)


Get tropes here!
Click to see internals
Report bug


Hawaiian Hardwoods Direct

sitepic_hhd_screenshot.jpg:
Viewable with Any Browser

Members
Join Now
Login

AddedValues, AJAX and the Rico open-source library

About Rico

As the home page of the openrico.org website puts it

AJAX is the term that describes a set of web development techniques for creating interactive web applications. One of the key ingredients is the JavaScript object XmlHttpRequest. Rico provides a very simple interface for registering Ajax request handlers as well as HTML elements or JavaScript objects as Ajax response objects. Multiple elements and/or objects may be updated as the result of one Ajax request.

AddedValues can use the Rico library to generate search responses as a scrolling list, whose elements are "Hot", when clicked they call one or more addedValues item detail reports for the hit, displaying the results at designated points on the page. Crucially there is no page refresh.

Installing the Rico Library

The Rico library must be installed by the server administrator, there are 2 javascript libraries needed, they are found on their download page. addedValues supports only the 1.x versions of the Rico library. These 2 documents must be placed in a folder called rico1x within the "Folder for Uploaded Files" on administration website Static Files page. After this is done, addedValues offers a new value for Usage when creating a new report usage Search Results (Rico 1.x).

Usage Search Results (Rico 1.x)

The new usage isn't really new, it defines a search report like any other and can be used where other search report are used. Because the javascript is necessarily intricate, its easier to use a step by step process to build these reports. In addition there are three ways addedValues can use the rico library for search reports; and you decide this once at report definition time.

The first mode, called "Scrolling list of hits, with onchange reports" creates a menu like lost that scrolls; when you click an entry the detail report is displayed. The wizard for this mode, acts as follows: The first step identifies the detail reports that will be used to present detailed information about each hit, when it is clicked. Then the layout of the boxes that enclose the multiple item menu and a box for each detail report, is defined. You can optionally set properties of the select tag used in the menu, and several other factors. At the end of that process, addedValues generates a search report - if you wish to develop it further you may convert it into a normal search reports from the main reports page, with a new button "Edit as Search Report". You can scratch your changes and go back to the basic generated search report by choosing "Edit as Search Report (Rico 1.x)" after that.

The second mode, called "Paged table of hits, with onclick reports" flows the hit results through a fixed size table with a pre-defined number of rows. Each row corresponds to one hit, it may have any number of columns, and any column cell can be active - clicking on it brings up one or more detail reports for that hit and places them according to your layout. The wizard for this mode steps you through the process of putting this jigsaw together,and you can define the result as a normal search report if need be.

Mode three, called "Scrolling table of hits, optional onclick reports" starts off looking most like a normal search report. But you can cause variables to have onclick handlers that call up one or more item detail reports and place them according to your layout. The showcase demonstration for this is to display an array of thumb nail pictures, where clicking on a thumbnail brings up the full-size picture (see that example below)

Examples

Here's an example, which displays all the stories in this site using Scrolling list of hits - click to view.

{addedValueMacros.query("everyStory", "storyListerRico1", sortBy:"lastUpdate", sortDirection:"descending")}

In this example, there are 2 reports to consider. The first, storyListerRico1 is the search report. But the message Item Detail report , storyListerRicoDetail, is what builds the gray box for each hit. You should inspect the options of these 2 reports also, for date formatting, sort order and sortedby variable.

Same example, but using Paged table of hits - click to view storyListerRico2.

{addedValueMacros.query("everyStory", "storyListerRico2", sortBy:"lastUpdate", sortDirection:"descending")}

Same example again, this time using Scrolling table of hits, optional onclick reports - click to view storyListerRico3.

{addedValueMacros.query("everyStory", "storyListerRico3", sortBy:"lastUpdate", sortDirection:"descending")}

Here's another example, which does the same for pictures, click to see the results. Clicking on an entry in the scrolling list identifies a picture message and the javascript in your page requests addedValues to run 2 reports on that message number. One for the text, and one for the img tag.

{addedValueMacros.query("everyPicture", "pictureListerRico1", sortBy:"lastUpdate", sortDirection:"descending")}

Here there are 3 reports. The first, pictureListerRico1 is the search report and pictureListerRicoDetail builds the builds the gray box. The last report, pictureListerRicoPicture, returns the img tag. It was split out of pictureListerRicoDetail to illustrate how more than one Item detail report can be used.

Same example, but using Paged table of hits - click to view pictureListerRico2.

{addedValueMacros.query("everyPicture", "pictureListerRico2", sortBy:"lastUpdate", sortDirection:"descending")}

Same example again, this time using Scrolling table of hits, optional onclick reports - click to view pictureListerRico3.

{addedValueMacros.query("everyPicture", "pictureListerRico3", sortBy:"lastUpdate", sortDirection:"descending")}