Using Zen Mojo Plugins
Helper Plugin for Bootstrap
[Home] [Back] [Next]
InterSystems: The power behind what matters   
Class Reference   
Search:    

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
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.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:
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.bootstrap33xHelper 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:
Bootstrap Helper Plugin Methods
This helper plugin includes several utility methods other than those inherited from %ZEN.Mojo.Plugin.baseHelperPlugin. See %ZEN.Mojo.Plugin.bootstrap33xHelper 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.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.
In addition to the Bootstrap helper, the sample application also uses the Default page manager, the Default helper, and the HTML5 helper.