Skip to main content

This is documentation for Caché & Ensemble. See the InterSystems IRIS version of this content.Opens in a new tab

For information on migrating to InterSystems IRISOpens in a new tab, see Why Migrate to InterSystems IRIS?

Zen のレイアウト

前の章では、クラスとしての Zen コンポーネントを紹介しました。コンポーネントがクラスであるということは事実です。すべての Zen コンポーネントは、クラス %ZEN.Component.componentOpens in a new tab を拡張したものです。ただし、Zen コンポーネントをページに配置するときの主要なプログラミング言語は、通常は ObjectScript ではありません。それは XML です。

この章では、XML を使用して Zen ページをレイアウトする方法について説明します。

  • この章は、XData Contents の例で始まります。

  • 以下、数セクションにわたって、この例で使用している次の各 XML 要素について説明します。

    • <page> は最上位のコンテナ要素です。

    • <html> を使用することで、ページに直接 HTML を配置できます。

    • 例で使用している次の単純なグループ要素などの、いくつかのタイプのグループ・コンポーネントをページに配置してレイアウトを制御できます。

      • <hgroup> では、水平方向にコンポーネントがグループ化されます。

      • <vgroup> では、垂直方向にコンポーネントがグループ化されます。

    • <spacer> では、グループとグループの間にスペースが作成されます。

    • <pane> では、ページが複数の領域に分割されます。

  • この章の最後では以下について説明します。

XData Contents

アプリケーションで使用する Zen ページ・クラスを作成するときは、XData Contents ブロックを作成して、ページにコンポーネントを配置します。XData Contents ブロックは、Zen で定義されたXML拡張機能を使用して、ページのレイアウト、スタイル、動作を記述します。XData Contents 内の構文は、XMLOpens in a new tab に関する World Wide Web Consortium (W3C)Opens in a new tab 仕様で定義された “整形式の XML” で指定する必要があります。中でも重要なのは、各開始要素 (<page> など) には対応する終了要素 (</page> など) が必要ということと、入れ子ルールを遵守する必要があるということです。このドキュメント内のすべての例は、この要件を満たしています。

このドキュメントの各 XML 要素は、同じ名前を持つコンポーネント・クラスに対応します。以下の XData Contents ブロックのサンプルには、<page>、<html>、<hgroup>、<vgroup>、<pane>、および <spacer> の各 XML 要素が記述されています。これらの XML 要素は %ZEN.Component.pageOpens in a new tab%ZEN.Component.htmlOpens in a new tab%ZEN.Component.hgroupOpens in a new tab などの Zen クラスを表しています。

XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
  {
    <page xmlns="http://www.intersystems.com/zen" title="HelpDesk">
      <html id="title">My Title</html>
      <hgroup>
        <pane paneName="menuPane"/>
        <spacer width="20"/>
        <vgroup width="100%" valign="top">
          <pane paneName="tablePane"/>
          <spacer height="20"/>
          <pane paneName="detailPane"/>
        </vgroup>
      </hgroup>
    </page>
  }

前述の XData Contents ブロックを記述したクラスをコンパイルすると、Zen により、ブラウザにこのページを表示するコードが生成されます。このコードを実行すると、指定したコンポーネント・クラスがページ・オブジェクトの子オブジェクトとしてインスタンス化されます。“Zen アプリケーションの概念” の章の説明にあるように、この処理は、Zen により自動的、透過的に実行されます。

プログラムにより XData Contents ブロックを配置するときは、コンポーネント・クラスを直接操作するのではなく、コンポーネント・クラスの XML プロジェクションを操作します。各コンポーネントについて、このプロジェクションは以下により構成されています。

  • クラス (<page>、<html>、<hgroup> など) と同じ名前を持つ XML 要素

  • そのクラスのプロパティ (幅、高さなど) である XML 属性

この規約により、基礎となっているメカニズムの詳細を理解しなくても、Zen ページにサービスを提供する高機能な Zen 実行時環境を使用できるようになります。XML プロジェクションを使用してページにコンポーネントを配置すると、Zen により、これらのコンポーネントをブラウザに表示する HTML が生成されます。

ページ

