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

Dojo ページ・マネージャ・プラグインおよび関連するヘルパー・プラグインは、Dojo Toolkit のサポートを提供します。ヘルパー・プラグインには、Dijit ユーザ・インターフェイス・フレームワーク用の Dojo Dijit ヘルパー、dojox/charting/Chart2D 用の Dojo 2D Chart ヘルパー、および個別にパッケージ化された GridX ライブラリ用の Dojo GridX ヘルパーが含まれます。このプラグインは、デスクトップ・コンピュータでの使用に最も適しています。Dojo Toolkit の詳細は、https://dojotoolkit.org/Opens in a new tab を参照してください。

ページ・クラスへの Dojo の追加

必要な Dojo ファイルの追加

このセクションにリストされているファイルは、Dojo Toolkit 1.9.1 または GridX 1.3.0 のいずれかに含まれています。これらがまだシステムにインストールされていない場合、Dojo は http://download.dojotoolkit.org/release-1.9.1/Opens in a new tab で、GridX は https://github.com/oria/gridx/releasesOpens in a new tab でダウンロードできます。

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

/dojo/dojo.js
/app/dojo_2DChart.js
/app/dojo_191Dijit.js
/dijit/themes/claro/claro.css (または別のテーマのスタイル・シート)

/gridx/resources/claro/Gridx.css (GridX プラグインを使用している場合のみ必要)

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

CSSINCLUDES ファイル名は以下のとおりです。
"dojo-release-1-9-1/dijit/themes/claro/claro.css, dojo-release-1-9-1/gridx/resources/claro/Gridx.css"
JSINCLUDES ファイル名は以下のとおりです。
"dojo-release-1-9-1/dojo/dojo.js, dojo-release-1-9-1/app/dojo_2DChart.js, dojo-release-1-9-1/app/dojo_191Dijit.js"

Dojo プラグインの登録

以下の例は、Dojo ページ・マネージャと 1 つ以上の Dojo ヘルパーを pageContents XData ブロックで登録する方法を示しています (詳細については、“ページ・クラスへのプラグインの追加” を参照)。それぞれの Dojo ヘルパー・プラグインは他のものから独立しているため、使用する予定の Dojo ヘルパーのみ登録してください。

  <mojo:dojo-1.9.1-PageManager>
    <mojo:dojo-1.9.1-DijitHelper/>
    <mojo:dojo-1.9.1-2DChartHelper/>
    <mojo:dojoGridX-1.3.0-Helper/>
    <mojo:mojoDefaultHelper/>
  </mojo:dojo-1.9.1-PageManager>

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

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

Note:

Dojo ページ・マネージャを使用するページ・クラスでは、複数の documentView をその pageContents XData ブロックに含めることができます。実施例については、HTML5 サンプル・プログラム (“HTML5 プラグインのサンプル・コードの使用”) を参照してください。

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

ページ・クラスは、ページ・メソッド adjustContentSize()、イベント・ハンドラ onlayoutHandler()、および XData Style ブロックを実装する必要があります。詳細は、この章で後述する “Dojo ページ・マネージャの追加要件” を参照してください。
Dojo Dijit ヘルパー・レイアウト・オブジェクト $AccordionContainer、$BorderContainer、$ContentPane、$DojoxContentPane、および $LayoutContainer には、既定のヘルパー・プラグインで提供される $loop レイアウト・オブジェクトが必要です。既定のヘルパーが含まれていない場合、これらのレイアウト・オブジェクトは、予測される出力の代わりに文字列 "($loop)" を表示します。

ページ・マネージャ・プラグインには、ここで説明されていないメソッドおよびプロパティがいくつかあります。詳細は、"Caché クラス・リファレンス" の %ZEN.Mojo.Plugin.dojo191PageManagerOpens in a new tab を参照してください。

ヘルパー・プラグインの詳細については、"クラス・リファレンス" の　%ZEN.Mojo.Plugin.dojo1912DChartHelperOpens in a new tab、%ZEN.Mojo.Plugin.dojo191DijitHelperOpens in a new tab、および %ZEN.Mojo.Plugin.dojoGridX130HelperOpens in a new tab を参照してください。

Note:

非推奨の Dojo プラグイン・クラス

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

  <mojo:dojoPageManager>
    <mojo:dojoDijitHelper/>
    <mojo:dojo2DChartHelper/>
    <mojo:dojoGridXHelper/>
  </mojo:dojoPageManager>

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

Dojo ページ・マネージャの追加要件

Dojo ページ・マネージャ・プラグインを使用するには、ページ・クラスがページ・メソッド adjustContentSize() のオーバーライドおよびイベント・ハンドラ onlayoutHandler() を実装する必要があります。また、XData Style ブロックを追加する必要があります。このいずれかの項目を省略すると、ウェブ・ページにコンテンツが表示されなくなります。

