Skip to main content
Previous section   Next section

Zen Mojo Default Page Manager and Helper Plugins

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

  • The Default page manager plugin can be used with all helper plugins except those provided specifically for Dojo, ChocolateChip-UI, or jQuery Mobile.

  • The Default helper plugin can be used with any page manager, and in combination with any helper plugin. It provides the $loop, $if, and $content utility layout objects used extensively by many other helper plugins.

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>
Copy code to clipboard

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 } ]
  }
Copy code to clipboard

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]'}
             ]}
        ]
    }
Copy code to clipboard

In general, to use the $loop object:

  • Specify its value property, which is an array. The number of items in the value array determines the number of items in the loop.

    Each array item can be an object, an array, or a literal value. If the array items are objects, each object should typically have the same set of properties. Similarly, if the array items are arrays, each array should have the same structure.

  • Specify its children property, which is an array of layout objects. The loop will contain one set of these objects for each item in the value array.

    For these layout objects, you can refer the current item of the value array. To do so, use the syntax '=[value to obtain]'.

    For example, if the array items are objects, use '=[property]', where property is a property of any object in the array. (You can refer to properties of properties, and so on, as well, via dot syntax.)

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]'} ]
    }
  ]}
Copy code to clipboard

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:

  • $loopIndex is the 0–based index for the loop iteration.

  • $loopNumber is the loop count. This variable equals $loopIndex + 1.

  • $loopValue is the current array item from the value property.

  • $loopKey is tbd

    For any layout object within a $loop, Zen Mojo provides the following composite value for the key property of that object: elementkey:index where elementkey is the value of the key property for this layout object, as defined in your method, and index is the 0–based index for the loop iteration.

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]'} ]
    }
  ]}
Copy code to clipboard

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