XData Contents ブロックには、そのブロックにあるすべての XML 要素の最上位コンテナとして機能する <page> 要素を 1 つ記述します。<page> は、以下のテーブルに示す固有の属性を持つグループ・コンポーネントです。

属性 説明
Zen グループの属性 ページは、あらゆる Zen グループと同じ汎用属性を持ちます。詳細は、“グループのレイアウトとスタイルの属性” を参照してください。
dragAndDrop

True の場合 、このページ上のコンポーネントに対してドラッグ・アンド・ドロップ機能が有効になります。False の場合 は、この機能が無効になります。

データのドラッグ・アンド・ドロップは、ユーザが 1 つの Zen コンポーネントからデータを選択して別の Zen コンポーネントにドロップすることにより、そのフィールドの値を置換できることを意味します。より具体的に言うと、ユーザがマウスでデータをクリックし、マウス・ボタンを押したまま別の場所にデータを “ドラッグ“ します。その後、マウス・ボタンを放すことによって移動先のフィールドにデータを “ドロップ“ します。

一部のコントロールでは、その他のドラッグ・アンド・ドロップ機能も使用できます。例えば <listBox> 要素では、アプリケーション・ユーザはリスト内のアイテムをドラッグ・アンド・ドロップによって移動し、順序を変更できます。

dragAndDrop の値は、ページを最初に表示する前に設定する必要があります。ページのロード後にこの値を使用してデータのドラッグ・アンド・ドロップを有効または無効にすることはできません。dragAndDrop の既定値は False です。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。属性値は、XData Contents では "true" または "false"、サーバ側コードでは 1 または 0、クライアント側コードでは true または false です。

useSVG

True の場合 、SVG コンポーネントをサポートするさまざまな JavaScript インクルード・ファイルがこのページに含まれます。これにより、SVG 機能が有効になりますが、全体のページ・サイズは増加します。useSVG の既定値は False です。

<page> に 1 つ以上の <svgFrame> コンポーネントが含まれる場合、useSVG は自動的に True となり、<page> の属性としてそれを含める必要はなくなります。<page> コンポーネントは、最初のページ定義に <svgFrame> コンポーネントが含まれず、後でそのページで SVG コンポーネントを動的に作成する場合のみに useSVG 属性が必要になります。useSVG は、最初にページが表示される前に設定する必要があります。そうしないと、効果はありません。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。属性値は、XData Contents では "true" または "false"、サーバ側コードでは 1 または 0、クライアント側コードでは true または false です。

title

この属性は、ページ・タイトルのテキストを格納するために使用します。ページでこのテキストが自動的に使用されることはありませんが、プログラムでこのテキストを参照するときに、この属性を使用できます。title の値を指定しない場合、ページ・クラス・パラメータ PAGETITLE の値が使用されます。

この属性は普通のテキストを入力できますが、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab を持ちます。これにより、言語の DOMAIN パラメータが Zen ページ・クラスで定義されている限り、他の言語にテキストをローカライズしやすくなります。%ZEN.Datatype.captionOpens in a new tab データ型を使用すると、マクロによってクライアント側またはサーバ側のコードから title プロパティに値を代入する際に $$$Text マクロを使用できるようになります。

title の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。

xmlns

<page> の XML ネームスペース宣言の扱いを可能にします。

カスタム・コンポーネントを追加すると、異なるネームスペースにある複数のコンポーネントの間で競合が発生する可能性が高くなります。これを防止するには、xmlns 属性を追加します。

タイトル

ほとんどのページで最初に必要になるアイテムはタイトル・バーです。タイトル・バーには、“現在地点“ をユーザに知らせる役割があります。Zen ではこのためにいくつかの要素が用意されています。これらは、次のようにそれぞれ異なる役割を果たします。

シンプルなタイトル

<titleBox> では、オプションのサブタイトルと共にタイトル・ボックスが描画されます。<titleBox> を使用することによって、ページ自体を含むあらゆるコンポーネントにシンプルなタイトルを指定できます。指定方法は、単に、タイトルを設定するコンポーネントの最初の子コンポーネントとして、タイトルの内容を記述した <titleBox> 要素を配置するだけです。次に例を示します。

