Helper Plugin for Bootstrap
The Bootstrap helper plugin provides support for the Twitter Bootstrap library. This plugin can be used with any page manager, and is best suited for use on mobile devices. For detailed information about Bootstrap, see http://getbootstrap.com/getting-started/.
Adding Bootstrap to the Page Class
The files listed in this section are contained in the Bootstrap 3.3.5 release and the jQuery 1.11.3 release. If they are not already installed on your system, you can get Bootstrap at https://github.com/twbs/bootstrap/archive/v3.3.5.zip and jQuery at https://code.jquery.com/jquery/.
These instructions assume that the Bootstrap files are in a subdirectory of <install-dir>/csp/broker named bootstrap-3-3-5 (see “Adding Plugins to the Page Class” for details). Note that the top-level directory name in the Bootstrap zip file is bootstrap-3.3.5, which must be changed to bootstrap-3-3-5 in /csp/broker. The following files must be available:
Bootstrap also requires the jQuery library. The following file must be in /csp/broker:
Add the following filename strings to the JSINCLUDES and CSSINCLUDES (or CSS3INCLUDES) parameters of your page class. Caché assumes that /csp/broker is the root directory for all relative paths:
Bear in mind that files are loaded in the order that they are listed in the parameters. In this case, the jQuery library must be listed first because the Bootstrap library depends on it.
The following example demonstrates how the Bootstrap helper can be registered in your pageContents XData block (as described in “Adding Plugins to the Page Class”). This example uses the Default page manager, but the Bootstrap helper will work with any page manager:
<mojo:mojoDefaultPageManager> <mojo:bootstrap-3.3.x-Helper/> <mojo:mojoDefaultHelper/> </mojo:mojoDefaultPageManager>
The Default helper plugin is required by most Bootstrap helper layout objects, and should always be the last helper in the list. Other helpers may be added to this list.
Plugin conflicts are likely when the Bootstrap helper is used with other helpers (such as HTML5 or ChocolateChip-UI) that also provide extended HTML5 elements. To resolve all plugin conflicts in favor of Bootstrap, list the Bootstrap helper first (see “Detecting and Resolving Plugin Conflicts”).
Most Bootstrap helper layout objects require the $loop layout object provided by the Default helper plugin. These layout objects will display the string "($loop)" in place of the expected output if the Default helper is not included.
For more information on this plugin, see %ZEN.Mojo.Plugin.bootstrap33xHelper in the class reference.
Using Bootstrap in a Template Class
See “Bootstrap Helper Layout Objects” later in this chapter for a complete list of available layout objects.
The following methods are available within all appropriate layout objects:
$hide() — Hides the layout object.
$refresh() — Re-renders the HTML for the layout object.
$show() — Shows the layout object.
This plugin does not provide direct access to Bootstrap library functions.
This plugin has no special event handling requirements.
Bootstrap Helper Layout Objects
The following list is intended as a quick reference to the layout options offered by the Bootstrap helper plugin. For complete reference information, use the Plugin Documentation app (see “Using the Plugin Documentation and Widget Reference Apps”):
Since the Bootstrap helper provides extended versions of HTML5 elements, plugin conflicts are likely when the it is used with other helpers that extend HTML5 elements (see “Detecting and Resolving Plugin Conflicts” earlier in this book).
Using Bootstrap Plugin Sample Code
The Widget Reference offers interactive widget samples for the Bootstrap helper. The reference includes working examples, detailed descriptions, and source code that you can cut and paste into your own applications.
A complete sample application is also available for the Bootstrap helper. In Studio, go to ZMdemo.bootstrap in the SAMPLES namespace. Compile the classes in that package if necessary. To run the application, open ZMdemo.bootstrap.HomePage and select View > Web Page. When running in debug mode, remember to set the debug target URL to csp/samples/ZMdemo.bootstrap.HomePage.cls.