HTML5 のヘルパー・プラグイン
HTML5 ヘルパー・プラグインを使用すると、HTML5 標準オブジェクトに簡単にアクセスできます。このプラグインは、モバイル・デバイスとデスクトップ・コンピュータのどちらでの使用にも適しています。
ページ・クラスへの HTML5 の追加
HTML5 ヘルパー・プラグインには、外部 JavaScript または CSS ファイルは必要ありません。
以下の例は、HTML5 ヘルパーを pageContents XData ブロックに登録する方法を示しています (詳細については、“ページ・クラスへのプラグインの追加” を参照)。この例では、既定のページ・マネージャを使用していますが、どのページ・マネージャでも動作します。
<mojo:mojoDefaultPageManager>
<mojo:HTML5Helper/>
<mojo:mojoDefaultHelper/>
</mojo:mojoDefaultPageManager>
HTML5 ヘルパー・プラグインは、他のページ・マネージャおよびヘルパー・プラグインと共に使用できます。いくつかの HTML5 ヘルパー ・レイアウト・オブジェクトでは、既定のヘルパー・プラグインが必要です。
HTML5 ヘルパー・プラグインを拡張バージョンの HTML5 要素 (Bootstrap、Dojo など) を提供する別のヘルパーと共に使用すると、プラグイン競合が発生します。拡張バージョンを優先してこれらの競合を解決するには、HTML5 ヘルパーを、既定のヘルパー以外の他のすべてのヘルパー・プラグインの後にリストする必要があります (“プラグイン競合の検出および解決” を参照)。
多くの HTML5 ヘルパー・レイアウト・オブジェクトには、既定のヘルパー・プラグインによって提供される $loop レイアウト・オブジェクトが必要です。既定のヘルパーが含まれていない場合、これらのレイアウト・オブジェクトには、予測される出力の代わりに文字列 "($loop)" が表示されます。
このプラグインの詳細は、"クラス・リファレンス" の %ZEN.Mojo.Plugin.HTML5HelperOpens in a new tab を参照してください。
テンプレート・クラスでの HTML5 の使用
使用可能なレイアウト・オブジェクトの完全なリストについては、この章で後述する “HTML5 ヘルパー・レイアウト・オブジェクト” を参照してください。
以下のメソッドは、すべての適切なレイアウト・オブジェクト内で使用できます。
-
$hide() — レイアウト・オブジェクトを非表示にします。
-
$refresh() — レイアウト・オブジェクトの HTML を再レンダリングします。
-
$setAttribute() — このレイアウト・オブジェクトの属性の値を設定します。このメソッドは、以下の 2 つの引数を取ります。1 つ目は属性の名前で、2 つ目は値です。
-
$show() — レイアウト・オブジェクトを表示します。
-
$toggleVisibility() — レイアウト・オブジェクトが現在表示されている場合はそれを非表示にし、現在非表示にされている場合はオブジェクトを表示します。
このヘルパー・プラグインには、%ZEN.Mojo.Plugin.baseHelperPluginOpens in a new tab から継承されたもの以外のユーティリティ・メソッドは含まれていません。
適用不可 — このプラグインは外部ライブラリ・ファイルを使用しません。
このプラグインには、特殊なイベント処理要件はありません。
HTML5 ヘルパー・レイアウト・オブジェクト
以下のリストは、HTML5 ヘルパー・プラグインで提供されるレイアウト・オプションのクイック・リファレンスとして使用することを意図しています。詳細なリファレンス情報については、プラグイン・ドキュメント・アプリケーションを使用してください (“プラグイン・ドキュメントおよびウィジェット・リファレンス・アプリケーションの使用” を参照)。
$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 |
HTML5 プラグインのサンプル・コードの使用
Zen Mojo HTML5 ヘルパー・プラグインの完全なサンプル・アプリケーションも使用できます。Studio で、SAMPLES ネームスペース内の ZMdemo.html5 に進みます。必要に応じて、そのパッケージ内のクラスをコンパイルします。アプリケーションを実行するには、ZMdemo.html5.HomePageOpens in a new tab を開き、[表示] > [ウェブページ] を選択します。デバッグ・モードで実行している場合、必ずデバッグ対象 URL を csp/samples/ZMdemo.html5.HomePage.cls に設定してください。
HTML5 ヘルパーに加えて、サンプル・アプリケーションは Dojo ページ・マネージャ、ヘルパー・プラグイン、および 既定のヘルパー・プラグインも使用します。