<page>
  <titleBox id="sampleTitle"
            title="Welcome to My Application!"
            subtitle="You are Here:"
            />
  <pane paneName="Everything Else on the Page" />
</page>

<button> のようなコンポーネントは caption 属性を持っているので、<titleBox> でラベルを指定する必要はありません。<titleBox> は <page> や <pane> に最適で便利です。<titleBox> には以下の属性があります。

属性 説明
subtitle

(オプション) サブタイトルのテキスト。

この属性は普通のテキストを入力できますが、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab を持ちます。これにより、言語の DOMAIN パラメータが Zen ページ・クラスで定義されている限り、他の言語にテキストをローカライズしやすくなります。%ZEN.Datatype.captionOpens in a new tab データ型を使用すると、マクロによってクライアント側またはサーバ側のコードから subtitle プロパティに値を代入する際に $$$Text マクロを使用できるようになります。

subtitle の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。

title

タイトルのテキスト。

この属性は普通のテキストを入力できますが、基本となるデータ型 %ZEN.Datatype.captionOpens in a new tab を持ちます。これにより、言語の DOMAIN パラメータが Zen ページ・クラスで定義されている限り、他の言語にテキストをローカライズしやすくなります。%ZEN.Datatype.captionOpens in a new tab データ型を使用すると、マクロによってクライアント側またはサーバ側のコードから title プロパティに値を代入する際に $$$Text マクロを使用できるようになります。

title の値には、リテラル文字列のほか、Zen #()# 実行時式を指定できます。

titleStyle

(オプション) 次のような CSS スタイルの文を記述した文字列。

"color:red; background: yellow;"

また、subtitle 属性と titleStyle 属性が省略されて、title のみが提供される <titlePane> 要素もあります。.

複雑なタイトル

<html> 要素を使用して、Zen ページ上に任意の HTML 抜粋を挿入できます。適切なフォントとサイズでタイトル・テキストを出力するには <html> コンポーネントを使用します。<html> を使用すると、ページを最初に設計する際にタイトルを簡単に作成できます。希望の HTML タグを <html> と </html> で囲むだけです。以下はその例です。

<page>
  <html id="sampleTitle">
    <h1>Welcome to My Application!</h1>
    <h2>You are Here:</h2>
  </html>
  <pane paneName="Everything Else on the Page" />
</page>

<html> 要素の真価は、オプションの OnDrawContent 属性にあります。OnDrawContent は、&html<> 構文または WRITE コマンドを使用して HTML コンテンツを指定するサーバ側コールバック・メソッドを識別します。このようなコールバックを定義しておくと、このコンポーネントが描画されたときに、サーバ側でそのコールバックが呼び出されます。OnDrawContent の値は、このコンポーネントを含むページ・クラスにある、サーバオンリーメソッド名に設定する必要があります。このメソッドは、オプションの %StringOpens in a new tab を入力として受け入れ、%StatusOpens in a new tab データ型を返す必要があります。この機能の重要な点は、サーバ側メソッドは通常 ObjectScript コードで構成されますが、OnDrawContent で参照されるコールバックは、ObjectScript コードのほか、&html<> または WRITE に埋め込む任意の数の HTML で構成されることです。

次の行を持つ XData Contents ブロックを記述したページ・クラスを考えます。

<html id="msgBox" OnDrawContent="DrawMessage" />

このようなページ・クラスには、上記の基準に合う DrawMessage というサーバ側コールバック・メソッドも記述する必要があります。以下の例は、SAMPLES ネームスペースの ZENApp.HelpDeskOpens in a new tab クラスのものです。

Method DrawMessage(pSeed As %String) As %Status
{
  #; create a random message
  Set tColors = $LB("red","green","blue","black","orange")
  Set tColor = $LG(tColors,$R($LL(tColors))+1)
  Set tMsgs = $LB("Fresh coffee in kitchen!",
                   "Company share price has gone up.",
                   "The boss is coming!",
                   "Customer crisis!",
                   "Lunch Time!")
  Set tMsg = $LG(tMsgs,$R($LL(tMsgs))+1)

  &html<#($ZDT($H,11))#<div style="color: #(tColor)#;">#(tMsg)#</div>>

  Quit $$$OK
}