basePage.adjustContentSize() のオーバーライド
このメソッドは、各 documentView の幅、高さ、および位置を指定する必要があります。詳細および例については、“プラグインを使用した作業” の章の “adjustContentSize() メソッドのオーバーライド” を参照してください。
basePage.onlayoutHandler() のオーバーライド
このメソッドは、まず継承された onlayoutHandler() を呼び出し、続いて最上位のレイアウト・オブジェクトのサイズを変更する必要があります。以下の例では、'layoutContainer-1 が、ページで使用されるレイアウト・オブジェクト内の最上位レイアウト・オブジェクトです。
```
  ClientMethod onlayoutHandler() [ Language = javascript ]
  {
    this.invokeSuper('onlayoutHandler',arguments);
    var topContainer = zen('leftView').getItemByKey('layoutContainer-1');
    if (topContainer) {
      topContainer.$dojoItem.resize();
    }
  }
```
($dojoItem の詳細は、“テンプレート・クラスでの Dojo の使用” にある “Dojo ライブラリへの直接アクセス” のセクションを参照してください。)
XData Style ブロックの追加
このスタイル・ブロックは、高さ 100% を指定して dvDocument クラスを定義する必要があります。以下に例を示します。
```
  XData Style {
  <style type="text/css">
    .dvDocument { height: 100%;}
  </style>
  }
```

テンプレート・クラスでの Dojo の使用

以下の文は、3 つのすべての Dojo ヘルパー・プラグインに適用されます。

Dojo レイアウト・オブジェクト

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

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

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

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

Dojo ヘルパー・プラグイン・メソッド

これらのプラグインには、それぞれいくつかのユーティリティ・メソッドがあります。詳細は、"クラス・リファレンス" の %ZEN.Mojo.Plugin.dojo1912DChartHelperOpens in a new tab、%ZEN.Mojo.Plugin.dojo191DijitHelperOpens in a new tab、および %ZEN.Mojo.Plugin.dojoGridX130HelperOpens in a new tab を参照してください。

Dojo ライブラリへの直接アクセス

Dojo ヘルパー・プラグインは、各レイアウト・オブジェクトの $dojoItem プロパティを使用してDojo Toolkit ライブラリへの直接アクセスを提供します。documentView.getItemByKey() メソッドを使用してレイアウト・オブジェクトを返し、続いてそのレイアウト・オブジェクトの $dojoItem プロパティを使用してライブラリ関数を呼び出すことができます。以下に例を示します。

  myDocView.getItemByKey('myKey').$dojoItem.show();

(getItemByKey() の使用例は、"Zen Mojo の使用法" の “チュートリアル 3：イベント処理” を参照してください。)

イベント処理

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

Dojo ヘルパー・レイアウト・オブジェクト

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

dojo2DChart

$Chart — 2D グラフを表します。
$ChartLegend — グラフの凡例を表します。

dojoGridX

$Gridx — Dojo GridX を表します。$refresh 呼び出しは、テーブルの本文を関連するストアの現在のデータで更新します。

dojoDijit

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

$AccordionContainer	$DropDownMenu	$MenuSeparator	$TextBox
$BorderContainer	$Editor	$MultiSelect	$Textarea
$Button	$Fieldset	$NumberSpinner	$TimeTextBox
$CheckBox	$FilteringSelect	$NumberTextBox	$TitlePane
$CheckedMenuItem	$Form	$PopupMenuBarItem	$ToggleButton
$ColorPalette	$HorizontalRule	$PopupMenuItem	$Toolbar
$ComboBox	$HorizontalRuleLabels	$ProgressBar	$ToolbarSeparator
$ComboButton	$HorizontalSlider	$RadioButton	$Tooltip
$ContentPane	$InlineEditBox	$RadioMenuItem	$TooltipDialog
$CurrencyTextBox	$LayoutContainer	$Select	$Tree
$DataList	$LinkPane	$SimpleTextarea	$TreeObjectStoreModel
$DateTextBox	$Menu	$SplitContainer	$ValidationTextBox
$Dialog	$MenuBar	$StackContainer	$VerticalRule
$DojoxContentPane	$MenuBarItem	$StoreMemory	$VerticalRuleLabels
$DropDownButton	$MenuItem	$TabContainer	$VerticalSlider

Dojo プラグインのサンプル・コードの使用

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

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

また、Dojo ページ・マネージャおよびヘルパー・プラグインは、HTML5 サンプル・プログラムでも使用されます (“HTML5 プラグインのサンプル・コードの使用” を参照)。ここでは、documentView の 2 つの異なるインスタンスを実装する方法を具体的に示します。