ChocolateChip-UI のページ・マネージャおよびヘルパー・プラグイン

ChocolateChip-UI ページ・マネージャおよびヘルパー・プラグインは、ChocolateChip-UI フレームワークのサポートを提供します。ChocolateChip-UI フレームワークはモバイル・デバイス向けに設計されているため、これらのプラグインは特にモバイル・デバイスでの使用に適しています。しかし、デスクトップ・コンピュータでも使用できます。ChocolateChip-UI の詳細は、http://chocolatechip-ui.com/Opens in a new tab を参照してください。

ページ・クラスへの ChocolateChip-UI の追加

必要な ChocolateChip-UI ファイルの追加

このセクションにリストされているファイルは、ChocolateChip-UI 3.5.2 リリースおよび jQuery 2.0.3 リリースに含まれています。ChocolateChip-UI がまだシステムにインストールされていない場合、https://github.com/chocolatechipui/chocolatechip-ui/releasesOpens in a new tab で使用可能なバージョン 3.5.2 ソースを構築することにより、必要なファイルを生成できます。jQuery ライブラリは、https://code.jquery.com/jquery/Opens in a new tab から入手できます。

説明では、ChocolateChip-UI ファイルは、<install-dir>/csp/broker にあることを前提としています (詳細は、“ページ・クラスへのプラグインの追加” を参照)。以下のファイルが使用可能である必要があります。

chui-3.5.2.js
chui-ios-3.5.2.css

ChocolateChip-UI は jQuery 2.0.3 ライブラリも必要とします。以下のファイルが /csp/broker に含まれている必要があります。

jquery-2.0.3.min.js

以下のファイル名文字列を、ページ・クラスの JSINCLUDES および CSSINCLUDES (または CSS3INCLUDES) パラメータに追加します。Caché では、/csp/broker がすべての相対パスのルート・ディレクトリであると想定しています。

CSSINCLUDES ファイル名は以下のとおりです。
"chui-ios-3.5.2.css"
JSINCLUDES ファイル名は以下のとおりです。
"jquery-2.0.3.min.js, chui-3.5.2.js"
ファイルは、パラメータにリストされる順序でロードされることに注意してください。この場合、ChocolateChip-UI ライブラリは jQuery ライブラリに依存するため、jQuery ライブラリが最初にリストされる必要があります。

ChocolateChip-UI プラグインの登録

以下の例は、ChocolateChip-UI ページ・マネージャとヘルパーを pageContents XData ブロックで登録する方法を示しています (詳細については、“ページ・クラスへのプラグインの追加” を参照)。

  <mojo:chui-3.5.2-PageManager>
    <mojo:chui-3.5.2-Helper/>
    <mojo:mojoDefaultHelper/>
  </mojo:chui-3.5.2-PageManager>

Note:

ChocolateChip-UI ページ・マネージャを使用するページ・クラスでは、その pageContents XData ブロックには1 つの documentView のみ含めることができます。

ChocolateChip-UI ページ・マネージャは、ChocolateChip-UI ヘルパー・プラグインを使用する場合に必要で、他の多くのヘルパー・プラグインと共に使用できます。既定のヘルパー・プラグインは、ChocolateChip-UI $list レイアウト・オブジェクトでのみ必要です。

ChocolateChip-UI ヘルパーは、拡張バージョンの HTML5 要素を提供します。それを HTML5 ヘルパーと共に使用する場合は、ChocolateChip-UI ヘルパーが最初にリストされている必要があります。また、ChocolateChip-UI ヘルパーを HTML5 要素を拡張する他のヘルパーと共に使用すると、プラグイン競合が発生する可能性があります (“プラグイン競合の検出と解決” を参照)。

その他のオプションおよび要件

$list レイアウト・オブジェクトには、既定のヘルパー・プラグインによって提供される $loop レイアウト・オブジェクトが必要です。既定のヘルパーが含まれていない場合、このレイアウト・オブジェクトは、予測される出力の代わりに文字列 "($loop)" を表示します。

これらのプラグインの詳細については、"クラス・リファレンス" の %ZEN.Mojo.Plugin.chui352HelperOpens in a new tab および %ZEN.Mojo.Plugin.chui352PageManagerOpens in a new tab を参照してください。