詳細は、"Zen コンポーネントの使用法" の “その他の Zen コンポーネント” の章にある <html> を参照してください。

グループ

グループ・コンポーネントは %ZEN.Component.groupOpens in a new tab を拡張したものです。子コンポーネントを持つことが可能なタイプのコンポーネントはグループ・コンポーネントのみです。ページ、ペイン、メニュー、フォーム、複合コンポーネントなどのコンポーネントがすべて %ZEN.Component.groupOpens in a new tab を継承するのはこのためです。

レイアウト方針

各グループは、その子コンポーネントをページ上にレイアウトする役割を持ちます。一般的に、グループは横長または縦長にレイアウトできます。<hmenu> および <hgroup> を除き、すべての Zen グループおよびページのレイアウトは、既定で縦長となっています。グループの layout 属性を指定することにより、横長のレイアウトに設定し直すことができます。layout には、以下の値を指定できます。

  • "horizontal" — コンポーネントを横方向にレイアウトします。Zen によるページの生成では、子コンポーネントを記述する HTML テーブル行が作成されます。

  • "vertical" — コンポーネントを縦方向にレイアウトします。Zen によるページの生成では、子コンポーネントを記述する HTML テーブル列が作成されます。

  • "" または省略 — 既定の縦長のレイアウトになります。

layout の値に "none" を指定することもできます。"none" は、サーバ側でページ・レイアウトを静的に縦長または横長に決定するのではなく、クライアント側のレイアウト・マネージャを使用することを示します。このページのレイアウト方法は、非常に柔軟性がありますが、複雑になります。このアプローチの詳細は、"Zen アプリケーションの開発" の “クライアント側レイアウト・マネージャ” を参照してください。

シンプルなグループ・コンポーネント

次のテーブルは、前述のコード例で使用したグループ・コンポーネントをまとめたものです。これらはすべて、%ZEN.Component.groupOpens in a new tab から派生します。

コンポーネント 説明
<group> 基本グループ。レイアウトのため、または複数のコンポーネントを 1 つの論理ユニットとして扱うため (例えば、1 つの単位としてまとめて非表示または表示できるようにする) にコンポーネント・グループを作成する際に使用します。グループ・コンポーネントの子コンポーネントのレイアウトは、そのグループ・コンポーネントの属性で制御されます。
<hgroup>

横長のグループ。layout プロパティを "horizontal" に設定した <group> コンポーネントと同じです。次に例を示します。<hgroup> <button caption="Button 1" /> <spacer width="10" /> <button caption="Button 2" /> </hgroup>

<page> layout を "vertical"、cellVAlign を "top" に設定した特殊なグループ・コンポーネント。
<pane> XData Contents の外部にある XData block を参照する追加属性 paneName を持つ特殊なグループ・コンポーネント。
<spacer> <spacer> はグループ・コンポーネントではありませんが、グループ内で使用すると便利です。横長グループにスペースを追加するには width 値、縦長グループにスペースを追加するには height 値を <spacer> と共に使用します。
<vgroup>

縦長のグループ。layout プロパティを "vertical" に設定した <group> コンポーネントと同じです。次に例を示します。<vgroup> <button caption="Button 1" /> <spacer height="10" /> <button caption="Button 2" /> </vgroup>

メニュー・コンポーネント

メニュー・コンポーネントは %ZEN.Component.groupOpens in a new tab クラスから派生したグループです。メニューはグループなので、子コンポーネントを持つことができます。メニューの詳細は、"Zen コンポーネントの使用法" の “ナビゲーション・コンポーネント” の章を参照してください。

コンポーネント 説明
<menu> メニューの選択肢のセットを表示する、特殊な形式のグループ。
<hmenu> layout を "horizontal" に設定した <menu>。
<lookoutMenu> メニューを表示するタブを持つ特殊な <tabGroup>。
<menuItem> <menu> 内の項目。
<menuSeparator> <menu> 内のセパレータ。
<tab> <tabGroup> または <lookoutMenu> 内のタブとして使用するコンポーネントのグループを定義します。
<tabGroup> それ自身もコンポーネントを持つ <tab> コンポーネントで構成した特殊なグループ。一度に表示できるタブは 1 つのみです。あるタブを選択すると、そのタブのコンテンツが表示され、他のタブは非表示になります。
<vmenu> layout を "vertical" に設定した <menu>。

