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

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.HTML5Helper 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:
HTML5 Helper Plugin Methods
This helper plugin does not include any utility methods other than those inherited from %ZEN.Mojo.Plugin.baseHelperPlugin.
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.HomePage 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.