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/Opens in a new tab.

Adding Bootstrap to the Page Class

Adding Required Bootstrap Files

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.zipOpens in a new tab and jQuery at https://code.jquery.com/jquery/Opens in a new tab.

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:

dist/js/bootstrap.min.js
dist/css/bootstrap.min.css

Bootstrap also requires the jQuery library. The following file must be in /csp/broker:

jquery-1.11.3.min.js

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:

CSSINCLUDES filenames:
"bootstrap-3-3-5/dist/css/bootstrap.min.css"
JSINCLUDES filenames:
"jquery-1.11.3.min.js, bootstrap-3-3-5/dist/js/bootstrap.min.js"
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.

Registering the Bootstrap Helper Plugin

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”).

Other Options and Requirements

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.bootstrap33xHelperOpens in a new tab in the class reference.

Using Bootstrap in a Template Class

Bootstrap Layout Objects

See “Bootstrap Helper Layout Objects” later in this chapter for a complete list of available layout objects.

Custom Bootstrap Layout Object Methods

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.

Bootstrap Helper Plugin Methods

This helper plugin includes several utility methods other than those inherited from %ZEN.Mojo.Plugin.baseHelperPluginOpens in a new tab. See %ZEN.Mojo.Plugin.bootstrap33xHelperOpens in a new tab in the class reference for details.

Direct Access to the Bootstrap Library

This plugin does not provide direct access to Bootstrap library functions.

Event Handling

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”):

$alert	$dropdown	$inputGroupAddon	$ol	$span
$badge	$dropdownMenuItem	$jumbotron	$option	$table
$breadcrumb	$fieldset	$label	$pageHeader	$tableBody
$break	$form	$li	$pager	$tableCell
$button	$formGroup	$link	$pagination	$tableColumn
$buttonGroup	$glyphicon	$listGroup	$panel	$tableFooter
$buttonToolbar	$gridColumn	$listGroupItem	$panelBody	$tableHeader
$caret	$gridSystem	$mediaObject	$panelFooter	$tableRow
$close	$h1	$modal	$panelHeading	$text
$container	$image	$nav	$progressBar	$thumbnail
$containerFluid	$input	$navbar	$raw	$ul
$div	$inputGroup	$navbarForm	$responsiveEmbed	$well

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.HomePageOpens in a new tab and select View > Web Page. When running in debug mode, remember to set the debug target URL to csp/samples/ZMdemo.bootstrap.HomePage.cls.

In addition to the Bootstrap helper, the sample application also uses the Default page manager, the Default helper, and the HTML5 helper.