アクティブ・グループ・コンポーネント

以下のテーブルは、アクティブ・コンポーネントの一覧です。アクティブ・グループの完全な説明と、アクティブ・グループを使用してユーザがクライアントからページ・レイアウトを操作できるようにする方法の詳細は、"Zen アプリケーションの開発" の “クライアント側レイアウト・マネージャ” の章を参照してください。

コンポーネント 説明
<activeHGroup> 左と右の 2 つのパーティションに分割されたペイン。オプションで移動可能な調整バーによって区切られます。
<activeVGroup> 上と下の 2 つのパーティションに分割されたペイン。オプションで移動可能な調整バーによって区切られます。
<corkboard> <corkboard> には、複数の <dragGroup> コンポーネントを組み込めます。これらのコンポーネントは <corkboard> コンテナ内で重ねることができます。ユーザが <corkboard> 内のいずれかのコンポーネントをドラッグ・アンド・ドロップすると、ドラッグされたコンポーネントは、<corkboard> グループ内の他のすべてのコンポーネントの上に重なって、最前面に表示されます。ドラッグされたコンポーネントが <corkboard> に再びドロップされても、他のコンポーネントはいずれも現在の位置を維持し、移動することはありません。
<desktop> <desktop> では、その中のすべてのコンポーネントが “並べて表示“ され、各コンポーネントが互いに重なることなく完全に表示されます。<desktop> には、いくつかの <dragGroup> コンポーネントを組み込めます。ユーザはこれらのコンポーネントを新しい位置にドラッグ・アンド・ドロップできます。ユーザがドラッグしたコンポーネントをドロップすると、その場所を空けるため、<desktop> 内の他のコンポーネントはすべて移動します。
<dragGroup> <desktop> または <corkboard> の直接の子として使用できる唯一の Zen グループ・コンポーネント。<dragGroup> には、グループ内への配置に適した任意のコンポーネントを組み込めます。

その他のグループ・コンポーネント

Zen ライブラリには、%ZEN.Component.groupOpens in a new tab から派生したクラスが他にも多数あります。以下のテーブルは、このグループ・コンポーネントの一覧です。"Zen コンポーネントの使用法" のドキュメントでは、これらのコンポーネントについて説明しています。テーブル内で各コンポーネントの参照先を示しています。

コンポーネント 説明
<expando> 特殊な形式のグループ・コンポーネントで、プラス記号のアイコンをクリックするとグループが展開 (表示) され、マイナス記号のアイコンをクリックするとグループが折りたたまれます (非表示)。"Zen コンポーネントの使用法" の “Zen ナビゲーション” の章にある “グループの展開” を参照してください。
<fieldSet> HTML の <fieldSet> 要素内にメンバを表示するグループ。<fieldSet> は、子コンポーネントの外側を取り囲むボックスを描画し、このボックス内にタイトルを表示します。<fieldSet> は、大規模なフォームを編成して見やすいパネルを作成します。"Zen コンポーネントの使用法" の “その他の Zen コンポーネント” の章にある “フィールド・セット” を参照してください。
<form> フォームはグループとして定義されるので、コントロールとして使用する子コンポーネントをフォーム内に組み込めます。"Zen コンポーネントの使用法" の “Zen のフォーム” の章を参照してください。
<modalGroup> まとまって modalGroup として動作する複数のコンポーネントのセットを定義します。 このセットは最初は表示されませんが、あとで表示でき、その際はモーダルとして動作します。"Zen コンポーネントの使用法" の “ポップアップ・ウィンドウとダイアログ” の章にある “モーダル・グループ” を参照してください。
<repeatingGroup> 1 つのエントリのレイアウトを定義しておき、実行時にクエリで指定されるデータに基づいて、そのタイプの複数のエントリをレイアウトする特殊なグループ。"Zen コンポーネントの使用法" の “その他の Zen コンポーネント” の章にある “繰り返しグループ” を参照してください。

グループのレイアウトとスタイルの属性