Note:

非推奨の ChocolateChip-UI プラグイン・クラス

%ZEN.Mojo.Plugin.chuiPageManagerOpens in a new tab および %ZEN.Mojo.Plugin.chuiHelperOpens in a new tab プラグイン・クラスは、旧バージョンの Zen Mojo との下位互換性のために現在使用可能です。これらのクラスは ChocolateChip-UI バージョン 3.5.2 も使用します。使い方は、これより古いクラスが以下の要素を使用して登録される点を除き、現在のプラグインと同じです。

  <mojo:chuiPageManager>
    <mojo:chuiHelper/>
  </mojo:chuiPageManager>

これらの古いクラスは更新されず、今後のリリースで削除される予定です。

テンプレート・クラスでの ChocolateChip-UI の使用

Important:

必要なレイアウト・オブジェクト

ChocolateChip-UI レイアウト・グラフには常に少なくとも 1 つの $article レイアウト・オブジェクトが含まれ、その中には少なくとも 1 つの $section レイアウト・オブジェクトが含まれている必要があります。この要件は、ChocolateChip-UI フレームワークによって課されています。

ChocolateChip-UI レイアウト・オブジェクト

使用可能なレイアウト・オブジェクトの完全なリストについては、この章で後述する “ChocolateChip-UI ヘルパー・レイアウト・オブジェクト” を参照してください。

カスタム ChocolateChip-UI レイアウト・オブジェクト・メソッド

以下のメソッドは、すべての適切なレイアウト・オブジェクト内で使用できます。

$refresh() — レイアウト・オブジェクトの HTML を再レンダリングします。

ChocolateChip-UI ヘルパー・プラグイン・メソッド

ChocolateChip-UI ヘルパー・プラグインには、%ZEN.Mojo.Plugin.baseHelperPluginOpens in a new tab から継承されたもの以外のユーティリティ・メソッドは含まれていません。

ChocolateChip-UI ライブラリへの直接アクセス

ChocolateChip-UI プラグインを使用する場合、クライアント・メソッドは、ChocolateChip-UI JavaScript ファイルで定義された変数にアクセスできます。これらの変数は、デバイス入力からユーザ入力対話を抽象化します。詳細は、http://chocolatechip-ui.com/documentation#/chuijsOpens in a new tab を参照してください。

イベント処理

ChocolateChip-UI プラグインには、特殊なイベント処理要件はありません。

ChocolateChip-UI ヘルパー・レイアウト・オブジェクト

以下のリストは、ChocolateChip-UI ヘルパー・プラグインで提供されるレイアウト・オプションのクイック・リファレンスとして使用できます。詳細なリファレンス情報については、プラグイン・ドキュメント・アプリケーションを使用してください (“プラグイン・ドキュメントおよびウィジェット・リファレンス・アプリケーションの使用” を参照)。

$article	$div	$h3	$link	$navbar
$aside	$h1	$h4	$list	$p
$button	$h2	$h5	$listitem	$section

ChocolateChip-UI ヘルパーは、HTML5 要素の拡張バージョンを提供するため、HTML5 要素を拡張する他のヘルパーと共に使用すると、プラグイン競合が生じる可能性があります (このドキュメント内の前述の “プラグイン競合の検出と解決” を参照)。

ChocolateChip-UI プラグインのサンプル・コードの使用

ChocolateChip-UI ページ・マネージャおよびヘルパー・プラグインの完全なサンプル・アプリケーションを使用できます。Studio で、SAMPLES ネームスペース内の ZMdemo.chui に進みます。必要に応じて、そのパッケージ内のクラスをコンパイルします。アプリケーションを実行するには、ZMdemo.chui.HomePageOpens in a new tab を開き、[表示] → [ウェブページ] を選択します。デバッグ・モードで実行している場合、必ずデバッグ対象 URL を csp/samples/ZMdemo.chui.HomePage.cls に設定してください。

サンプル・アプリケーションは、ChocolateChip-UI ページ・マネージャおよびヘルパー・プラグインに加えて、HTML5 および既定のヘルパー・プラグインも使用します。