ナビゲーション・コンポーネント
"Zen の使用法" の “Zen のレイアウト” の章では、Zen グループ・コンポーネントを Zen ページのレイアウトの中心として紹介しました。前述の章の “グループ” では、単純なグループ・コンポーネントである <hgroup>、<vgroup>、<page>、<pane>、および <spacer> について説明しました。
この章では、グループおよびメニューのコンポーネントの、より複雑なセットについて説明します。開発者は以下のコンポーネントを使用して、Zen アプリケーション内のナビゲーション操作をサポートできます。
-
“リンク” は、他の Zen ページまたは他のアプリケーション・コンテンツに、URI を使用してリンクします。
-
“メニュー” は、あらかじめ構成された選択肢のセット (通常はリンク) を表示または管理します。
-
“ナビゲータ” は、モバイル・デバイスのような外観のナビゲーション・インタフェースを作成します。
-
“タブ” は、タブを使用したメニューおよびフォームを定義します。
-
“ツリー” は、ユーザのクリックに応答して展開または縮小するリンクの階層構造を提供します。
-
“フィルタ” は、カテゴリごとに選択肢をフィルタできるようにします。
以下のテーブルでは、Zen のナビゲーション・コンポーネントをコンテナ (左側) と内容 (右側) の 2 つのカテゴリにまとめています。この章では、このテーブルに示す順序で各コンポーネントを説明します。
コンテナ | 目的 | 一般的に持つコンポーネント |
---|---|---|
(あらゆる種類) | 別のページまたはポップアップ・メッセージへのリンクを示します。 | 各リンクの <link>。 |
<locatorBar> | ページ上部のナビゲーション・バー。 | ナビゲーション・シーケンスにある各リンクの <locatorLink>。 |
<menu> | メニュー・コンテナ。既定のレイアウトは縦長ですが、layout 属性を使用して横長のレイアウトに変更できます。あるいは、<hmenu> または <vmenu> を使用できます。 |
各オプションの <menuItem>。 オプション間のスペースの <menuSeparator>。 |
<hmenu> | 横長のメニュー。 | |
<vmenu> | 縦長のメニュー。 | |
<tabGroup> | ユーザが 1 つ選択してセットの一番上に表示できる、従来の形式のタブ・セット。 | 各オプションの <tab>。 |
<lookoutMenu> | 各タブのボタンを表示したタブ化メニュー。ボタンをクリックすると、そのボタンの下にタブの内容が表示されます。各タブは、メニュー項目で構成されます。 | |
<tab> | タブは、任意の組み合わせのコンポーネントを含むグループです。 | <lookoutMenu> には、<tab> ごとに <menuItem> コンポーネントと <menuSeparator> コンポーネントがあります。 |
<expando> | 任意の組み合わせのコンポーネントを含むグループを展開または縮小します。 | 単純なナビゲーション・ツリーでは、<expando> の中に <link> コンポーネントを指定できます。 |
<dynaTree> | 展開可能なリンクのツリー。 | 生成されたリンク。これらはグローバル内のデータを使用するか、コールバックによって提供されます。<dynaTree> はグループではないため、他のコンポーネントを含んでいません。 |
<buttonView> | カテゴリに応じてフィルタを許可するリンクのセット。 | 指定された列数に従ってグリッドに配置されたボタン。<buttonView> はグループではないため、他のコンポーネントを含んでいません。 |
以下の図では、この章で説明するほとんどのコンポーネントを挙げています。図に示されているすべてのクラス、例えば %ZEN.Component.tabOpens in a new tab は、パッケージ %ZEN.Component にあります。この図は、これらのクラスの継承関係を示します。また、%ZEN.Component.groupOpens in a new tab から継承されるコンポーネントを示すことにより、これらのコンポーネントの中で他のコンポーネントを扱うことができるものを強調しています。
リンク
以下の Zen コンポーネントは、URI を使用してアクセスできるコンテンツへのリンクを指定します。
-
“<link>”
-
“<locatorBar>”
<link>
<link> コンポーネントは、Zen ページへの単純なリンク (HTML のアンカー要素) を出力します。このタイプのリンクの既定の形式では、色が使用され、下線が付きます。<link> には以下の属性があります。
属性 | 説明 |
---|---|
Zen コンポーネントの属性 |
<link> は、あらゆる Zen コンポーネントと同じ汎用属性を持ちます。詳細は、以下のセクションを参照してください。
|
caption |
Zen ページでこのリンクに表示されるテキスト。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。 “Zen 属性のデータ型” を参照してください。 caption の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。 |
disabled |
True の場合、このリンクは無効です。既定値は False です。新しく無効にしたリンクは、ユーザに対して本当に無効として表示されるように、アンカー・タグなしで再表示されます。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
href |
ユーザが caption テキストをクリックすると表示されるコンテンツの URI。href でクライアント側の JavaScript メソッドを呼び出すには、以下のように javascript: を先頭に記述した URI を使用します。 href="javascript:zenPage.myMethod();" href の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。 |
onclick |
リンクの onclick イベント・ハンドラ。ユーザがリンクをクリックすると、Zen によってこのハンドラが呼び出されます。“Zen コンポーネントのイベント・ハンドラ” を参照してください。onclick を指定すると、href は無視されます。onclick を指定していない場合、リンクは href で指定されたコンテンツを表示します。 |
style |
このリンクのセルに適用する CSS スタイル。例えば、以下のようになります。 color: red; |
target |
ユーザがリンクをクリックしたときに新規ドキュメントを表示する場所を制御する文字列。HTML では、通常これはフレームの名前になります。ただし、HTML では以下の特別な値も定義しています。これを target 属性に割り当てて、目的の動作を実行させることができます。
|
title |
ユーザがリンクの上にカーソルを置いて、クリックしない状態で表示されるヘルプ・メッセージ。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。 “Zen 属性のデータ型” を参照してください。 title の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。 |
<link> の使用法には、<expando> コンポーネント内に配置して、リンクをツリー形式のメニューにして表示する方法があります。
<locatorBar>
<locatorBar> は SAMPLES ネームスペースのクラス ZENDemo.ActiveGroupDemoOpens in a new tab に基づいており、以下の例のようになります。<locatorBar> は図の一番上にある水平バーです。
これに対応する <locatorBar> 定義が後に続きます。
<locatorBar id="locator" OnGetQuickLinks="GetQuickLinks">
<locatorLink caption="Home" title="Home page"
href="ZENDemo.Home.cls"/>
<locatorLink caption="Active Group Demo"
title="Active Group Demo" />
</locatorBar>
この <locatorBar> 定義には、2 つの <locatorLink> エントリが含まれ、バーの左端から順にそれらが表示されます。
[ホーム] > [アクティブ・グループのデモ]
各 <locatorLink> の caption は角括弧で囲まれ、次の <locatorLink> とは右山括弧で区切られて左から右へ順番に並べられます。ユーザはツールのヒントとして title を表示できます。
バーの右端には、この <locatorBar> が OnGetQuickLinks コールバックを指定することにより作成したクイック・リンクのドロップダウン・リストがあります。図は、ユーザがこのリストの上でカーソルを移動して選択しようとしているところを示しています。ユーザが選択すると、そのリンクで指定されたページが表示されます。
<locatorBar> には以下の属性があります。
属性 | 説明 |
---|---|
Zen コンポーネントの属性 |
<locatorBar> は、あらゆる Zen コンポーネントと同じ汎用属性を持ちます。詳細は、以下のセクションを参照してください。
|
OnDrawBar |
Zen ページ・クラスのサーバ側コールバック・メソッドの名前。このメソッドは、&html<> 構文または WRITE コマンドを使用して、ロケータ・バーに HTML コンテンツを提供します。 Zen は、ロケータ・バーを描画するたびに、このメソッドを呼び出して、<locatorBar> の seed 値を含む %StringOpens in a new tab を自動的に渡します。このコールバックは、データ型が %StatusOpens in a new tab である値を返す必要があります。以下に、有効なメソッド・シグニチャを示します。 Method DrawBar(pSeed As %String) As %Status コールバックとして上のメソッドを使用するには、<locatorBar> で OnDrawBar="DrawBar" と設定します。 |
OnGetQuickLinks | Zen ページ・クラスのサーバ側コールバック・メソッドの名前。このメソッドでは、ロケータ・バーの右上に [移動] ドロップダウン・リストとして表示されるクイック・リンクのセットを定義します。詳細は、このテーブルの後に示す説明を参照してください。 |
seed | OnDrawBar コールバックに任意の値を渡せるようにします。seed の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。 |
Zen ページ・クラスのサーバ側コールバック・メソッドの名前を提供する OnGetQuickLinks 属性。このメソッドは、提供された配列に値を入力する必要があります。メソッドで有効な配列を作成すると、Zen はロケータ・バーの右上に [Go to] ドロップダウン・リストとして配列の各エントリを表示します。Zen は、ロケータ・バーを描画するたびに、このメソッドを呼び出して、単一の出力パラメータ (リンク・キャプションを添え字とする配列) を自動的に渡します。コールバックは %StatusOpens in a new tab 値を返す必要があります。
以下のサンプルの ObjectScript 文は、配列の 1 つのエントリを指定します。
Set pLink("caption")="uri"
以下はその説明です。
-
caption は、リンクに表示されるラベルです。
-
uri は URI 文字列です。これには、基準となる URI に加えて、クエリ・パラメータも含めることができます。
以下の例は、有効なメソッド・シグニチャとパラメータの使用法を示しています。これは、このトピックの冒頭の図で示したクイック・リンクを生成します。コールバックとして以下のメソッドを使用するには、<locatorBar> で OnGetQuickLinks="GetLinks" と設定します。
ClassMethod GetQuickLinks(Output pLinks) As %Status
{
Set pLinks("Home") = "ZENDemo.Home.cls"
Set pLinks("Expense Calculator") = "ZENDemo.ExpenseCalculator.cls"
Set pLinks("MVC Master Detail") = "ZENMVC.MVCMasterDetail.cls"
Set pLinks("MVC Chart") = "ZENMVC.MVCChart.cls"
Set pLinks("MVC Meters") = "ZENMVC.MVCMeters.cls"
Set pLinks("MVC Form") = "ZENMVC.MVCForm.cls"
Set pLinks("Test Suite") = "ZENTest.HomePage.cls"
Set pLinks("Controls") = "ZENDemo.ControlTest.cls"
Set pLinks("Methods") = "ZENDemo.MethodTest.cls"
Quit $$$OK
}
同じクイック・リンクのセットをアプリケーションの複数のページで使用するように定義する場合、Zen アプリケーション・クラスでメソッドを定義してから、以下のように各ページ・クラスのコールバックでこのアプリケーション・メソッドを呼び出すようにすることができます。アプリケーション・クラス・メソッドの呼び出しの pLinks パラメータの前にドット (.) があることに注意してください。これは、出力パラメータであるためです。
ClassMethod GetQuickLinks(Output pLinks) As %Status
{
#; dispatch to our application class
Quit %application.GetQuickLinks(.pLinks)
}
<locatorLink>
<locatorLink> は、<locatorBar> コンテナ内でのみ使用できます。それぞれの <locatorLink> は、<locatorBar> で指定したナビゲーション・チェーン内の 1 つのリンクを定義します。<locatorLink> は、予備クラス %ZEN.Auxiliary.locatorLinkOpens in a new tab の XML プロジェクションです。<locatorLink> には以下の属性があります。
属性 | 説明 |
---|---|
id | この値は、<locatorLink> の CSS スタイル定義を選択するために使用できます。 |
name | コンポーネント名。通常、これは <locatorLink> には使用されません。 |
caption |
<locatorBar> でこのリンクに表示されるテキスト。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。 “Zen 属性のデータ型” を参照してください。 |
href |
ユーザが caption テキストをクリックすると表示されるコンテンツの URI。href でクライアント側の JavaScript メソッドを呼び出すには、以下のように javascript: を先頭に記述した URI を使用します。 href="javascript:zenPage.myMethod();" |
title |
ユーザがリンクの上にカーソルを置いて、クリックしない状態で表示されるヘルプ・メッセージ。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。 “Zen 属性のデータ型” を参照してください。 |
メニュー
メニュー・コンポーネントを使用すると、ユーザが項目をクリックして選択できる選択肢のリストを持つ従来型のナビゲーション・メニューを作成できます。メニュー項目を選択するたびに、メニューおよびメニュー項目の定義に応じ、次のようなイベントが発生します。
-
サブメニューが表示されます。
-
メッセージがポップアップします。
-
別のページが表示されます。
-
現在のページの内容が変更されます。
-
各 <menuItem> をユーザが選択したときのメニューの応答としてプログラムした内容に応じて、上記以外の動作が発生します。
3 つのレベルに展開される縦長のメニューは、SAMPLES ネームスペースのクラス ZENTest.MenuTestOpens in a new tab に基づいており、以下の例のようになります。サブメニューを持つすべての選択肢には、“Submenu” と “Sub Submenu” のように、» (右向きの二重山括弧) が表示されます。
この図の <menu> 定義は以下のとおりです。
<menu id="menu2" layout="vertical">
<menuItem caption="Menu A" link="javascript: alert('A');" />
<menuItem caption="Menu B" link="javascript: alert('B');" />
<menu id="menu2B" caption="Submenu" layout="vertical"
onactivate="zenPage.activateMenu2B();">
<menuItem caption="Menu A" link="javascript: alert('A');" id="menu2B_A" />
<menuItem caption="Menu B" link="javascript: alert('B');" />
<menu id="menu2BB" caption="Sub Submenu" layout="vertical">
<menuItem caption="Menu A" link="javascript: alert('A');" />
<menuItem caption="Menu B" link="javascript: alert('B');" />
<menuSeparator />
<menuItem caption="Help Desk" link="ZENApp.HelpDesk.cls" />
</menu>
</menu>
<menuSeparator />
<menuItem caption="Test Suite" link="ZENTest.HomePage.cls" />
<menuItem caption="Home" link="ZENDemo.Home.cls" />
</menu>
以下、数セクションにわたって、この例のメニュー・コンポーネントの詳細を説明します。今のところは、以下の点を挙げておきます。
-
多くの場合、この例では、デモンストレーション目的のために URI リンクの代わりに JavaScript の警告を使用します。link の値ではこの形式を使用することも、次の例に示すように Zen アプリケーション内の別のページにブラウザをリダイレクトすることもできます。
-
<menu> には <menu> を 1 つ記述できます。その場合、記述した <menu> はサブメニューとなり、その caption は同じレベルの <menuItem> コンポーネントがある場合はそれと共に、順番にリストに挙げられます。上記の例では、3 段階の <menu> を指定しています。
-
例では、第 1 段階および第 3 段階のメニューに <menuSeparator> を指定しています。<menuSeparator> コンポーネントによって、“Submenu” と “Test Suite” との間、および “Sub Submenu” と “Help Desk” との間に区切りのバーが生成されます。
"Zen アプリケーションの開発" の “クライアント側メニュー・コンポーネント” のセクションでは、容易に調整およびカスタマイズできるさらに高度なメニュー・コンポーネントについて説明しています。この章のコンポーネントを最初に試し、それらがニーズに合わない場合は、その他のドキュメントを参照してください。
<menuItem>
<menu> の各項目は、<menuItem> を使用して定義します。<menuItem> には以下の属性があります。どの項目でも、メニュー・セル内の選択肢として caption または image を表示できるので、<menuItem> と <menu> は、これらの属性をすべて共有します。<menu> には、この他にも属性があります。詳細は、"<menu>" を参照してください。
属性 | 説明 |
---|---|
Zen コンポーネントの属性 |
<menu> および <menuItem> は、あらゆる Zen コンポーネントと同じ汎用属性を持ちます。詳細は、以下のセクションを参照してください。
|
caption |
このメニュー項目が、それが属する <menu> の選択肢として表示される場合の、メニュー項目のテキスト。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。 “Zen 属性のデータ型” を参照してください。 |
disabled |
True の場合、このメニュー項目は無効です。既定値は False です。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
help |
help 属性はこのメニュー項目のヘルプ・テキストを提供します。 一般的に、help として必要になるのは title 属性です。title には、ユーザがこの項目の上にマウス・カーソルを合わせたときに表示されるツールのヒントを表すテキストを指定します。<menu> や <menuItem> などの すべての Zen コンポーネント では title 属性がサポートされます。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。 “Zen 属性のデータ型” を参照してください。 |
image |
このメニュー項目に表示されるイメージのパス名およびファイル名を表します。image と caption の両方を指定すると、イメージが左、テキストが右に、隣り合わせに表示されます。 image のパスは、Caché のインストール先ディレクトリを基準とした相対パスです。通常、このパスは、以下のように Zen アプリケーションの images サブディレクトリです。 <image id="myFrame" src="/csp/myApp/images/myPic.png" /> |
imageHeight | image を指定すると、imageHeight はそのイメージの高さ (ピクセル単位) となります。既定値は 16 です。 |
imageWidth | image を指定すると、imageWidth はそのイメージの幅 (ピクセル単位) となります。既定値は 16 です。 |
link |
ユーザがメニュー項目をクリックすると表示されるコンテンツの URI。そのリンクでクライアント側の JavaScript メソッドを呼び出すには、以下のように URI の先頭に javascript: を使用します。 link="javascript:zenPage.myMethod();" |
linkResource | Caché リソースの名前。ユーザには、このリソースへのアクセス特権が必要です。特権がない場合、メニュー項目が無効になります。Caché リソースに精通していない場合は、"Caché セキュリティ管理ガイド" の “アセットおよびリソース” の章を参照してください。 |
onclick |
メニュー項目の onclick イベント・ハンドラ。ユーザがメニュー項目をクリックすると、Zen によってこのハンドラが呼び出されます。“Zen コンポーネントのイベント・ハンドラ” を参照してください。onclick を指定すると、link は無視されます。onclick を指定しない場合、メニュー項目には link で指定されたコンテンツが表示されます。 |
target |
ユーザがメニュー項目をクリックしたときに新規ドキュメントを表示する場所を制御する文字列。HTML では、通常これはフレームの名前になります。ただし、HTML では以下の特別な値も定義しています。これを target 属性に割り当てて、目的の動作を実行させることができます。
|
<menu>、<hmenu>、および <vmenu>
あらかじめ定義されたレイアウト設定がない Zen グループはすべて、既定では縦長のレイアウトになります。これは、<menu> コンポーネントにも当てはまります。ただし、メニュー・グループに対して希望のレイアウトを明示的に記述しておくと役立つ場合があります。それには、以下の操作を行います。
-
<menu> の layout 属性に、上記の例のように値を設定します。
-
<menu> の代わりに、以下のいずれかを選択します。
-
<hmenu> — 横長の選択肢リスト
-
<vmenu> — 縦長の選択肢リスト
-
<menu>、<hmenu>、および <vmenu> には以下の属性があります。
属性 | 説明 |
---|---|
Zen グループの属性 | メニューは、あらゆる Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。layout 属性は、<hmenu> および <vmenu> には適用されません。これらのコンポーネントでは、layout がそれぞれ "horizontal" および "vertical" に設定されるためです。 |
Zen のメニュー・セルの属性 | メニューには、メニュー・セル内の選択肢として caption または image を表示できます。このことから、<menu>、<hmenu>、および <vmenu> は、いくつかの属性を <menuItem> と共有します。詳細は、"<menuItem>" を参照してください。 |
onactivate |
メニューの onactivate イベント・ハンドラ。“Zen コンポーネントのイベント・ハンドラ” を参照してください。このメニューがサブメニューの場合に使用されます。サブメニューが表示される直前に、Zen によってこのハンドラが呼び出されます。 |
onshowHelp | メニュー項目の上にマウス・カーソルを移動すると Zen から呼び出されるクライアント側 JavaScript 式。通常、この式は、クライアント側 JavaScript メソッドを呼び出します。 |
<menuSeparator>
<menuSeparator> バーは、<menu> のオプションをグループ化して表示するのに役立ちます。<menuSeparator> は、あらゆる Zen コンポーネントと同じ汎用属性を持ちます。詳細は、以下のセクションを参照してください。
-
"Zen の使用法" の “Zen コンポーネントの概念” の章の “動作”
-
"Zen の使用法" の “Zen のスタイル” の章の “コンポーネントのスタイル属性”
<accordionMenu>
<accordionMenu> は、単純な HTML5 アコーディオン・メニュー・コンポーネントです。このコンポーネントは、HTML5 準拠のブラウザでのみ正常に動作します。<accordionMenu> は、以下の属性をサポートします。
属性 | 説明 |
---|---|
ongetdata | ongetdata イベント・ハンドラ。定義されている場合、このイベントはメニューに表示する項目の配列を返します。 |
onselect | onselect イベント・ハンドラ。定義されている場合、このイベントはユーザがメニュー内の項目をクリックしたときに起動されます。 |
selectedIndex | 現在選択されている項目。これは、'index1,index2,index3' という形式の文字列です。それぞれのインデックスは、0 から始まるメニューの順序的な位置であり、最初および 2 番目のレベルの子です。<accordionMenu> は、4 つ以上のレベルはサポートしません。 |
style | メニューの項目に適用される追加のスタイル。 |
<accordionMenu> に生成するデータを ongetdata イベント・ハンドラから取得するか、または controllerId プロパティを使用してメニューを <altJSONProvider> に接続して取得することができます。以下のコード・サンプルは、単純な <accordionMenu> を示しています。データは、<altJSONProvider> を使用して、OnGetArray コールバック・メソッドから取得します。
<page xmlns="http://www.intersystems.com/zen" title="">
<altJSONProvider id="jsonP" OnGetArray="GetData"/>
<accordionMenu
id="testMenu"
selectedIndex="1,2"
controllerId="jsonP"
width="200"
onselect="zen('sid').setProperty('value',key);"
/>
<text id="sid" size="20"/>
</page>
Method GetData(ByRef pParameters, Output pMetaData, Output pData) As %Status
{
Set pMetaData = $LB("key","caption","image")
Set pData(0) = $LB("1","Menu A","images/folderclosed.gif")
Set pData(0,1) = $LB("0,1","Selection 1","images/file.png")
Set pData(0,2) = $LB("0,2","Selection 2","images/file.png")
Set pData(0,3) = $LB("0,3","Selection 3","images/file.png")
Set pData(1) = $LB("1","Menu B","images/folderclosed.gif")
Set pData(1,1) = $LB("1,1","Choice 1","images/file.png")
Set pData(1,2) = $LB("1,2","Choice 2","images/file.png")
Set pData(1,3) = $LB("1,3","Choice 3","images/file.png")
Set pData(2) = $LB("1","Menu C","images/folderclosed.gif")
Set pData(2,1) = $LB("2,1","Item 1","images/file.png")
Set pData(2,2) = $LB("2,2","Item 2","images/file.png")
Set pData(2,3) = $LB("2,3","Item 3","images/file.png")
Quit $$$OK
}
OnGetArray メソッドは pMetaData 引数を使用してプロパティ名のリストを返します。任意のプロパティ名を使用できるだけでなく、<accordionMenu> コンポーネントによって特別な処理が指定された以下のプロパティ名のいずれかまたはすべてをこのリストに含めることもできます。
-
key – 選択したメニュー項目を識別する値。onselect イベント・ハンドラで使用できます。
-
caption – メニュー項目に表示されるテキストを指定します。
-
action – ユーザがメニュー項目を選択したときに発生するアクションを指定する値。onselect イベント・ハンドラで使用できます。
-
targetId – アクションのオブジェクトを指定する値。onselect イベント・ハンドラで使用できます。
-
image – メニュー項目に表示されるイメージへのパスを指定します。
-
children – メニュー項目のサブメニューを示すメニュー・ノードの配列。
<accordionMenu> は、key、action、および targetId 用に指定された値を onselect イベント・ハンドラに渡します。以下の簡単な例は、イベント・ハンドラ内でのこれらの値の使用を示しています。
ClientMethod itemSelected(key, action, targetId) [ Language = javascript ]
{
alert(key + " " + action + " " + targetId);
}
caption プロパティで指定されたテキストは、メニュー項目のラベルとして表示されます。image プロパティで指定されたイメージ・ファイルは、メニュー項目ラベルの一部としてテキストの左側に表示されます。通常、子プロパティを指定する必要はありません。OnGetArray コールバックによって提供される pData 配列内の添え字に基づいて <altJSONProvider> によって挿入されるためです。
ナビゲータ
<navigator> コンポーネントは、モバイル・デバイスのようなナビゲーションと簡単な設定を組み合わせたインタフェースを作成します。これは、HTML5 のコンポーネントです。HTML5 準拠のブラウザでのみ正しく動作します。<navigator> コンポーネントは、%ZEN.Component.navigator クラスで実装されています。
ナビゲータ・コンポーネントは、完全に JavaScript データによって駆動されます。ナビゲータを駆動するために必要な Zen オブジェクトは、ナビゲータ・コンポーネントのみです。このコンポーネントは、以下のモードで動作できます。
-
コントロールの最上位レベルが最初に表示される。
-
最上位レベルが最初に非表示にされる。これは、ユーザ・イベントによって表示する必要があります (アイコンを押して表示させるなど)。
<navigator> は、以下のプロパティをサポートします。
属性 | 説明 |
---|---|
Zen グループの属性 | メニューは、あらゆる Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。 |
backgroundStyle |
ナビゲータの背景に適用するスタイル。 |
columnWidth |
列の幅 (ピクセル単位)。既定値は 320 です。これは、表示結果が最適になる値でもあります。 |
disclosureWidth |
左側のディスクロージャ・バーの幅 (ピクセル単位)。ディスクロージャ・バーの表示/非表示は、属性 showDisclosure で制御します。ディスクロージャ・バーをクリックすることで、ナビゲータを展開および縮小します。 |
expanded |
True の場合は、ナビゲータを表示します。False の場合、ナビゲータは縮小されていて表示されません。既定値は True です。 |
footerHeight |
フッタの高さ (ピクセル単位)。フッタなしにするには、0 に設定します。既定値は 0 です。値を 40 にすると、フッタの表示結果が最適になります。 |
headerHeight |
ヘッダの高さ (ピクセル単位)。既定値は 40 です。これは、表示結果が最適になる値でもあります。 |
onarrange |
onarrange イベント・ハンドラ。“Zen コンポーネントのイベント・ハンドラ” を参照してください。現在のシートで項目の順序が変更されていると、Zen によってこのハンドラが呼び出されます。このイベントには、3 つの引数 key、swap、および final が渡されます。final は、値の変更が完了したときに True になります。swap は、プロパティ index と newIndex を含むオブジェクトです。このプロパティには、移動する項目のインデックスと、その項目の移動先を格納します。 |
onbuttonclick |
onbuttonclick イベント・ハンドラ。ユーザが "header" (ヘッダ) ボタンまたは "footer" (フッタ) ボタンをクリックすると、Zen によってこのハンドラが呼び出されます。 |
onchange |
onchange イベント・ハンドラ。プロパティ・シート内のコントロールの値が変更されていると、Zen によってこのハンドラが呼び出されます。このイベントには、3 つの引数 key、value、および final が渡されます。final は、値の変更が完了したときに True になります (ユーザがステッパ・ボタンを押すのをやめたときなど)。 |
onclosebuttonclick |
onclosebuttonclick イベント・ハンドラ。ユーザが項目の "閉じる" ボタンをクリックすると、Zen によってこのハンドラが呼び出されます。 |
onexpand |
onexpand イベント・ハンドラ。このコンポーネントをユーザが展開または縮小すると、Zen によってこのハンドラが呼び出されます。 |
ongetcontent |
ongetcontent イベント・ハンドラ : これは、このコンポーネント内の "シート" の内容を定義する、クライアント側のコードを定義します。これには、引数として level、key、および value が渡されます。このコードは、以下の任意のプロパティを含むオブジェクトを返す必要があります。
|
onindent |
onindent イベント・ハンドラ。現在のシートで項目のインデント・レベルが変更されていると、Zen によってこのハンドラが呼び出されます。このイベントには、3 つの引数 key、list、および final が渡されます。final は、値の変更が完了したときに True になります。list は、項目の新しい順序位置が格納されている配列です。 |
onpopupaction |
onpopupaction イベント・ハンドラ。ユーザが項目のポップアップを呼び出して適用した場合、Zen によってこのハンドラが呼び出されます。 |
onselect |
onselect イベント・ハンドラ。プロパティ・シート内で新しい選択肢が選択されていると、Zen によってこのハンドラが呼び出されます。このハンドラは、"drill" (ドリル) 項目が選択されたときにも呼び出されます。このイベントには、3 つの引数 key、value、および which が渡されます。which の値は "select" または "drill" です。 |
showDisclosure |
True の場合は、左側にディスクロージャ・バーを表示します。ディスクロージャ・バーの幅は、属性 disclosureWidth で制御します。 |
<navigator> の作成とサイズ変更
ナビゲータ・コンポーネントをページに追加すると、空のナビゲータ・パネルが表示されます。
<navigator id="navigator"/>
スタイルシートまたは JavaScrip で、CSS を使用して、ナビゲータのサイズを制御できます。例えば、ナビゲータの ID が "navigator" の場合、以下のコードにより、ナビゲータの高さが 600 ピクセルに設定されます。
#navigator {
height: 600px;
}
headerHeight 属性を使用すると、ヘッダ・バナーの高さを制御できます。
<navigator headerHeight="10"/>
ヘッダの高さは、ナビゲータの setHeight メソッドを使用することでプログラム的に設定することもできます。このメソッドは、内側の配置位置も再調整します。
columnWidth 属性を使用すると、ナビゲータの幅を制御できます。ただし、ナビゲータは 320 ピクセルの固定幅に合わせて設計されていることに注意してください。それ以外の幅では、メニュー・コントロールのレイアウトが整った形で表示されなくなります。
expanded 属性を使用すると、ナビゲータを薄い帯状に縮小して非表示にすることができます。ナビゲータは、ナビゲータが展開または縮小されたときに起動される onexpand イベントを定義します。このイベントを使用すると、ナビゲータのサイズが変更されたときに、ページに配置された別のコントロールのレイアウトを調整できます。
ナビゲータへのコンテンツの追加
コンテンツを追加する際には、ongetcontent イベント・ハンドラが重要になります。このハンドラは、ナビゲータが表示するコンテンツを取得する必要が生じるたびに呼び出されます。
ナビゲータのスタックベースの特性について理解することが重要です。ナビゲータは、トランプの山のように考えることができます。ナビゲータが、最初にあるカードを表示すると、ongetcontent イベント・ハンドラが、そのカードのコンテンツを取得するために呼び出されます。ユーザがナビゲータで項目をドリル・ダウンすると、新しいカードが直前のカードの上に重ねられ、その新しいカードのコンテンツを取得するために ongetcontent が再度呼び出されます。これにより、ユーザは以前のカードに戻ることも、さらに別のレベルにドリル・ダウンすることもできるようになります。
最初のカード (ナビゲータ API ではシートと呼ばれるもの) のコンテンツを定義するには、以下のように、ongetcontent ハンドラを定義します。
<navigator ongetcontent="return zenPage.getContentForLevel(level,key);"/>
メソッドの返り値を渡すために、return を使用する必要があることに注意してください。コールバック・メソッドには、2 つのパラメータが渡されます。
-
level – ナビゲータの 0 から始まるスタック・レベル。
-
key – 現在のシートに対するプログラマ定義の識別子。最初のシートの場合は、常に '' になります。
次に、ongetcontent ハンドラ・メソッドの基本的な実装を示します。
ClientMethod getContentForLevel(level, key) [ Language = javascript ]
{
var content = { title: 'My Navigator', items:[] };
return content;
}
ongetcontent ハンドラは、以下に示す特定のプロパティが含まれるオブジェクトを返すことが期待されます。
-
title は、ナビゲータのバナーに表示されるタイトルです。
-
items は、シートに表示する項目の配列です。
以下の例は、いくつのコンテンツを返します。
ClientMethod getContentForLevel(level, key) [ Language = javascript ]
{
var content = { title: 'My Navigator', items:[] };
switch (key) {
case '':
// root
content.items[content.items.length] =
{display:'caption', caption:'Red'};
content.items[content.items.length] =
{display:'caption', caption:'Green'};
content.items[content.items.length] =
{display:'caption', caption:'Blue'};
break;
}
return content;
}
key は、最初のシートでは '' です。この例では、3 つの項目を items 配列で返します。各項目は、特定のプロパティ含むオブジェクトです。ここでの場合、このプロパティは、表示する内容を指定する display と、各項目に表示するキャプションの caption です。
この時点では、ナビゲータは興味深い動作は行っていません。onselect イベント・ハンドラを使用すると、追加の動作を実装できます。このイベントハンドラは、ユーザが項目を選択したときに呼び出されます。
<navigator ... onselect="alert(key);" ... />
これでも効果は現れません。その理由は、ナビゲータ内の項目にアクションが定義されていないためです。項目の定義を変更して、action と key を定義します。
{display:'caption', caption:'Red', action:'select', key:'red'};
{display:'caption', caption:'Green', action:'select', key:'green'};
{display:'caption', caption:'Blue', action:'select', key:'blue'};
ユーザがナビゲータ内の項目をクリックすると、onselect アクションが起動され、key 値が渡されます。
使用可能な action の値は、以下のとおりです。
-
'select' – onselect コールバックを起動します。
-
'drill' – 1 レベル分ドリル・ダウンします。
-
'link' – 新しい URL に移動します。この URL は value から得られます。
-
'apply' – 現在の項目の値を適用します。これにより、ナビゲータの onchange ハンドラが起動されます。
以下に示す追加の項目では、'drill' アクションを使用します。
content.items[content.items.length] =
{display:'caption', caption:'Gray', action:'drill', key:'gray'};
この時点で、ナビゲータには、ドリルダウン・アイコンの付いた [Gray] がオプションとして表示されるようになります。[Gray] をクリックすると、ナビゲータに新しいシートが表示されます。
このシートにコンテンツを提供するには、ongetcontent ハンドラに変更を加えて、以下のように、key の値が 'gray' の場合の case を追加する必要があります。
switch(key) {
case '':
// root
content.items[content.items.length] =
{display:'caption', caption:'Red', action:'select', key:'red'};
content.items[content.items.length] =
{display:'caption', caption:'Green', action:'select', key:'green'};
content.items[content.items.length] =
{display:'caption', caption:'Blue', action:'select', key:'blue'};
content.items[content.items.length] =
{display:'caption', caption:'Gray', action:'drill', key:'gray'};
break;
case 'gray':
// gray
content.items[content.items.length] =
{display:'caption', caption:'Black', action:'select', key:'black'};
content.items[content.items.length] =
{display:'caption', caption:'White', action:'select', key:'white'};
break;
}
onselect コールバックを洗練することで、ページの動作もさらに注目を集めるものになります。
<navigator ... onselect="zenPage.selectHandler(key);" ... />
ClientMethod selectHandler(key) [ Language = javascript ]
{
zenPage.getEnclosingDiv().style.background = key;
while (zen('navigator').popSheet());
}
この時点で、ユーザが項目を選択すると、key の値が有効な色値であれば、ページの色が変化します。popSheet() への呼び出しにより、ナビゲータを最初のシートに復元します (スタック・レベルが 0 に戻るまでポップ操作を続けます)。
さらに、各項目に value を定義して、これも onselect コールバックに渡します。この場合は、色名に value を使用するほうが適切です。以下の項目定義では、value で暗赤色を指定しています。
{display:'caption', caption:'Red', action:'select', key:'red', value:'#330000'};
onselect コールバックに value を渡して、ページ色の設定に使用します。
<navigator ... onselect="zenPage.selectHandler(key, value);" ... />
ClientMethod selectHandler(key, value) [ Language = javascript ]
{
zenPage.getEnclosingDiv().style.background = value;
while (zen('navigator').popSheet());
}
項目の表示と外観の変更
各項目には、display 属性を定義できます。以下の値のいずれかになります。
-
'caption' – 項目のキャプションを表示します。
-
'caption-value-vt' – キャプションと値を縦に並べて表示します。
-
'caption-value-hz' – キャプションと値を横に並べて表示します。
-
'value' – アイテムの値を表示します。キャプションまたは値が長すぎるときには、切り捨てられることに注意してください。
-
'image-caption' – イメージとキャプションを表示します。
-
'image-caption-value-vt' – イメージとキャプションと値を縦に並べて表示します。
-
'image-caption-value-hz' – イメージとキャプションと値を横に並べて表示します。
このイメージは、項目の image プロパティで指定します。
{display:'caption-image', caption:'Red',
image:'deepsee/blueprint_plan_48.gif', action:'select',
key:'green', value:'green'};
イメージが定義されていない場合は、既定のイメージが使用されます。イメージなしで、イメージがあるときと同じインデントにするには、image:'none' を使用します。
さらに、項目のスタイルを制御するプロパティを追加することもできます。
-
style – 項目全体に適用する CSS スタイル (通常は背景)。
-
captionStyle – 項目のキャプションに適用する CSS スタイル。
-
valueStyle – 項目の値に適用する CSS スタイル。
-
disabled – 定義されていて True の場合は、この項目は無効になります。
-
selected – 定義されていて True の場合は、選択されている項目用に定義されたスタイルで、この項目を表示します。
-
checked – 定義されていて True の場合は、このこの項目がチェックされていることを示します。
項目の値の編集
ナビゲータの機能はメニューとしての機能だけではありません。これを使用すると、編集コントロールの小さなセットで値の表示と編集が可能です。 これらのコントロールには以下のものがあります。
-
'string' – 単純なテキスト入力ボックスを表示します。
-
'slider' – スライダ・コントロールを表示します。minValue と maxValue を使用して、範囲を定義できます。
-
'slider-toggle' – チェック・ボックス付きのスライダ・コントロールを表示します。チェック・ボックスがオフの場合、値は "" に設定されます。
-
'stepper' – 上/下のステッパ・コントロールを表示します。minValue と maxValue を使用して、範囲を定義できます。
-
'stepper-value' – 値付きのステッパを表示します。
-
'switch' – オン/オフのスイッチを表示します。
-
'choice' – 選択肢の小さなセットをボタンとして表示します。valueList と displayList で、値とラベルのセットを定義します。これは、ナビゲータの配置構成により、少数の選択肢の小さなセットに対してのみ適切に動作します。
編集コントロールを表示するには、以下の手順を実行します。
-
display プロパティの値は、値が表示されるものに設定します。'caption-value-hz' などをお勧めします。
-
edit プロパティの値は、利用可能なコントロール・タイプのいずれかに設定します。
次に、各種コントロールを定義しているコンテンツ項目の例を示します。
case 'edit':
// edit controls
content.items[content.items.length] =
{display:'caption-value-hz', caption:'String',
edit:'string', key:'string', value:''};
content.items[content.items.length] =
{display:'caption-value-hz', caption:'Slider',
edit:'slider', key:'slider', value:0, minValue:0, maxValue:100};
content.items[content.items.length] =
{display:'caption-value-hz', caption:'Stepper',
edit:'stepper', key:'stepper', value:0, minValue:0, maxValue:100};
content.items[content.items.length] =
{display:'caption-value-hz', caption:'Stepper 2',
edit:'stepper-value', key:'stepper-value', value:0,
minValue:0, maxValue:100};
content.items[content.items.length] =
{display:'caption-value-hz', caption:'Switch',
edit:'switch', key:'switch', value:0};
content.items[content.items.length] =
{display:'caption-value-hz', caption:'Choice',
edit:'choice', key:'choice', value:'box',
valueList:'box,circle', displayList:'Box,Circle'};
break;
edit プロパティを定義すると、action プロパティが無視されることに注意してください。value はコントロールの初期値です。これは更新されません。onchange コールバックの定義では、変更内容を適用して、それらの値が次回の ongetcontent ハンドラの呼び出し時に使用されるようにする必要があります。
onchange コールバックは、ナビゲータ・コンポーネントに接続します。
<navigator onchange="zenPage.dataChange(key,value,final);" ...
onchange コールバックには、3 つの引数 key (変更された項目の値)、新しい value、および final フラグが渡されます。final フラグは、値の変更が完了し、それがスライダやステッパに関連している場合に True になります。これにより、変更が発生したときに、その変更を追跡したり、変更が完了するまで待機することができます。
複数選択項目の作成
選択肢のセットからユーザが値を選択できるようにするときに、choice コントロールでは自由度が低すぎる場合には、複数の選択肢を含むシートを作成し、ユーザがドリルダウンしていずれかを選択できるようにします。以下に示す例では、政党を選択するための簡単なリストを定義しています。最初に、現在の選択肢を保持するプロパティをページに定義します。
Property party As %String;
以下の項目は、このプロパティを表示します。
content.items[content.items.length] =
{display:'caption-value-hz', caption:'Party', action:'drill',
key:'party', value:this.party};
この項目には、キャプションと値 (this.party) の両方が表示されます。アクションは、drill です。 この項目をユーザがドリルダウンすると、ongetcontent ハンドラは、キー 'party' で識別されるシートのコンテンツを要求します。このシートは、政党のリストを提供します。
case 'party':
content.items[content.items.length] =
{display:'value', selected:this.party=='Democrat',
value:'Democrat', action:'apply'};
content.items[content.items.length] =
{display:'value', selected:this.party=='Independent',
value:'Independent', action:'apply'};
content.items[content.items.length] =
{display:'value', selected:this.party=='Libertarian',
value:'Libertarian', action:'apply'};
content.items[content.items.length] =
{display:'value', selected:this.party=='Republican',
value:'Republican', action:'apply'};
break;
これらの各項目のアクションは、'apply’ です。ユーザがオプションを選択すると、このナビゲータの onchange ハンドラが呼び出され、シートがスタックからポップされます。現在の値を示すために、selected を使用している点に注意してください。 onchange ハンドラは、プロパティ party を更新して、元のシートが表示されたときに、ユーザの選択内容が示されるようにします。
ClientMethod dataChange(key, value, final) [ Language = javascript ]
{
// apply change to data model
switch (key) {
case 'party':
this.party = value;
break;
}
}
HTML の表示
ongetcontent ハンドラから返されたコンテンツ・オブジェクトでは、ナビゲータ・シートに表示する任意の HTML を返すことができます。これを行うには、コンテンツ・オブジェクトに html というプロパティを定義して、これに有効な HTML が含まれるように設定します。
switch(key)
case 'custom':
content.html =
'<font size="3" color="red">This is some text!</font>'
content.title = 'HTML'
break;
html コンテンツは、ナビゲータの applyValue メソッドを呼び出すことでデータ変更イベントを起動します。これにより、パネル全体のキー値 (この場合は 'custom') を使用して onchange ハンドラを起動します。
ツールバー
<toolbar> コンポーネントは、水平のバーに沿って各種項目の系列を表示できる多用途のコンポーネントです。これは、HTML5 のコンポーネントです。HTML5 準拠のブラウザでのみ正しく動作します。<toolbar> コンポーネントは、%ZEN.Component.toolbarOpens in a new tab クラスで実装されます。
<toolbar> には以下の属性があります。
属性 | 説明 |
---|---|
imageStyle | メニューのイメージに適用される追加のスタイル。これを使用してイメージのサイズを変更します。 |
onchange | onchange イベント・ハンドラ。ツールバー内のコントロールが値を変更したことを通知します。このイベントには、引数 key、value、および final が渡されます。final は、値の変更が完了したときに True になります。 |
ongetdata | ongetdata イベント・ハンドラ。定義されている場合、このイベントはメニューに表示する項目の配列を返します。 |
onpagechange | onpagechange イベント・ハンドラ。定義されている場合、このイベントは、ユーザが "pages" 項目から新しいページ番号を選択したときに起動されます。このイベントには、メニュー選択に関連付けられているデータ要素から引数 key および page (選択されたページ、1 から始まる) が渡されます。 |
onselect | onselect イベント・ハンドラ。定義されている場合、このイベントはユーザがメニュー内の項目をクリックしたときに起動されます。このイベントには、メニュー選択に関連付けられているデータ要素から引数 key、action、および targetId が渡されます。 |
scrollOffset | スクロールしたときに表示される最初の最上位レベル項目のインデックス (0 から始まる)。 |
selectedIndex | 最上位レベル・メニュー内の選択された項目のインデックス (0 から始まる)。 |
style | メニューの項目に適用される追加のスタイル。 |
ツールバーには以下のような項目を表示できます。
-
"item" – メニュー項目を示します。これは、ユーザがクリックできるキャプションです。"item" では、ドロップダウン・メニューとして表示される子のリストを定義することもできます。項目をクリックすると、onselect イベントが発生します。
-
"tab" – タブを表示します。これは、ユーザがクリックできるキャプションです。ユーザがタブをクリックすると、そのタブが現在のタブになり、その他すべてのタブ項目は選択解除されます。タブをクリックすると、onselect イベントが呼び出されます。
-
"message" – テキスト・メッセージを表示します。
-
"choice" – 選択肢のセットを選択ボタンとして表示します (displayList と valueList を使用します)。
-
"pages" – ページング・ボタンのセットを表示します。検索結果ページなどに表示できます。この場合は、minValue (最初のページ番号)、maxValue (最後のページ番号) および value (現在のページ) を指定できます。ページをクリックすると、onchangepage イベントが呼び出されます。
ツールバーのコンテンツを JavaScript オブジェクトを使用して定義します。これは ongetdata イベント・ハンドラを使用するか、または <altJSONProvider> に接続することで供給できます。JavaScript オブジェクトは、ツールバー内の項目を指定するオブジェクトのセットを定義する子という名前のコレクションを持っていることが想定されています。これらの各オブジェクトは、表示する項目のタイプを示す type プロパティを持ちます。caption はキャプションであり、key はコールバック・イベント内などで項目を識別するために使用されるキーです。
例えば、以下の Zen ページおよび ongetdata イベント・ハンドラは、サンプル・ツールバーを作成します。
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<toolbar label="Test Toolbar" width="900px"
ongetdata="return zenPage.myData();" />
</page>
}
ClientMethod myData() [ Language = javascript ]
{
var data = {
children:[
{ caption:"Home", key:"menuHome", type:'item' },
{ caption:"Menu", key:"menuMenu", type:'item',
children:[
{ caption:"Menu 1", key:"menu1", type:'item'},
{ caption:"Menu 2", key:"menu2", type:'item'},
{ caption:"Menu 3", key:"menu3", type:'item'}
]
},
{ caption:"", key:"menuChoice", type:'choice', valueList:'On,Maybe,Off' },
{ caption:"Tab 1", key:"menuTab1", type:'tab' },
{ caption:"Tab 2", key:"menuTab2", type:'tab', selected:true },
{ caption:"Tab 3", key:"menuTab3", type:'tab' },
{ caption:"This is a message", key:"menuMsg", type:'message' },
{ html:'<input type="text"/>', key:"menuSearch", type:'item' },
{ caption:'Page', key:"menuPages", type:'pages', minValue:1,maxValue:20,value:15 },
]
};
return data;
}
タブ
以下の Zen コンポーネントは、Zen アプリケーションでタブ化したメニューおよびフォームをサポートします。
-
“<tabGroup>”
-
“<lookoutMenu>”
-
“<tab>”
<tabGroup>
<tabGroup> は、<tab> コンポーネントのセットを表示します。一度に表示できる <tab> は 1 つです。ユーザは、これらのタブのいずれかを選択して、セットの一番上に表示できます。<tabGroup> は SAMPLES ネームスペースのクラス ZENTest.TabTestOpens in a new tab に基づいており、以下の例のようになります。
上記の例では、ユーザは “First Page” というラベルの付いたタブをクリックしています。以下の例では、ユーザは “Second Page” というラベルの付いたタブをクリックし、下矢印をクリックして、<dataCombo> コントロールから “Home City” を選択しています。
この図の <tabGroup> 定義は以下のとおりです。
<tabGroup id="tabGroup" showTabBar="true"
onshowTab="zenPage.updateButtons();" remember="true">
<tab caption="First Page">
<hgroup>
<spacer width="15" />
<vgroup>
<spacer height="5"/>
<html>This is the first tab!</html>
<form width="75%" layout="vertical"
cellStyle="padding: 2px; padding-left: 5px; padding-right: 5px;"
groupStyle="border:1px solid darkblue;">
<titleBox title="My Form" titleStyle="background: #DDDDFF;"
containerStyle="padding: 0px;" />
<spacer height="5"/>
<colorPicker title="This is a custom control!"
label="Color:" name="Color" />
<text label="Color Name:" name="ColorName" size="12" />
<text label="DOB:" id="DOB" name="DOB" size="15"
maxlength="10" valign="bottom"/>
<dataCombo label="Patient:" name="Patient" size="24"
sql="SELECT Name FROM ZENDemo_Data.Employee
WHERE Name %STARTSWITH ? ORDER BY Name"/>
</form>
</vgroup>
</hgroup>
</tab>
<tab caption="Second Page">
<spacer height="5"/>
<html>This is the second tab!</html>
<dataCombo label="Home City:" name="City" size="24"
sql="SELECT Location FROM ZENApp_Data.Customer
WHERE Location %STARTSWITH ? ORDER BY Name"/>
</tab>
<tab caption="Third Page" tabResource="MyResource">
<spacer height="5"/>
<html>This is the third tab!</html>
<dynaGrid id="grid">
<gridColumn label="Name" width="25%" />
<gridColumn label="Salary" width="25%" />
<gridColumn label="Comment" width="50%" />
<gridRow label="R1" />
<gridRow label="R2" />
<gridRow label="R3" />
</dynaGrid>
</tab>
</tabGroup>
<tabGroup> のコンテンツが定義された高さや幅に収まらない場合は、定義された <tabGroup> サイズの右端と下端の余分なコンテンツが切り捨てられて、ユーザがコンテンツを表示するために使用する水平と垂直のスクロールバーのスペースが確保されます。アプリケーション・レベルとページ・レベルのスタイルシートは、CSS プロパティ overflow を要素クラス tabGroupBody に適用することで、この既定の動作をオーバーライドできます。
<tabGroup> には以下の属性があります。<tabGroup> と <lookoutMenu> のどちらでも <tab> コンポーネントを表示できるので、<tabGroup> と <lookoutMenu> はこれらの属性を共有します。<lookoutMenu> には、この他にも属性があります。詳細は、"<lookoutMenu>" を参照してください。
属性 | 説明 |
---|---|
Zen グループの属性 | <tabGroup> および <lookoutMenu> はそれぞれ、あらゆる Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。height 属性は、<tabGroup> では何の効果もありませんが、CSS スタイルシートで <tabGroup> の高さを制御するために必要です。 |
currTab |
現在表示されているタブに割り当てる 1 から始まる連続番号。既定値は 1 です。 currTab の値には Zen #()# 実行時式を指定できます。 |
onhideTab |
メニュー項目の onhideTab イベント・ハンドラ。以前に表示されていたタブが非表示になると、Zen によってこのハンドラが呼び出されます。“Zen コンポーネントのイベント・ハンドラ” を参照してください。 |
onshowTab | 今まで非表示だったタブが表示されると Zen から呼び出されるクライアント側 JavaScript 式。通常、この式は、クライアント側 JavaScript メソッドを呼び出します。 |
remember |
True の場合、最後に表示されたタブの番号をセッションの cookie に記録し、タブが再表示されたときにそれを返します。既定値は False です。 remember で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
showBody |
True の場合、この <tabGroup> に属するタブのセットを表示します。showBody を False に、そして showTabBar を True に設定することにより、下部にタブの内容がないタブ・バー・ボタンのセットを表示できます。showBody の既定値は True、showTabBar の既定値は False です。 showBody で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
showTabBar |
True の場合、このグループの上部にタブ・ボタンのセットを並べて表示します。既定値は False です。 showTabBar で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
<lookoutMenu>
<lookoutMenu> は、各タブに 1 つずつ、ボタンのグループをまとめて表示します。いずれかのボタンをクリックすると、選択したタブの内容がそのボタンの下に表示され、他のボタンはその下に移動します。
以下の例は、SAMPLES ネームスペースのクラス ZENTest.LookoutMenuTestOpens in a new tab に基づいています。図では、ユーザが “Animal” ボタンをクリックして、タブの内容を表示しています。この選択により、残りのボタンはルックアウト・メニューの下部に移動しました。今は、カーソルが “Vegetables” メニュー項目に置かれています。ユーザがこの項目をクリックすると、対応する <menuItem> の定義に従って、link の内容が有効になります。
<lookoutMenu> には、<tab> コンポーネントのセットが属しています。さらに、このコンポーネントには、<menuItem> コンポーネントと <menuSeparator> コンポーネントが属しています。これらのタブは、任意のコンポーネントを収めることができるグループですが、<lookoutMenu> 内に存在する場合は、通常は <menu> を定義するコンポーネントを収めています。
上記の図の <lookoutMenu> 定義は以下のとおりです。
<lookoutMenu id="lookout" expandable="true">
<tab caption="Animal" id="animal">
<menuItem caption="Mineral"
link="javascript: zenPage.toggleTab('mineral');"
image="images/folder.gif" />
<menuItem caption="Vegetables"
link="javascript: zenPage.toggleTab('vegetable');"
image="images/folder.gif" />
<menuItem caption="Cheese"
link="javascript: zenPage.toggleTab('cheese');"
image="images/folder.gif" />
</tab>
<tab caption="Mineral" id="mineral" tabResource="MyResource">
<form>
<text label="Name:" />
<text label="Weight:" />
</form>
</tab>
<tab caption="Vegetable" id="vegetable" disabled="false">
<menuItem caption="Menu A"
link="javascript: alert('A');"
help="Option A" image="images/folder.gif" />
<menuItem caption="Menu B"
link="javascript: alert('B');"
help="Option B" image="images/folder.gif" />
<menuSeparator />
<menuItem caption="Disable"
link="javascript: zenPage.toggleTab('vegetable');"
image="images/folder.gif" />
</tab>
<tab caption="Cheese" id="cheese">
<menuItem caption="Menu C" link="javascript: alert('C');"
help="Option C" image="images/folder.gif" />
</tab>
</lookoutMenu>
<lookoutMenu> には以下の属性があります。
属性 | 説明 |
---|---|
Zen のタブ・グループの属性 | <lookoutMenu> は、<tabGroup> と同じ汎用属性を持ちます。詳細は、"<tabGroup>" にある “タブ・グループの属性” テーブルを参照してください。 |
expandable |
True の場合、この <lookoutMenu> グループは展開可能です。既定値は False です。 expandable が True の場合、上記の例のように、<lookoutMenu> の上部に展開バーが表示されます。ユーザがこのバーをクリックすると、<lookoutMenu> の expanded の状態が切り替わります。メニューが縮小されると、展開バーのみが表示されます。ユーザがこのバーを再度クリックすると、<lookoutMenu> が展開されます。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
expanded |
True の場合、この <lookoutMenu> グループは展開されます (子が表示されます)。False の場合、縮小されます (子が表示されません)。 既定値は True です。 expanded で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
oncontract |
<lookoutMenu> の oncontract イベント・ハンドラ。この <lookoutMenu> グループの子を縮小する (非表示にする) 直前に、Zen によってこのハンドラが呼び出されます。“Zen コンポーネントのイベント・ハンドラ” を参照してください。 |
onexpand | この <lookoutMenu> グループの子を展開する (表示する) 直前に呼び出されるクライアント側 JavaScript 式。 |
<tab>
<tab> は、<tabGroup> または <lookoutMenu> にあるタブを定義する特殊なグループです。<tab> には以下の属性があります。
属性 | 説明 |
---|---|
Zen グループの属性 |
<tab> は、あらゆる Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。 <tabGroup> または <lookoutMenu> では、hidden 属性を使用して、現在のタブを表示し、その他すべてのタブを非表示にします。つまり、<tabGroup> または <lookoutMenu> を表示すると、現在表示されている <tab> の hidden 属性は False に設定され、その他はすべて True に設定されます。 このため、<tab> 要素に明示的に hidden を設定しても効果はありません。ユーザが <tab> にアクセスできないようにする必要がある場合は、disabled 属性を True に設定します。 |
caption |
このタブが、それが属する <tabGroup> または <lookoutMenu> の選択肢として表示される場合の、タブのテキスト。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。 “Zen 属性のデータ型” を参照してください。 |
link |
オプションの URI 値。定義すると、<tabGroup> バー内に表示されるタブはこの URI を参照するリンクになります。現在のタブへのリンクは表示されません。 link の値には Zen #()# 実行時式を指定できます。 |
tabResource | Caché リソースの名前。ユーザには、このリソースへのアクセス特権が必要です。特権がない場合、このタブは無効になります。Caché リソースに精通していない場合は、"Caché セキュリティ管理ガイド" の “アセットおよびリソース” の章を参照してください。 |
ツリー
次の Zen コンポーネントはそれぞれ、リンクの階層構造を提供します。構造はユーザのクリックに応答して展開または縮小します。
<expando>
<expando> は、子を表示または非表示にできるグループです。<expando> ラベルの横に右矢印の図形 () があると、グループが展開 (表示) されていることを示し、下矢印の図形 () があると、グループが縮小されて (非表示になって) いることを示します。完全に縮小された <expando> グループは、以下の例のようになります。
ラベルをクリックするとグループが展開されます。この場合は、<expando> の内容がラベルの下に表示されます。<expando> は Zen グループであるため、任意のタイプの Zen コンポーネントを持つことができます。特に、<expando> の各段階には、別の <expando> グループを入れ子にして収めることができます。この入れ子にしたグループは、このグループを収めた <expando> グループとは独立に展開または縮小できます。
以下の例は、ユーザがラベルをクリックしてグループを展開した状態を示しています。今度は、ラベルをもう一度クリックして、<expando> を縮小しようとしています。この例では、3 つの <expando> グループが入れ子になっています。最も内側にある <expando> は横長のレイアウトを使用し、他のレベルのような <titleBox> コンポーネントではなく、<button> コンポーネントを持っています。
上記の図の <expando> 定義は以下のとおりです。
<expando caption="Landscape Architect's Bookshelf"
childIndent="35px" remember="true">
<spacer height="1" />
<titleBox title="National Arboretum"
subtitle="Book of Outstanding Garden Plants" />
<titleBox title="Perennials"
subtitle="The Definitive Reference" />
<titleBox title="Japanese Gardens"
subtitle="Design Principles, Aesthetic Values" />
<spacer height="1" />
<expando caption="Graham Stuart Thomas" OnDrawContent="DrawContent"
childIndent="35px" remember="true">
<expando caption="Three Gardens of Pleasant Flowers"
layout="horizontal" childIndent="35px" remember="true">
<button caption="Cambridge" onclick="zenPage.cambridgeClick()"/>
<button caption="Oak Cottage" onclick="zenPage.oakCottageClick()"/>
<button caption="Briar Cottage" onclick="zenPage.briarCottageClick()"/>
</expando>
<titleBox title="Ornamental Shrubs"
subtitle="Climbers and Bamboos" />
<titleBox title="Perennial Garden Plants"
subtitle="or The Modern Florilegium" />
<titleBox title="The Art of Planting"
subtitle="or The Planter's Handbook" />
</expando>
<spacer height="1" />
<titleBox title="Trees and Shrubs"
subtitle="for Dry California Landscapes" />
<titleBox title="Architectural Graphic Standards"
subtitle="of the American Institute of Architects" />
</expando>
この定義は、ページ・クラスで定義された多数のメソッドを参照します。例えば、第 2 段階の <expando> は、サーバ側コールバック・メソッド DrawContent を参照して、追加のフォーマット済みテキストを作成します。この例では、ここに挙げられた本の著者に授与された賞のリストが作成されます。DrawContent は、以下のようになります。
Method DrawContent(ByRef expando As %ZEN.Component.expando) As %Status
{
&html<<b> (OBE, VMH, DHM, VMM)</b>>
Quit $$$OK
}
<expando> コンポーネントには以下の属性があります。
属性 | 説明 |
---|---|
Zen グループの属性 | <expando> は、あらゆる Zen グループと同じスタイル属性およびレイアウト属性を持ちます。詳細は、"Zen の使用法" の “Zen のレイアウト” の章にある “グループのレイアウトとスタイルの属性” を参照してください。<expando> の layout は、既定では縦長です。 |
animate |
True の場合、Zen は <expando> グループ・コンテンツの表示と非表示を繰り返します。False の場合、それは行われません。 animate で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
caption |
この <expando> グループのタイトルとして表示されるテキスト。このテキストは、<expando> が縮小されているときにも表示されます。このテキストは、自動的な HTML エスケープが行われません。 この属性に普通のテキストを入力できる場合でも、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab が与えられます。 “Zen 属性のデータ型” を参照してください。 |
childIndent | 展開された項目リストで、子のインデント長さを指定する HTML 値。上記の例で使用している値は、35px です。既定ではインデントを使用せず、子を caption と揃えます。 |
expanded |
True の場合、この <expando> グループは展開されます (子が表示されます)。False の場合、縮小されます (子が表示されません)。 既定値は True です。 expanded で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
framed |
True の場合、グループ全体の周辺に境界線を表示し、正式なタイトル・ボックス内に caption を表示します。この正式な <expando> コンポーネントは、ディスクロージャ とも呼ばれています。既定値は False です。 framed で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 %ZEN.Component.expandoOpens in a new tab クラスは、サーバ側コールバック・メソッド %OnDrawTitleOptions を提供します。これは %ZEN.Component.expandoOpens in a new tab のサブクラスで定義されると、framed が True の場合、タイトル・バーの右側にコンテンツを追加する方法を提供します。%OnDrawTitleOptions で記述された HTMLは、<expando> が表示されるときにタイトル・バーに挿入されます。 |
imageContracted |
<expando> グループが縮小されている場合に表示するイメージの URI。imageContracted には、Caché のインストール先ディレクトリ内の CSP ディレクトリを基準とした相対パスを指定する必要があります。imageContracted は、既定では右矢印の図形 () であり、URL broker/images/disclosure-contracted.gif にあります。 |
imageExpanded |
<expando> グループが展開されている場合に表示するイメージの URI。imageExpanded には、Caché のインストール先ディレクトリ内の CSP ディレクトリを基準とした相対パスを指定する必要があります。imageExpanded は、既定では下矢印の図形 () であり、URL broker/images/disclosure-expanded.gif にあります。 |
oncontract |
<expando> の oncontract イベント・ハンドラ。この <expando> グループの子を縮小する (非表示にする) 直前に、Zen によってこのハンドラが呼び出されます。“Zen コンポーネントのイベント・ハンドラ” を参照してください。 |
OnDrawContent |
Zen ページ・クラスのサーバ側コールバック・メソッドの名前。このメソッドは、&html<> 構文または WRITE コマンドを使用して、<expando> に HTML コンテンツを挿入します。 Zen は、<expando> を描画するたびに、このメソッドを呼び出して、<expando> の seed 値を含む %StringOpens in a new tab を自動的に渡します。このコールバックは、データ型が %StatusOpens in a new tab である値を返す必要があります。以下に、有効なメソッド・シグニチャを示します。Method DrawMe(pSeed As %String) As %Status コールバックとして上のメソッドを使用するには、<expando> で OnDrawContent="DrawMe" と設定します。 |
onexpand | この <expando> グループの子を展開する (表示する) 直前に呼び出されるクライアント側 JavaScript 式。 |
remember |
True の場合、最後に展開された状態をセッション cookie に記録し、この状態が再表示されたときにそれを返します。既定値は False です。 remember で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
<expando> は、ナビゲーションで <link> と組み合わせた場合、特に役立ちます。
<dynaTree>
<dynaTree> コンポーネントは、展開可能なツリーとしてユーザ定義項目の階層型コレクションを表示します。多くの点で、<dynaTree> は <expando> と類似しています。ただし、<dynaTree> では、それに含まれるコンポーネントを指定するのではなく、実行時にコンテンツを動的に取得します。以下のように <dynaTree> のデータを指定することができます。
-
“dataGlobal 属性” を使用して、ツリーのコンテンツを指定するデータを持つグローバルを指定します。
-
“OnGetNodeInfo コールバック” を使用して、ツリー内の各ノードのデータを取得します。
-
“OnGetTreeInfo コールバック” を使用して、ツリーのコンテンツを指定するローカル配列に入力します。
<dynaTree> は、グローバルまたは配列のルートからツリーを構築することに注意してください。ベース・ノード以外のノードからのツリーの開始はサポートされません。
<dynaTree> のグローバルの使用法
<dynaTree> を定義する最も簡単な方法は、Caché グローバル (多次元配列) を使用することです。グローバルの詳細は、"Caché グローバルの使用法" を参照してください。
以下の <dynaTree> の定義では、dataGlobal 属性を指定することにより、^myTree グローバルを参照します。
<dynaTree id="tree" dataGlobal="^myTree" />
この定義により、^myTree グローバルのコンテンツが展開可能ツリーのノードとしてページに表示されます。
ノード・ラベル
ターミナル・コマンド行で以下の文を使用して ^myTree を定義するとします。
Set ^myTree("Root","Item 1") = "ZENMVC.MVCForm.cls"
Set ^myTree("Root","Item 2") = "http://www.intersystems.com"
Set ^myTree("Root","Item 2","SubItem") = "ZENDemo.Home.cls"
各グローバル・ノードには現在、"Root" や "Item 2" などの添え字が 1 つ以上あります。Zen では、これらの添え字を <dynaTree> の表示値として使用します。各ノードの論理値は、その添え字のグローバルの値です。これにより、この ^myTree グローバルは以下の図のような <dynaTree> を生成できます。この <dynaTree> は最下位まで展開されており、ユーザは最下位ノードである "SubItem" の上にカーソルを置いています。上記の SET 文に基づき、このノードの論理値は "ZENDemo.Home.cls"、表示値は "SubItem" です。
グローバルを使用して <dynaTree> を定義すると、結果として得られるノードは常にラベルのアルファベット順に表示されます。これは、データベース内ではグローバルがこの順序で並べられているためです。
ノード値
ユーザが以下の <dynaTree> ノード・ラベルをクリックしたときの反応は、以下のとおりです。
"SubItem"
対応するノード値がトリガされます。この値は、この章の “ノード・ラベル” の説明のとおりに設定されている場合は次のようになります。
"ZENDemo.Home.cls"
各ノード値は文字列です。一般的には、ノード値は URI 値です。以下はその例です。
-
Zen ページ・クラスの名前 :
"ZENMVC.MVCForm.cls"
-
Web サイト :
"http://www.intersystems.co.jp"
-
または、その他のコンテンツの URI。
リンクで JavaScript を呼び出す場合は、以下の例のように URI の先頭に javascript: を使用します。
-
以下のようなページ・クラスのクライアント側 JavaScript メソッドを呼び出すことができます。
"javascript: zenPage.myMethod();"
-
または、単に以下の JavaScript 式を実行します。
alert('You clicked me!');"
JavaScript 式を指定する場合は、上記のように、値を囲むには二重引用符を使用し、式内では一重引用符を使用します (必要な場合)。
<dynaTree> のコールバック・メソッドのパラメータ
<dynaTree> には、ゼロ個以上の <parameter> 要素を記述できます。各 <parameter> は、<dynaTree> を生成するコールバック・メソッドの入力パラメータを指定します。コールバック・メソッドは以下のようになります。
-
ツリー内の各ノードのデータを取得する “OnGetNodeInfo”。
-
ツリーのコンテンツを指定するローカル配列に入力する “OnGetTreeInfo”。
<parameter> 要素には以下の属性があります。
属性 | 説明 |
---|---|
paramName | paramName は <dynaTree> 内で一意であることが必要です。コールバック・メソッドに渡されるパラメータの配列の添え字となります。 |
value | <parameter> に指定する value には、リテラル文字列のほか、Zen #()# 実行時式も使用できます。 |
<dynaTree> の OnGetNodeInfo コールバック・メソッド
<dynaTree> では、ページ・クラスで定義したサーバ側コールバック・メソッドを呼び出すことにより、ノードのリストを取得できます。そのメソッド名は、OnGetNodeInfo 属性を使用して指定します。以下はその例です。
<dynaTree id="myTree"
OnGetNodeInfo="GetNodeInfo"
onclick="zenPage.treeClick(zenThis);" >
<parameter paramName="a" value="10" />
<parameter paramName="b" value="20" />
</dynaTree>
この例では、サーバ側コールバック・メソッド GetNodeInfo で指定したノードを持つツリーを定義します。ユーザが項目をクリックすると、treeClick メソッドが呼び出されます。この例では、GetNodeInfo メソッドに 2 つのパラメータも提供しています。
ツリーに表示されている各ノードの情報を取得するために、OnGetNodeInfo コールバックは繰り返し呼び出されます。Zen では、この繰り返しを以下のように処理します。
-
ツリーには、一連の最上位ノード (レベル 1) があります。ノードは子ノードを持つことができ、それぞれの子ノードは、その親ノードよりも 1 だけ大きいレベル番号 (2、3、4 など) を持っていると見なされます。
-
Zen では OnGetNodeInfo コールバックがレベル 1 から繰り返し呼び出されます。この呼び出しは、False が返されて現在のレベルにはノードが存在しないことが示されるまで繰り返されます。
-
あるノードから、子ノードがあると報告された場合は、pLevel に適した値を使用して OnGetNodeInfo コールバックが繰り返し呼び出され、その子レベルで False が返されるまで、各子ノードに関する情報が取得されます。
OnGetNodeInfo コールバック・メソッドには、以下のようなシグニチャが必要です。
Method GetNodeInfo(Output tSC As %Status,
ByRef pParams As %String,
pLevel As %Integer,
ByRef pHandle As %String,
pNodeInfo As %ZEN.Auxiliary.NodeInfo) As %Boolean
以下はその説明です。
-
このメソッドは、pLevel で指定されたレベルにノードがあるかどうかを示す %BooleanOpens in a new tab 値を返します。
-
tSC は参照により返されたステータス・コードで、成功を表します。
-
pParms は、<dynaTree> で定義されたすべての <parameter> 要素を表します。pParms は配列です。この配列の各メンバは、paramName を添え字として使用し、value を値として使用します。
-
pLevel は現在のツリー・レベルです。
-
pHandle は、コールバックへの呼び出しにそのまま渡されるユーザ定義可能な値です。コールバックはこれを使用して、ビュー情報を提供しながら、必要なステート情報をすべて格納できます。
-
pNodeInfo はあらかじめインスタンス化された %ZEN.Auxiliary.NodeInfoOpens in a new tab オブジェクトで、ツリー・ノードをどのように表示するかを指定するために使用します。%ZEN.Auxiliary.NodeInfoOpens in a new tab オブジェクトには以下のプロパティがあります。
プロパティ | 説明 |
---|---|
expanded |
True の場合、このノードは (子ノードがある場合) 最初から展開されて表示されます。False の場合、最初から縮小されて表示されます。既定値は True です。 expanded で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。サーバ側コードでは 1 または 0、クライアント側コードでは True または False の値となります。 |
hasChildren |
True の場合、このノードには 1 つ以上の子ノードがあります。この場合、OnGetNodeInfo コールバックを次に呼び出したときに、これらの子ノードに関する情報が取得されます。既定値は True です。 hasChildren で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。サーバ側コードでは 1 または 0、クライアント側コードでは True または False の値となります。 |
link |
空文字列ではない link は、このノードをクリックしたときに使用するリンクを定義します。これは、表示するページの名前などの URI、または JavaScript 式です。そのリンクでクライアント側の JavaScript メソッドを呼び出すには、以下のように URI の先頭に javascript: を使用します。 link="javascript:zenPage.myMethod();" JavaScript 式を指定する場合は、値を囲むには二重引用符を使用し、式内では一重引用符を使用します (必要な場合)。 |
text | ツリーの中で、このノードに表示する値を含む文字列。 |
value | ツリーの中で、このノードに関連付ける論理値を含む文字列。 |
以下のコード例は、OnGetNodeInfo メソッド全体を示したものです。
XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<dynaTree id="myTree" OnGetNodeInfo="GetNodeInfo">
</dynaTree>
</page>
}
Method GetNodeInfo(
Output tSC As %Status, ByRef pParams As %String,
pLevel As %Integer, ByRef pHandle As %String,
pNodeInfo As %ZEN.Auxiliary.NodeInfo) As %Boolean
{
// We store our personal state information in pHandle that is passed,
// unchanged, to each call to the callback.
// In the beginning: pHandle = ""
If pHandle = ""
{
Set pHandle = 1
}
// Let's create 10 nodes
ElseIf (pHandle = 10)
{
Quit 0
}
// Set the node count as name and value
Set pNodeInfo.value = "Node "_pHandle
Set pNodeInfo.text = "test"_pHandle
Set pNodeInfo.expanded = 1
// We add subnode within the 3rd node...
If (pHandle = 3)
{
Set pNodeInfo.hasChildren = 1
}
// ...and also subnode for the 6th subnode of the 3rd node.
ElseIf (pHandle = 6)
{
Set pNodeInfo.hasChildren = 1
}
Set pHandle = pHandle + 1
Quit 1
}
<dynaTree> の OnGetTreeInfo コールバック・メソッド
<dynaTree> では、ページ・クラスで定義したサーバ側コールバック・メソッドを呼び出すことにより、ノード情報の多次元配列として完全なツリーを取得できます。そのメソッド名は、OnGetTreeInfo 属性を使用して指定します。以下はその例です。
<dynaTree id="tree"
OnGetTreeInfo="GetTreeInfo"
onclick="zenPage.treeClick(zenThis);">
<parameter paramName="count" value="20"/>
</dynaTree>
OnGetTreeInfo コールバック・メソッドには、以下のようなシグニチャが必要です。
ClassMethod GetTreeInfo(pRoot As %String, Output pTree, ByRef pParms) As %Status
以下はその説明です。
-
メソッドはステータス・コードを返します。
-
pParms は、<dynaTree> で定義されたすべての <parameter> 要素を表します。pParms は配列です。この配列の各メンバは、paramName を添え字として使用し、value を値として使用します。
-
pRoot は、ロードされるノードの表示名です。
上記の例では、サーバ側コールバック・メソッド GetTreeInfo で指定したデータを持つ <dynaTree> を定義します。ユーザが項目をクリックすると、添え字として "count" というキーが付けられたパラメータ配列内の 20 という値を使用して、treeClick メソッドが呼び出されます。
OnGetTreeInfo を使用して <dynaTree> を定義した場合は、同じ <dynaTree> 内の OnGetNodeInfo 属性や dataGlobal 属性は使用されません。
次の例では、前の例の GetTreeInfo を実装しています。これは、OnGetTreeInfo コールバックに必要なメソッド・シグニチャを示しています。詳細例は、SAMPLES ネームスペースのクラス ZENTest.DynaTreeTestOpens in a new tab を参照してください。その例には、複数の異なる OnGetTreeInfo コールバックがあります。ユーザは、どのコールバックを使用してこのページに <dynaTree> を生成するかをラジオ・ボタンをクリックして選択します。
ClassMethod GetTreeInfo(pRoot As %String, Output pTree, ByRef pParms) As %Status
{
if pRoot=""
{
#; top-most nodes are children of 0
Set pTree(0,"ch",1) = ""
Set pTree(0,"ch",2) = ""
Set pTree(0,"ch",3) = ""
#; each node supplies: $LB(caption, value, hasChildren, link, expanded, icon)
Set pTree(1) = $LB("Animal","Animal",1,"",1,,"General types of animal")
Set pTree(2) = $LB("Mineral","Mineral",1,"",1,,"General types of mineral")
Set pTree(3) = $LB("Vegetable","Vegetable",1,"",1,,"General types of vegetable")
}
elseif pRoot="Animal" //id 1
{
Set pTree(4) = $LB("Mammal","Mammal",1,"",1)
Set pTree(0,"ch",4) = ""
}
elseif pRoot="Mineral" //id 2
{
Set pTree(7) = $LB("Rock","Rock",0,"",1)
Set pTree(0,"ch",7) = ""
}
elseif pRoot="Vegetable" //id 3
{
Set pTree(8) = $LB("Fruit","Fruit",1,"",1)
Set pTree(0,"ch",8) = ""
}
elseif pRoot="Mammal" //id 4
{
Set pTree(5) = $LB("Cat","Cat",0,"",1)
Set pTree(6) = $LB("Dog","Dog",0,"",1)
Set pTree(0,"ch",5) = ""
Set pTree(0,"ch",6) = ""
}
elseif pRoot="Fruit" //id 8
{
Set pTree(9) = $LB("Apple","Apple",0,"",1)
Set pTree(10) = $LB("Banana","Banana",0,"",1)
Set pTree(11) = $LB("Cherry","Cherry",0,"",1)
Set pTree(0,"ch",9) = ""
Set pTree(0,"ch",10) = ""
Set pTree(0,"ch",11) = ""
}
Quit $$$OK
}
<dynaTree> の属性
<dynaTree> コンポーネントは、%ZEN.Component.dynaTreeOpens in a new tab クラスの XML プロジェクションです。このトピックでは、dataGlobal 属性、OnGetNodeInfo 属性、および OnGetTreeInfo 属性については既に詳しく説明しました。以下のテーブルは、<dynaTree> の属性の一覧を示しています。
多くの <dynaTree> の属性の目的は、ユーザがクリックして展開および縮小を制御するイメージを構成することです。以下の図は、コンポーネントの使用中に <dynaTree> が表示する多くのイメージを示しています。以下のテーブルに、これらのイメージを独自のイメージで置き換えたい場合の構成方法を示します。
属性 | 説明 |
---|---|
Zen コンポーネントの属性 |
<dynaTree> は、あらゆる Zen コンポーネントと同じ汎用属性を持ちます。詳細は、以下のセクションを参照してください。
|
childIndent |
dynaTree の各レベルに適用するインデントの長さを指定する HTML 値。既定では、インデントは使用しません。 childIndent は、showLines が False の場合にのみ適用されます。showLines が True の場合、インデントは <dynaTree> が提供する行に合うように <dynaTree> によって制御されます。 |
dataGlobal |
<dynaTree> の内容を指定する Caché グローバル (多次元配列) の名前。この文字列には、以下の例のように、Caché グローバル名の特性として接頭語 ^ を記述する必要があります。 dataGlobal="^myTree" dataGlobal を使用すると、OnGetNodeInfo が除外されます。詳細は、この章の “<dynaTree> のグローバルの使用法” を参照してください。 |
imageContracted |
<dynaTree> が縮小されている場合に表示するイメージのファイル名。ユーザは、このイメージをクリックしてグループを展開します。imageContracted は既定ではプラス記号 です。このイメージのファイル名は contracted.gif です。 別のイメージを指定することもできます。指定するイメージ・ファイルは、Caché のインストール・ディレクトリの下にある images ディレクトリに存在する必要があります。 imageContracted は、showLines が False の場合にのみ適用されます。showLines が True の場合は、行を表示するグラフィカル・イメージの一部としてプラス記号が自動的に表示されます。 |
imageExpanded |
<dynaTree> が展開されている場合に表示するイメージのファイル名。ユーザは、このイメージをクリックしてグループを縮小します。imageExpanded は既定ではマイナス記号 です。このイメージのファイル名は expanded.gif です。 別のイメージを指定することもできます。指定するイメージ・ファイルは、Caché のインストール・ディレクトリの下にある images ディレクトリに存在する必要があります。 imageExpanded は、showLines が False の場合にのみ適用されます。showLines が True の場合は、行を表示するグラフィカル・イメージの一部としてマイナス記号が自動的に表示されます。 |
imageFolderClosed |
閉じているフォルダ・ノードの横に表示するイメージのファイル名。これは、子を持ち、現在は閉じている (縮小されている) ノードです。ユーザは、このイメージをクリックしてノードを展開します。imageFolderClosed は既定では閉じたフォルダのアイコン です。このイメージのファイル名は folderclosed.gif です。 別のイメージを指定することもできます。指定するイメージ・ファイルは、Caché のインストール・ディレクトリの下にある images ディレクトリに存在する必要があります。 |
imageFolderOpen |
開いているフォルダ・ノードの横に表示するイメージのファイル名。これは、子を持ち、現在開いている (展開されている) ノードです。ユーザは、このイメージをクリックしてノードを縮小します。imageFolderOpen は既定では開いたフォルダのアイコン です。このイメージのファイル名は folderopen.gif です。 別のイメージを指定することもできます。指定するイメージ・ファイルは、Caché のインストール・ディレクトリの下にある images ディレクトリに存在する必要があります。 |
imageNode |
リーフ・ノードの横に表示するイメージのファイル名。これは、<dynaTree> で子を持たないノードです。ユーザは、このイメージをクリックしてノードを選択します。imageNode は既定ではファイルのアイコン です。このイメージのファイル名は node.gif です。 別のイメージを指定することもできます。指定するイメージ・ファイルは、Caché のインストール・ディレクトリの下にある images ディレクトリに存在する必要があります。 |
showLines |
True の場合、ツリーのノード間に点線を表示します。既定値は False です。 この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。“Zen 属性のデータ型” を参照してください。 |
onchange |
<dynaTree> の onchange イベント・ハンドラ。<dynaTree> の現在の値が変更されると、Zen によってこのハンドラが呼び出されます。“Zen コンポーネントのイベント・ハンドラ” を参照してください。 |
onclick | ユーザが <dynaTree> 内のノードをクリックすると Zen から呼び出されるクライアント側 JavaScript 式。 |
ondblclick | ユーザが <dynaTree> 内のノードをダブルクリックすると Zen から呼び出されるクライアント側 JavaScript 式。 |
OnGetNodeInfo | ツリーにある各ノードに関する情報を報告するサーバ側コールバック・メソッドの名前。OnGetNodeInfo を使用すると、dataGlobal が除外されます。詳細は、この章の “<dynaTree> の OnGetNodeInfo コールバックの使用法” を参照してください。 |
OnGetTreeInfo | ツリーのコンテンツを指定するローカル配列に入力するサーバ側コールバック・メソッド名。OnGetTreeInfo を使用すると、OnGetNodeInfo と dataGlobal の両方が除外されます。詳細は、この章の “<dynaTree> の OnGetTreeInfo コールバックの使用法” を参照してください。 |
selectedIndex | <dynaTree> で現在選択されているノードのインデックス (先頭インデックスは 0)。既定の selectedIndex は –1 です (何も選択されていない状態)。 |
プログラムを使用して %ZEN.Component.dynaTreeOpens in a new tab を扱う際は、dynaTree クラスの以下のプロパティについても知っておく必要があります。
-
XData Contents の元の <dynaTree> 定義で指定されている各 <parameter> 要素は、%ZEN.Auxiliary.parameterOpens in a new tab オブジェクトのリスト・コレクションである、dynaTree の parameters プロパティのメンバとなります。各 <parameter> は、parameters コレクション内の通常の位置 (1、2、3 など) を取得します。
-
読み取り専用の text プロパティは、ツリーで現在選択されているノードのテキスト (表示) 値を保持します。これは、<dynaTree> に表示されるノード・ラベルです。
-
読み取り専用の value プロパティは、ツリーで現在選択されているノードの論理 (実際の) 値を保持します。これは、<dynaTree> で対応するラベルをユーザがクリックすると有効になる文字列です。
<dynaTree> のドラッグ・アンド・ドロップ
<dynaTree> は、dragEnabled 属性が True に設定されている場合に、データのドラッグ操作をサポートします。これが可能なのは、<dynaTree> の各ノードに定義された論理値と表示値があるためです。
データのドラッグは、“Zen コントロール” の章の “データのドラッグ・アンド・ドロップ” で説明されています。基本的には、カーソルを <dynaTree> ノードの上に置いた状態でユーザがマウス・ボタンをクリックし、ボタンを押したままでマウスを <dynaTree> から離します。データのドラッグにより、ドラッグ操作が開始された <dynaTree> ノードの現在の値が取得されます。論理値と表示値が異なる場合、データの取得の際にこの違いは保持されます。
<dynaTree> ノードから取得したデータは、ドロップが有効なすべての Zen コンポーネント上にドロップすることができます。通常、これは Zen コントロールです。データのドロップはコントロールではなく、クライアント側からのデータ入力を受け付けることができないため、<dynaTree> ではデータのドロップをサポートしていません。
フィルタ
Zen は、ナビゲーション選択肢のセットをグリッド内のボタンとしてレイアウトできる <buttonView> コンポーネントを提供します。通常、<buttonView> は、InterSystems のドキュメントのホーム・ページのように、ユーザが検索を絞り込める漸進的なフィルタ・ボタンを表示するために使用されます。
上記の例では、ユーザは [JavaScript] ボタンをクリックしています。これにより、[JavaScript] と同じカテゴリ内の別のボタンは無効になり、[Reset] ボタンが有効になって色が変更されています。このカテゴリ内のすべてのボタンを再度有効にする場合、ユーザは再度 [JavaScript] ボタンをクリックします。
<buttonView> には、ボタンの複数のカテゴリを記述できます。それぞれのカテゴリは、ラジオ・ボタンのセットのように機能し、ある時点ではカテゴリ内の 1 つのボタンしか選択できません。以下の例では、<buttonView> で多数のカテゴリが選択されています。
すべての <buttonView> コンポーネントは、自動的に [Reset] ボタンを提供します。このボタンは、ユーザが何か 1 つでも選択していると有効になります。[Reset] はグリッドの左上のエントリに表示されます。これがクリックされると、[Reset] は <buttonView> 内でユーザが現在行っている選択をすべてキャンセルします。
<buttonView>
<buttonView> コンポーネントには、他のコンポーネントは含まれません。このコンポーネントは、サーバ側コールバック・メソッドを介して動的にそのボタンを提供します。<buttonView> には以下の属性があります。
属性 | 説明 |
---|---|
Zen コンポーネントの属性 |
<buttonView> は、あらゆる Zen コンポーネントと同じ汎用属性を持ちます。詳細は、以下のセクションを参照してください。
|
columns |
グリッドの列数。指定されていない場合、既定値は 4 です。行数は、全項目数および columns 値に応じて動的に決定されます。 |
OnGetButtonInfo | このコンポーネントに表示する項目のリストを指定するサーバ側コールバック・メソッド名。詳細は、このテーブルの後に示す “<buttonView> の OnGetButtonInfo” を参照してください。 |
onselect |
<buttonView> の onselect イベント・ハンドラ。ユーザが新しいボタンを選択すると、Zen によってこのハンドラが呼び出されます。onselect ハンドラ・メソッドは、<buttonView> の現在の文字列 value を受け取るために使用できる入力パラメータを 1 つ持つ必要があります。詳細は、このテーブルの後に示す “<buttonView> の onselect” を参照してください。“Zen コンポーネントのイベント・ハンドラ” を参照してください。 |
seed |
OnGetButtonInfo コールバックに任意の値を渡せるようにします。seed の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。 <buttonView> の seed 値の使用法の推奨事項は、このテーブルの後に示す “<buttonView> の OnGetButtonInfo” を参照してください。 |
value |
現在選択されているコンポーネントの値を含む文字列。 <buttonView> の value 文字列の各エントリは、以下の形式を使用します。 category:button; <buttonView> に複数のカテゴリがある場合、ユーザが複数のカテゴリで選択を行うと、Zen はそれぞれ後に続く選択肢を既存の value 文字列に追加していきます。ユーザが複数のボタンを選択する場合、value 文字列は、以下の形式を使用します。 category:button;category:button;category:button; ユーザが組み込みの [リセット] ボタンをクリックすると、value 文字列は空になり、最初からやり直すことができます。 |
<buttonView> の XData Contents
次の XData Contents の抜粋では、<buttonView> および <html> コンポーネントを定義しています。
<hgroup width="100%" cellVAlign="top" cellAlign="left">
<buttonView id="filter" columns="2"
OnGetButtonInfo="GetFilterList"
onselect="zenPage.filterChange(value);"
/>
<spacer width="10"/>
<html id="myContent" OnDrawContent="DrawMyContent"/>
</hgroup>
次のいくつかのトピックでは、ユーザがこの <buttonView> で選択した場合、この <html> コンポーネントで OnDrawContent メソッドを呼び出し、その選択に応じて効果的に <html> コンポーネントを再描画する方法について説明します。
<buttonView> の OnGetButtonInfo
<buttonView> の OnGetButtonInfo 属性で指定されるサーバ側コールバック・メソッドは、ページ・クラスで定義する必要があります。このメソッドは、%StatusOpens in a new tab 値を返す必要があります。また、次の順で 2 つの入力パラメータを持つ必要があります。
-
%StringOpens in a new tab。<buttonView> に seed 値を指定する場合、これは自動的に OnGetButtonInfo コールバック・メソッドに渡されます。
-
参照渡しの配列。この配列には、メソッドが返されるときに、ボタンの記述の配列が格納されます。
前の <buttonView> 構文の例をサポートするには、ページ・クラスは以下のシグニチャで GetFilterList というメソッドを定義することも必要です。Zen は、<buttonView> コンポーネントを表示するたびに、自動的にこのメソッドを呼び出して、作成した配列を使用します。
ClassMethod GetFilterList(pSeed As %String, ByRef pInfo) As %Status
OnGetButtonInfo コールバック・メソッドは、各ボタンの必要な category、caption、および value を参照渡しの配列に格納する必要があります。オプションで、各配列のエントリにボタンの tooltip テキストおよび disabled フラグを格納することもできます。以下のような ObjectScript 文を使用すると、ボタン番号 n に対して配列のエントリが正しく設定されます。
Set pInfo(n) = $LB(category,caption,button,tooltip,disabled)
以下はその説明です。
-
$LB は、ObjectScript 関数 $LISTBUILD の省略表現です。
-
n は、1 から始まるボタン番号です。
-
category は、このボタンが含まれるカテゴリに割り当てられた名前です。
<buttonView> のボタンをカテゴリ別にグループ化する必要があります。同じ category 値を持つすべてのボタンは、ラジオ・ボタンのセットのように連携します。category の 1 つのボタンが選択されると、その category の他のボタンは選択できません。
この機能は、このトピックの冒頭の図に示されています。ここでは、プログラミング言語に相当するすべてのボタンの category が同じ文字列に設定されています。ユーザはその中の 1 つのボタン ([JavaScript]) をクリックしたため、この category 内のその他のボタンはすべて無効になります。この処理は、他のカテゴリのボタンには影響しません。
-
caption は、ボタンに表示されるテキストです。$$$Text マクロを使用して、caption のローカライズをサポートできます。
-
button は、このボタンが選択されたときに記録される文字列値の一部になります。<buttonView> コンポーネントの value 文字列の各エントリは、以下の形式を使用します。
category:button;
ユーザが複数のカテゴリで選択すると、Zen はそれぞれ後に続く選択肢を以下のように既存の value 文字列に追加していきます。
category:button;category:button;category:button;
-
tooltip は、ユーザがボタンの上にカーソルを置いたときに表示されるテキストです。tooltip は、$$$Text も使用できます。
-
disabled は、True の場合に、このボタンを無効にします。ボタンは消えませんが、グレー表示されます。
以下は、pInfo 配列のエントリに値を割り当てることで <buttonView> のボタンを定義するサンプルの ObjectScript 文です。
Set pInfo($I(pInfo))=
$LB("adv",$$$Text("Expert Tools"),"Expert",$$$Text("For expert users only"))
$I は、ObjectScript 関数 $INCREMENT の省略表現です。
<buttonView> の onselect
“<buttonView> の XData Contents” の例では、filterChange という onselect ハンドラを指定しています。これは、1 つのパラメータ (<buttonView> コンポーネントの現在の value) を受け取ります。
<buttonView id="filter" columns="2"
OnGetButtonInfo="GetFilterList"
onselect="zenPage.filterChange(value);"
/>
filterChange は、以下のように機能します。
ClientMethod filterChange(list) [ Language = javascript ]
{
var html = zen('myContent');
var div = html.getEnclosingDiv();
div.scrollTop = 0;
html.seed = list;
html.refreshContents();
}
この onselect ハンドラは、以下を実行します。
-
JavaScript 関数 zen を呼び出して、<buttonView> と共にページに表示される <html> コンポーネントを取得します。この <html> コンポーネントには、以下の XData Contents の定義があります。
<html id="myContent" OnDrawContent="DrawMyContent"/>
そのため、filterChange は以下の文を使用します。
var html = zen('myContent');
-
受信した <buttonView> の value を <html> の seed 属性に割り当てます。
html.seed = list;
-
<html> コンポーネントを更新します。
html.refreshContents();
これにより、<html> コンポーネントの OnDrawContent ハンドラが自動的に呼び出されます。このコールバックは、ページ・クラスで定義されたサーバ側メソッドである必要があります。このメソッドは、%StringOpens in a new tab を入力として受け入れ、%StatusOpens in a new tab データ型を返す必要があります。ここでは、その名前は DrawMyContent になります。
DrawMyContent は、<html> の seed (つまり、<buttonView> の value) を使用して、<html> コンポーネントの再描画時に実行する処理を決定します。<buttonView> の複数のユーザ選択で指定されたフィルタ情報の使用方法の判断は、このメソッドに委ねられます。<buttonView> は value を提供するだけです。