次のテーブルは、すべてのグループ・コンポーネントに適用される XML 属性の一覧です。グループ内のコンポーネントの配置や外観は、これらの属性に左右されます。

グループのレイアウトとスタイルの属性
属性 説明
Zen コンポーネントの属性

グループは、あらゆる Zen コンポーネントと同じ汎用属性を持ちます。詳細は、以下のセクションを参照してください。

cellAlign

グループ・テーブル内の子コンポーネントを水平方向にどのように配置するかを表します。指定できる値は、"left"、"right"、"center"、および "even" です。cellAlign の動作は、グループのレイアウト方針に応じて次のように異なります。

  • horizontal — 子コンポーネントは、cellAlign の値に "left" を指定するとグループの左端に配置され、"right" を指定すると右端に配置されます。"center" を指定すると、子コンポーネントはグループの横方向の中央に配置されます。このとき、子コンポーネントの両側にスペースが追加されます。"even" を指定すると、子コンポーネントはグループの横方向の中央に配置されますが、スペースは追加されません。

  • vertical — cellAlign は、子コンポーネントを含む <td> 要素で使用する既定の縦方向配置を表します。この場合、"even" と "center" は同じ効果となります。独自の align 値を設定することで、子コンポーネントごとに cellAlign をオーバーライドできます。align については、“Zen のスタイル” の章にある “コンポーネントのスタイル属性” を参照してください。

cellAlign を指定する場合は、グループがそのコンテナで提供されるスペースをどのように使用するかを制御するために、グループの height プロパティまたは width プロパティも設定します。 縦方向に配置するには、cellAlign の代わりに cellVAlign を設定します。

cellSize

レイアウト・テーブルの中で、レイアウト方針で指定された方向に各子コンポーネントを表示するために、<td> 要素に割り当てるスペースのサイズ。可能な値は以下のとおりです。

  • "same" — 各コンポーネントに対して均等にスペースの割り当てが試みられます。

  • "stretch" — slice の相対値に基づいて各コンポーネントへのスペースの割り当てが試みられます。slice については、“Zen のスタイル” の章にある “コンポーネントのスタイル属性” を参照してください。

cellStyle

次のような CSS スタイル文を含む文字列。

"color:red; background: yellow;"

Zen では、レイアウト・テーブルの中に各子コンポーネントを表示するために使用する <td> 要素に、このスタイルが割り当てられます。このコンポーネント内に左揃えラベルもある場合、cellStyle はそのラベルを含む <td> 要素にも適用されます。

独自の containerStyle 値を設定することで、子コンポーネントごとに cellStyle をオーバーライドできます。containerStyle については、“Zen のスタイル” の章にある “コンポーネントのスタイル属性” を参照してください。

cellVAlign

グループ・テーブル内の子コンポーネントを垂直方向にどのように配置するかを表します。指定できる値は、"top"、"bottom"、"middle"、および "even" です。cellVAlign の動作は、グループのレイアウト方針に応じて次のように異なります。

  • vertical — cellVAlign の値に "top" を指定すると子コンポーネントはグループの上端に配置され、"bottom" を指定すると下端に配置されます。"middle" を指定すると、子コンポーネントはグループの縦方向の中央に配置されます。このとき、子コンポーネントの上下にスペースが追加されます。"even" を指定すると、子コンポーネントはグループの縦方向の中央に配置されますが、スペースは追加されません。

  • horizontal — cellVAlign は、子コンポーネントを含む <td> 要素で使用する既定の横方向配置を表します。この場合、"even" と "middle" は同じ効果となります。独自の valign 値を設定することで、子コンポーネントごとに cellVAlign をオーバーライドできます。valign については、“Zen のスタイル” の章にある “コンポーネントのスタイル属性” を参照してください。

cellVAlign を指定する場合は、グループがそのコンテナにより提供されるスペースをどのように使用するかを制御するために、グループの height プロパティまたは width プロパティも設定します。横方向に配置するには、cellVAlign の代わりに cellAlign を設定します。

disabled

True の場合 、このグループとその子グループが無効になります。既定値は False です。

この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。属性値は、XData Contents では "true" または "false"、サーバ側コードでは 1 または 0、クライアント側コードでは true または false です。

