Helper Plugin for HTML5

The HTML5 helper plugin provides easy access to HTML5 standard objects. This plugin is suitable for use on both mobile devices and desktop computers.

Adding HTML5 to the Page Class

Adding Required HTML5 Files

The HTML5 helper plugin does not require any external JavaScript or CSS files.

Registering the HTML5 Helper Plugin

The following example demonstrates how the HTML5 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 any page manager will work:

<mojo:mojoDefaultPageManager>
  <mojo:HTML5Helper/>
  <mojo:mojoDefaultHelper/>
</mojo:mojoDefaultPageManager>

The HTML5 helper plugin can be used with other page manager and helper plugins. The Default helper plugin is required by several HTML5 helper layout objects.

If the HTML5 helper is used together with another helper that provides extended versions of HTML5 elements (such as Bootstrap or Dojo), plugin conflicts will occur. To resolve these conflicts in favor of the extended versions, the HTML5 helper should be listed after all other helper plugins except the Default helper (see “Detecting and Resolving Plugin Conflicts”).

Other Options and Requirements

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

Using HTML5 in a Template Class

HTML5 Layout Objects

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

Custom HTML5 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.
$setAttribute() — Sets the value of an attribute of this layout object. This method takes two arguments. First is the name of the attribute, and second is the value.
$show() — Shows the layout object.
$toggleVisibility() — Hides the layout object if it is currently displayed, or displays the object if it is currently hidden.

HTML5 Helper Plugin Methods

This helper plugin does not include any utility methods other than those inherited from %ZEN.Mojo.Plugin.baseHelperPluginOpens in a new tab.

Direct Access to the HTML5 Library

Not applicable — this plugin does not use any external library files.

Event Handling

This plugin has no special event handling requirements.

HTML5 Helper Layout Objects

The following list is intended as a quick reference to the layout options offered by the HTML5 helper plugin. For complete reference information, use the Plugin Documentation app (see “Using the Plugin Documentation and Widget Reference Apps”):

$a	$caption	$em	$hr	$menu	$rt	$tbody
$abbr	$cite	$embed	$i	$meter	$ruby	$td
$address	$code	$fieldset	$iframe	$nav	$s	$textarea
$area	$col	$figcaption	$img	$object	$samp	$tfoot
$article	$colgroup	$figure	$input	$ol	$section	$th
$aside	$datalist	$footer	$ins	$optgroup	$select	$thead
$audio	$dd	$form	$kbd	$option	$small	$time
$b	$del	$h1	$keygen	$output	$source	$tr
$bdi	$details	$h2	$label	$p	$span	$track
$bdo	$dfn	$h3	$legend	$param	$strong	$u
$blockquote	$dialog	$h4	$li	$pre	$sub	$ul
$br	$div	$h5	$main	$progress	$summary	$var
$button	$dl	$h6	$map	$q	$sup	$video
$canvas	$dt	$header	$mark	$rp	$table	$wbr

Using HTML5 Plugin Sample Code

A complete sample application is available for the Zen Mojo HTML5 helper plugin. In Studio, go to ZMdemo.html5 in the SAMPLES namespace. Compile the classes in that package if necessary. To run the application, open ZMdemo.html5.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.html5.HomePage.cls.

In addition to the HTML5 helper, the sample application uses the Dojo page manager and helper plugins and the Default helper plugin.