Extending OpenInsight's O4W Web Development Toolkit with jQuery Plugins
Revelation Software recently released OpenInsight 9.2, which includes the highly-anticipated O4W web development toolkit. O4W generates dynamic Web 2.0 output using JavaScript, HTML, and Ajax. Rather than develop such technology from scratch, Revelation Software decided to leverage the functionality of the widely-accepted jQuery open-source library. By writing O4W to be jQuery compatible, all of the functionality and advantages of jQuery become available to MultiValue developers, while the O4W "wrappings" around jQuery make this functionality accessible and understandable to the MultiValue world.
Fig. 1
jQuery has a number of features that make it an ideal choice for a web development framework, but one of the most exciting has to be the active jQuery development community that has generated literally hundreds of "plug-ins" that extend the user interface and functionality of the basic jQuery library. Whatever requirement you may have for your web page, a jQuery plug-in has likely been developed for it. And, since O4W uses jQuery, it is usually a simple matter to make that plug-in available on your O4W generated web page.
Fig. 2
Most of the jQuery plug-ins — either developed externally by the jQuery community, or "UI" elements that are part of jQuery itself — rely on the web developer to first create some standard HTML element(s), and then instruct jQuery "turn _that_ into _this_". For example, for the menuing plug-in that is included in O4W, the underlying software first creates a list, and then applies a "menu plug-in" to the list of elements; for the table pager and sorter plug-in, a regular table is first created, and then the plug-in is applied to the table; for the tabs control, a series of sections is first created, and then the plug-in is applied to those sections, etc.
For many of the O4W provided APIs, for "developer ease", this functionality is "wrapped" behind other O4W API calls (for example, the O4WTabs function), but fundamentally, what O4W does is:
- Determine what plug-in is needed;
- Load in the stylesheet and js files for that plug-in;
- Figure out what "initial" element or control is needed;
- Create that initial control;
- Use the O4Wplug-in API to apply the plug-in to the control
Using this same process it is possible to add non-O4W-provided jQuery functionality. For example, perhaps an "accordion" control should be added to a web page, but no accordion is included in O4W. Using a search engine, we can find that an accordion control is provided with the basic jQuery UI files, and learn what is required to implement it. According to the jQuery UI web page:
The markup of your accordion container needs pairs of headers and content panels:
<div id="accordion"> <h3><a href="#">First header</a></h3> <div>First Content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div>
This tells us what basic HTML O4W needs to generate to work with the accordion, and additional reading indicates some options that can be applied if we wish to use something other than links for the accordion headers. For this example, instead of links we will use sections for the titles. By giving each section a style name (in this case "header"), the plug-in can identify them correctly. To make the HTML that looks similar to the above, use the O4W routine in figure 3.
Fig. 3
Of course, instead of, or in addition to, the O4WText that has been put in each content section, any other elements (textboxes, images, etc., etc.) could be used. When run, this generates the output in figure 4.
Fig. 4
Once the initial elements have been created, the plug-in must be applied to it — and again looking at the jQuery UI site, you'll see that in HTML what you need is:
$("#accordion").accordion();
Adding in our options to change the accordion headers, that translates in O4W to the code in figure 5.
Fig. 5
This says to take the ID "accordion" (the 1st parameter) and apply the plug-in "accordion" (the 2nd parameter) to it. Any other options (which most plug-ins allow) are passed in the 3rd parameter. This generates the following output in figure 6.
Fig. 6
To learn what options are available for a plug-in, review either the plug-in description, or search for the plug-in with a search engine. Note that all options are wrapped in curly braces, that the option name is separated from the (normally quoted) option value by a colon, and multiple options are separated by commas.
Another feature of jQuery is the ability to change the overall "theme" of the user interface; this can be done on any O4W site from the configuration screen, and can provide a complete change to the look of the website with minimal effort (fig. 7).
Fig. 7
By changing which theme is used for the jQuery UI and providing an O4W "template" to contain the accordion form, the generated output can be made to conform to any existing web site (fig. 8).
Fig. 8
Please note that the difference between the first and second accordion image required no change to the actual O4W code; the completely different look was obtained merely by changing the theme and template used by the code — and this ability to "theme" your generated output is part of the built-in jQuery functionality, too.
jQuery's powerful features make it one of the most popular web development toolkits available, used and recommended by individuals and companies large and small. These features are available for your MultiValue applications through O4W, and functions that aren't bundled directly in O4W can be added through the jQuery plug-in technology. Adding your own plug-in does take a bit of legwork/research and some knowledge of HTML and jQuery for more advanced operations. But with this information, your MultiValue applications can continue to grow along with the rest of the Web.