groupClass CSS スタイル・クラスの名前。このグループのレイアウト時には、HTML の <table> が持つ class 属性にこの値が割り当てられます。
groupStyle

次のような CSS スタイル文を含む文字列。

"color:red; background: yellow;"

このグループのレイアウト時には、HTML の <table> が持つ style 属性にこの値が割り当てられます。

labelPosition このグループ内で、コンポーネントのラベルを表示する場所を表します。指定できる値は、"top" および "left" です。"top" を指定するとコンポーネントの上に、"left" を指定するとコンポーネントの左側にラベルが配置されます。既定は "top" です。
layout

このグループで使用するレイアウト方針。通常は、"horizontal" または "vertical" を指定します。"" の場合、または省略した場合、既定値は vertical です。

layout が明示的にキーワード "none" に設定されると、Zen は既定の独自のレイアウト・マネージャでなく、クライアント側レイアウト・マネージャを使用してレイアウト管理を行います。

これらのオプションの詳細は、“レイアウト方針” を参照してください。

onclick

(オプション) ユーザがグループをクリックすると Zen で呼び出される、クライアント側 JavaScript 式。通常、この式は、クライアント側 JavaScript メソッドを呼び出します。このメソッドは、グループの “onclick ハンドラ“ になります。

onclick などのイベント・ハンドラ属性に値を指定する場合、値を囲むには二重引用符を使用し、JavaScript 式内では一重引用符を使用します (必要な場合)。次に例を示します。

<link onclick="alert('HEY');"/>

JavaScript 式には、Zen #()# 実行時式を記述できます。テーブルに続く詳しい説明を参照してください。

グループの onclick イベントを正しく指定するには、HTML および JavaScript のイベント処理に精通していなければなりません。イベント処理コードは、このグループの エンクロージング <div> 要素内でマウスがクリックされると必ずこのイベントが発生するということを考慮する必要があります。例えば、グループ内の <button> がクリックされると、ボタンおよびグループの onclick ハンドラが起動されます。

そのグループがクリックされたかどうかを検出するには、zenEvent 特殊変数を使用して渡されたイベント・オブジェクトを検証します。以下の例では、zenEvent.target 値を取得して、クリックの対象がグループ自体 (エンクロージング <div>zen 属性) であるかグループ内のコンポーネントであるかを判断します。

// look at source element; IE does not support standard target property.
var target = (null == zenEvent.target) ? zenEvent.srcElement : zenEvent.target;

// all enclosing divs will define an attribute called 'zen'.
var zen = target.getAttribute('zen');
if (zen) {
    // do something
    }

zenEvent 特殊変数の詳細は、"Zen アプリケーションの開発" の “Zen ページ” の章にある “zenEvent” を参照してください。

テンプレート・ページ

アプリケーションのすべてのページで必要な特性を提供するページ・クラスを定義し、そのテンプレート・クラスの子としてすべてのアプリケーション・ページを定義できます。これは、次のようなテンプレート・ページ・クラスです。

Class MyApp.TemplatePage Extends %ZEN.Component.page]
{
  /// Class details here
}

Class MyApp.AnotherPage Extends MyApp.TemplatePage
{
  /// Class details here
}

ページ・クラスはすべて次のようになります。

一貫した外観や使用感を持つ Zen アプリケーションを作成するには、テンプレート・ページが便利です。この方法の採用例を参照するには、スタジオを起動し、SAMPLES ネームスペースで、ページ・クラス ZENApp.ChartOpens in a new tabZENApp.HelpDeskOpens in a new tab を開きます。これらのページはそれぞれ、テンプレート・ページ ZENApp.TemplatePageOpens in a new tab を継承しています。このテンプレート・ページも参照可能です。

XData Contents に対するクラス継承の効果は、単純な置換処理の 1 つです。子クラスは子 XData があればこれを使用し、なければ親 XData を使用します。

親が XData Contents を定義 子が XData Contents を定義 結果
はい はい 子は自分の XData Contents 定義を使用します。
いいえ はい
はい いいえ 子は親から XData Contents を継承します。
いいえ いいえ ページが空になります。

