Using Zen Mojo Plugins
Zen Mojo Default Page Manager and Helper Plugins
[Home] [Back] [Next]
InterSystems: The power behind what matters   
Class Reference   
Search:    

This section describes two light-weight plugins that can be used in many different configurations:

These plugins are suitable for use on both mobile devices and desktop computers. Neither of them require any external JavaScript or CSS files.
Adding the Default Plugins to the Page Class
Adding Required Files
These plugins do not require any external CSS or JavaScript files.
Registering the Default Plugins
The following example demonstrates how the Default page manager and helper can be registered in your pageContents XData block (as described in Adding Plugins to the Page Class). The HTML5 helper in this example is not required, but is frequently useful:
<mojo:mojoDefaultPageManager>
  <mojo:HTML5Helper/>
  <mojo:mojoDefaultHelper/>
</mojo:mojoDefaultPageManager>
The Default page manager can be used with all helper plugins except those provided specifically for ChocolateChip-UI, Dojo, or jQuery Mobile.
The Default helper can be used with any page manager, and is compatible with all helper plugins. It should be listed after all other helpers in the pageContents XData block.
Other Options and Requirements
For more information on these plugins, see %ZEN.Mojo.Plugin.mojoDefaultPageManager and %ZEN.Mojo.Plugin.mojoDefaultHelper in the class reference.
Using the Default Helper in a Template Class
Default Helper Layout Objects
This plugin contains the $content, $if, and $loop utility layout objects. See Default Helper Layout Objects later in this chapter for details.
Custom Default Helper Layout Object Methods
This plugin does not provide any layout object methods.
Default Helper Plugin Methods
The Default helper plugin does not include any utility methods other than those inherited from %ZEN.Mojo.Plugin.baseHelperPlugin.
Direct Access to the Default Helper Library
Not applicable — this plugin does not use an external library.
Event Handling
This plugin has no special event handling requirements.
Default Helper Layout Objects
The Zen Mojo Default helper plugin contains a set of layout objects that provide utility functions for layout objects in other plugins:
For reference information on the layout objects provided by this plugin, use the Plugin Documentation app (see Using the Plugin Documentation and Widget Reference Apps).
The $content Layout Object
The $content layout object can contain arbitrary HTML, as long as that HTML is well-formed. For example:
  var htmlstring =        '<h2>The Demo Team</h2>'
  htmlstring=htmlstring + '<p><strong>You have been invited to a meeting in Boston</strong></p>';
  htmlstring=htmlstring + '<p>Are you available tomorrow at 10am?</p>';
  htmlstring=htmlstring + '<p class="ui-li-aside"><strong>6:24 </strong>PM</p>'
  myLayout = {
    children: [ { type: '$content', title: '$content demo', content:htmlstring } ]
  }
The $if Layout Object
The $if layout object is used to control whether a page displays specific objects. The $if object provides the properties value, expectedValue, and children. If value equals expectedValue, then Zen Mojo renders the layout objects provided in the children property; otherwise, Zen Mojo does not render anything for the $if object.
The $loop Layout Object
The $loop layout object is a general-purpose iterator. Use this, for example, to create a table that has a varying number of rows; see an example in ZMdemo.html5.baseTemplate. Many of the other plugins use $loop objects internally. Note that loops can be nested.
In special cases, a layout object provides variables that you can use within the layout graph. For example, the default Mojo helper plugin provides the layout object $loop, which provides several variables including $loopindex, $loopnumber, and $loopValue.
To refer to the variable variablename, use the syntax '=[variablename]'
The following example shows a reference to the $loopValue variable. This example also uses the $div layout object from the HTML5 helper plugin.
    myLayout = {
        children: [
            { type: '$loop', title: 'Basic $loop demo', value:['apples','bananas','coconuts'],
             children: [
              {type:'$div', $content:'=[$loopValue]'}
             ]}
        ]
    }
In general, to use the $loop object:
Example: Basic $loop demo
The following shows an example that also uses the $div object from the Zen Mojo HTML5 helper plugin:
  myLayout = { children: [
    { type: '$loop', title: 'Basic $loop demo', 
      value:[
        {product:'apples',  sku:'SKU-001'},
        {product:'bananas', sku:'SKU-002'},
        {product:'coconuts',sku:'SKU-003'}
      ],
      children: [ {type:'$div', title:'=[product]', $content:'=[sku]'} ]
    }
  ]}
Variables Available within a $loop
When you use $loop, the following variables are available within your layout graph, in addition to any variables you create:
Example: $loop used with the $loopValue variable
The following example uses an array of strings for the value property and uses the $loopValue variable to display each of them in turn. Like the previous example, it uses the $div layout object from the HTML5 helper plugin.
  myLayout = { children: [
    { type: '$loop', title: 'Basic $loop demo', 
      value:['apples','bananas','coconuts'],
      children: [ {type:'$div', $content:'=[$loopValue]'} ]
    }
  ]}
Using Default Helper and Page Manager Sample Code
Many sample applications use these plugins. The Bootstrap sample is typical (see Using Bootstrap Plugin Sample Code for details).