スタイルに対する継承の結果は多少異なります。スタイルでは、互いをオーバーライドしたり、置き換えたりせずに共存する、カスケード判断が行われます。したがって、XData Contents の継承で適用される単純な規則は、XData Style の継承には必ずしも当てはまりません。Zen によるスタイルの適用方法を理解するには、“Zen のスタイル” の章を参照してください。

ペイン

ページ・レイアウトをペインに整理して、使いやすくできます。<pane> は、XData Contents の外部にある XData ブロックを参照する追加属性 paneName を持つ特殊なグループ・コンポーネントです。コンパイル時、XData Contents にある <pane> 要素はすべて、適切な XData ブロックに置き換えられます。

次の Zen ページを考えます。これはこの章の冒頭で紹介したサンプルです。これは、menuPane、tablePane、および detailPane の 3 つのペインで 1 つのページを編成します。

XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
  {
    <page xmlns="http://www.intersystems.com/zen" title="HelpDesk">
      <html id="title">My Title</html>
      <hgroup>
        <pane paneName="menuPane"/>
        <spacer width="20"/>
        <vgroup width="100%" valign="top">
          <pane paneName="tablePane"/>
          <spacer height="20"/>
          <pane paneName="detailPane"/>
        </vgroup>
      </hgroup>
    </page>
  }

特定のペインへの参照は次のようになります。

<pane paneName="menuPane"/>

コンパイル時、Zen は、ページ・クラスから paneName と同じ名前を持つ XData ブロックを検索することで、この参照を解決します。上記の例では、paneName の値は menuPane なので、menuPane という名前の XData ブロックが検索されます。Zen は、<pane> 参照の代わりにこのブロックを使用します。ページの表示では、XData の menuPane ブロックのすべての内容が、要素 <pane paneName="menuPane"/> の位置に表示されます。次の図はこの結果の概念を表しています。

Zen ページでのペインの使用
generated description: pane geography

次の XData ブロックは、サンプルの <pane> で参照される menuPane を定義しています。

XData menuPane
{
  <pane xmlns="http://www.intersystems.com/zen">
    <html>
      <table cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#C6930A">
            <img src="images/spacer.gif"
                 alt="-"
                 width="200"
                 height="4"
                 border="0"/>
          </td>
        </tr>
      </table>
    </html>
    <lookoutMenu id="lookout" expandable="true">
      <tab caption="Home" id="tabHome">
        <menuItem caption="Home"
                  link="MyApp.Home.cls"
                  image="images/spacer.gif"
                  help="Home Page" />
        <!-- MORE ITEMS HERE -->
      </tab>
      <!-- MORE TABS HERE -->
    </lookoutMenu>
  </pane>
}

テンプレート・ページを使用している場合、親クラスに <pane> 参照を配置し、親クラスまたは子クラスで参照を解決できます。例えば、子クラスでの参照が次のようになっているとします。

<pane paneName="myPane"/>

次のテーブルは、継承のオプションについてまとめたものです。

親が XData myPane を定義 子が XData myPane を定義 結果
はい いいえ 子は親から XData myPane を継承します。
はい はい 子は自分の XData myPane 定義を使用します。親は <pane paneName="myPane"/> を参照し、子クラスでこの参照を解決できます。この一般的な用法は ZENApp.HelpDeskOpens in a new tab サンプル・クラスで説明されています。
いいえ
いいえ いいえ どちらのクラスでも <pane paneName="myPane"/> への参照はすべて無視されます。

生成された HTML

XData Contents から生成されたコードでは、標準の HTML 要素 <table>、<tr>、<td>、および <th> を使用し、HTML テーブルとして Zen ページを表します。縦長のグループはテーブルでは列に、横長のグループは行になります。HTML のコーディングに精通したユーザであれば、これがページ上で項目を確実に配置するためのテクニックであることがわかります。

Zen グループの設定は簡単で使いやすく、HTML でのコーディングは必要ありません。HTML の <table>、<tr>、<td>、および <th> の各要素を複雑に入れ子にするのではなく、Zen コンポーネントをグループに配置するだけです。詳細なレイアウトはすべて、グループで処理されます。

FeedbackOpens in a new tab