Zen コンポーネントの概念

コンポーネントは、ページのレイアウト、スタイル、および動作を指定します。次のテーブルでは、これらの一般的によく使用する用語を定義しています。個々の Zen コンポーネントには、アプリケーションのプログラミングで使用できる属性が多数用意されているので、これらの定義は重要です。このような属性の中にはレイアウト、スタイル、および一部の動作に影響するものがあります。このような概念に関する基礎を確実に理解することで、属性を自由に操作し、Zen コンポーネントから目的の結果を得ることができます。

コンポーネントの概念

用語	図	要約
ページ		ブラウザ・ウィンドウに表示される四角形。
レイアウト		ページ上での各コンポーネントおよび各コンポーネント・グループの位置。
スタイル		コンポーネントの外観。ページ上での位置には関係ありません。
動作		ユーザの入力、タイマなどのイベントの結果生じるアプリケーションのアクション。

ページ

初期状態ではページは空です。コンポーネントを追加するにつれて、ページがコンポーネントで埋められていきます。ページのどこにこれらのコンポーネントを表示するかを決定するレイアウト方針が必要です。

レイアウト

Zen で表示ページの構築が進むにつれ、ページ・クラスに指定した記述に従って、コンポーネントが 1 つずつ追加されます。ユーザ側では、このページ構築プロセスは認識されません。ユーザから見ると、単にページが表示されるだけです。しかし、意図したとおり正確にページがレイアウトされるようにするには、Zen プログラマは構築プロセスを理解しておく必要があります。

コンポーネントはグループに含まれます。グループはゼロ個以上のコンポーネントを含む特殊な種類のコンポーネントです。グループは、ページ上のコンポーネントの配置を制御します。ページ自体が 1 つのグループです。Zen は、グループ定義に基づいて標準 HTML テーブル要素を生成します。コンポーネントを縦または横に並べるには、縦方向のグループまたは横方向のグループで囲みます。通常、グループに属するコンポーネントの中で最も大きな幅または高さを持つコンポーネントを基準に、ページでのこのグループの幅や高さが決まります。グループ内のコンポーネントとコンポーネントの間にスペースを挿入するにはスペーサ・コンポーネントを使用します。ページ上では、グループ全体が 1 つのコンポーネントになります。

コンポーネントの中には、レイヤを使用できるものがあります。レイヤとは 1 か所に積み上げられた紙の束のようなものです。レイヤは、クリックすることで一度に 1 つ表示されます。メニューやタブはこの原理で動作します。

その他のコンポーネントの大きさは、その状態に基づいて変化します。例えば、<expando> リストが閉じている場合、表示されるアイテムは 1 つのみで、リストは短くなっています。リストを開くと多数のアイテムが表示され、リストは長くなります。開いたリストにより、他のコンポーネントがレイアウト上でそれより後に押し出され、ページの物理的な配置がずれる可能性があります。また、ページ・レイアウトに影響を与えずに、より大きな境界範囲内でリストを拡大縮小できるように、このリストを含むグループが、リストの予想最大サイズよりも大きいサイズに固定されていることもあります。

Zen では、Zen に提供された入力に基づいて HTML および CSS スタイル文を生成することにより、レイアウトが管理されています。レイアウトの意図を指定する方法には、基本的に次の 3 とおりがあります。

コンポーネントを含むグループにレイアウトを任せる。
Zen に対して CSS スタイル文を指定する。
クライアント側の JavaScript を使用して、ページの配置を動的に変更する。

詳細は、“Zen のレイアウト” の章を参照してください。

Scalable Vector Graphics (SVG) コンポーネントに対する処理は、その他の種類のページ・コンテンツに対する処理とは異なります。詳細は、"Zen コンポーネントの使用法" の “Zen と SVG” の章を参照してください。

スタイル

スタイルはコンポーネントの外観を決定します。Zen では、Zen に指定した入力に基づいて標準 CSS 文を生成することにより、スタイルが管理されています。

各コンポーネントに設定できるスタイル属性は多数あります。このような属性の例をいくつかあげると、背景色、サイズ、塗りつぶしのパターン、線の幅、フォント・ファミリなどがあります。既定のスタイルをそのまま使用することもできます。また、コンポーネント、ページ、またはアプリケーションの各レベルでスタイルをオーバーライドすることも可能です。

詳細は、“Zen のスタイル” の章を参照してください。

動作

動作とは、ユーザからの入力、タイマなどのイベントによりトリガされる内部アプリケーションまたは外部アプリケーションによるアクションのことです。動作は、ユーザのクリックやキーの押下の処理から、データベースのクエリに基づくテーブルの自動生成まで、このドキュメントに記載されている広い範囲のトピックに関連しています。ほとんどの場合、コンポーネントの動作はコンポーネントによって異なります。ただし、全コンポーネントに共通する属性もいくつかあります。このトピックでは、それらの一覧を示します。

Display

すべての Zen コンポーネントは、次のテーブルにある XML 属性を提供します。これらの属性では、コンポーネントの基本的な表示動作 (onshow、onhide、および onrefresh) が制御されます。

表示動作に関する属性

属性	説明
onhide	このコンポーネントが非表示になると実行されるクライアント側 JavaScript 式。
onrefresh	サーバからコンテンツが更新されると実行されるクライアント側 JavaScript 式。
onshow	このコンポーネントが表示可能になると実行されるクライアント側 JavaScript 式。通常、この式は、ページ・クラスで定義されたクライアント側 JavaScript メソッドを呼び出します。このメソッドは、コンポーネントの “onshow イベント・ハンドラ“ になります。 onshow などのイベント・ハンドラ属性に値を指定する場合、二重引用符を使用してその値を囲みます。JavaScript 式の中では、必要に応じて一重引用符で囲みます。次に例を示します。 <tablePane ondblclick="alert('HEY');"/>

属性

説明

onhide

このコンポーネントが非表示になると実行されるクライアント側 JavaScript 式。

onrefresh

サーバからコンテンツが更新されると実行されるクライアント側 JavaScript 式。

onshow

このコンポーネントが表示可能になると実行されるクライアント側 JavaScript 式。通常、この式は、ページ・クラスで定義されたクライアント側 JavaScript メソッドを呼び出します。このメソッドは、コンポーネントの “onshow イベント・ハンドラ“ になります。

onshow などのイベント・ハンドラ属性に値を指定する場合、二重引用符を使用してその値を囲みます。JavaScript 式の中では、必要に応じて一重引用符で囲みます。次に例を示します。

ドラッグ・アンド・ドロップ

ドラッグ・アンド・ドロップは、アプリケーションのユーザが、クライアント側の直接的な操作によって Zen ページ上のアイテムの位置を変更できるようにする単純な機械的処理を表します。ユーザはマウスでアイテムをクリックし、マウス・ボタンを押したまま、ページ上の別の位置にそのアイテムを “ドラッグ” します。マウス・ボタンを放すと、新しい位置にアイテムが “ドロップ” されます。ドラッグ可能なアイテムには次のものがあります。

ユーザがページ上の別の場所に移動したいと望む Zen コンポーネント。Zen が提供するいくつかのアクティブ・グループ・コンポーネントでは、ユーザがグループ内のコンポーネントをドラッグ・アンド・ドロップすることによって内部のレイアウトを変更できます。詳細は、"Zen アプリケーションの開発" の “クライアント側レイアウト・マネージャ” の章を参照してください。
ユーザが追加または移動したいと望む、Zen コンポーネント内の 1 アイテム。<listBox> コントロールでは、ユーザがドラッグ・アンド・ドロップ操作によってリスト内のエントリの順序を変えたり、リスト間でエントリを移動したりできます。データのドラッグ・アンド・ドロップに加えて、このような機能も <listBox> ではサポートしています。詳細は、"Zen コンポーネントの使用法" の “Zen コントロール” の章にある “<listBox> のドラッグ・アンド・ドロップ” を参照してください。
フォーム上の <text> コントロールの内容などのデータ。データのドラッグ・アンド・ドロップは、ユーザが 1 つの Zen コンポーネントのデータを選択して別のコンポーネントにドロップすることによって、ドロップ先のフィールドの値を置換することを意味します。より具体的に言うと、ユーザがマウスでデータをクリックし、マウス・ボタンを押したまま別の場所にデータをドラッグします。その後、マウス・ボタンを放すことによって移動先のフィールドにデータをドロップします。詳細は、"Zen コンポーネントの使用法" の “Zen コントロール” の章にある “データのドラッグ・アンド・ドロップ” を参照してください。
ほとんどの場合、データのドラッグ・アンド・ドロップは、コントロール・コンポーネントのみに適用されます。各コントロール・コンポーネントは、論理値と、ドラッグ可能な表示値を持ちます。その他に、<dynaTree> に対してもデータのドラッグを実行できます。<dynaTree> はコントロールではありませんが、<dynaTree> の各ノードは論理値と表示値を持ちます。詳細は、"Zen コンポーネントの使用法" の “その他の Zen コンポーネント” の章にある “<dynaTree> のドラッグ・アンド・ドロップ” を参照してください。

ドラッグ・アンド・ドロップは、<page> の dragAndDrop 属性が True に設定されているときのみ有効です。この属性が True の場合、ページ上のあらゆる Zen コンポーネントに以下の属性が適用されます。これらの属性は、Zen コントロールの構成目的で最もよく使用されますが、実際にはあらゆるコンポーネントに使用可能であり、あらゆる Zen コンポーネントに適用されます。

ドラッグ・アンド・ドロップ動作に関する属性

属性	説明
dragEnabled	ページで dragAndDrop が有効に設定されているときにこの属性が True の場合、このコンポーネントをドラッグ・ソースとして使用できます。つまり、ユーザはこのコンポーネントでドラッグ・アンド・ドロップ操作を開始できます。dragEnabled の既定値は False です。この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。属性値は、XData Contents では "true" または "false"、サーバ側コードでは 1 または 0、クライアント側コードでは true または false です。
dropEnabled	ページで dragAndDrop が有効に設定されているときにこの属性が True の場合、このコンポーネントをドロップ・ターゲットとして使用できます。つまり、ユーザはこのコンポーネントでドラッグ・アンド・ドロップ操作を終了できます。dropEnabled の既定値は False です。この属性で基本となるデータ型は %ZEN.Datatype.booleanOpens in a new tab です。属性値は、XData Contents では "true" または "false"、サーバ側コードでは 1 または 0、クライアント側コードでは true または false です。
onafterdrag	ページで dragAndDrop が有効に設定され、かつ dragEnabled が True の場合、このコンポーネント内で開始されたドラッグ操作が完了するたびにこのクライアント側の JavaScript 式が実行されます。通常、この式は、ページ・クラスで定義されたクライアント側 JavaScript メソッドを呼び出します。このメソッドは、コンポーネントの “onafterdrag イベント・ハンドラ“ になります。 onafterdrag などのイベント・ハンドラ属性に値を指定する場合、値を囲むには二重引用符を使用し、JavaScript 式内では一重引用符を使用します (必要な場合)。次に例を示します。 <tablePane ondblclick="alert('HEY');"/>
onbeforedrag	ページで dragAndDrop が有効に設定され、かつ dragEnabled が True の場合、このコンポーネント内でドラッグ操作が開始されるたびにこのクライアント側の JavaScript 式が実行されます。この場合、コンポーネントでイベント処理が開始されるのは、この式の実行後になります。この属性は、コンポーネントの既定のドラッグ動作をオーバーライドするときに使用します。例えば、テキストのキャプションからグラフィカル・イメージにドラッグされるデータの表示をドラッグ中に変更したい場合があります。
ondrag	ページで dragAndDrop が有効に設定され、かつ dragEnabled が True の場合、このコンポーネント内でドラッグ操作が開始されるたびにこのクライアント側の JavaScript 式が実行されます。
ondrop	ページで dropEnabled が True であり、かつ dragAndDrop が有効に設定されている場合、このコンポーネント内でドロップ操作が発生するたびにこのクライアント側の JavaScript 式が実行されます。

上記のテーブルの onafterdrag、onbeforedrag、ondrag、および ondrop 属性に対して値を指定するよりも、必要な動作を組み込んだカスタムのコンポーネントを構築する方が便利です。この場合、アプリケーション開発者は、ページ上にコンポーネントを配置するたびにドラッグ・アンド・ドロップの属性を指定する必要がないため、整合性の維持が容易になります。代わりに、開発者は必要なドラッグ・アンド・ドロップ動作が組み込まれたカスタム・コンポーネントを選択します。ドラッグ・アンド・ドロップ動作のカスタマイズの詳細は、"Zen アプリケーションの開発" の “カスタム・コンポーネント” の章にある “データのドラッグ・アンド・ドロップ・メソッド” を参照してください。

Zen レポートは、ページがロードされたときに、ドラッグ・アンド・ドロップの初期化を実行します。要素の追加またはページからの要素の削除を動的に行う場合は、メソッド ZLM.initTargetNodes を呼び出して、新しい要素に対してドラッグ・アンド・ドロップ動作を有効化する必要があります。このメソッドを呼び出すときには、ドキュメント・オブジェクト・モデル (DOM) が安定している必要があります。DOM が安定している状況、および安定性をテストする方法は、ブラウザによって異なります。

カスタマイズ

Zen は広い範囲にわたるユーザを対象にしています。ユーザの中には、Zen を使用して、さまざまなデータを扱う Web アプリケーション用のユーザ・インタフェースを短期間で作成する必要があるプログラマがいます。このようなプログラマはページに Zen コンポーネントを短時間で配置し、その基礎となるデータをユーザが確認したり、操作したりできるようにします。

一方、ユーザの中には、ページ上の各コンポーネントのレイアウト、スタイル、動作を正確に制御するために Zen を使用することが必要なプログラマがいます。このようなプログラマは、入門用トピックを見て “私の目的とは違う“ と思うかもしれません。

しかし、心配は要りません。

Zen は、さまざまな場面でカスタマイズが可能です。組み込みコンポーネントのレイアウト、スタイル、および動作を操作することにより、さまざまなバリエーションを実現できるだけでなく、新しいコンポーネントを作成したり、Zen のレイアウト・ハンドラをカスタム・コードで置き換えたりすることもできます。詳細は、"Zen アプリケーションの開発" の “カスタム・コンポーネント” の章を参照してください。

ただし、カスタマイズはまったく任意です。必ず、以下の数章を読んでから始めてください。Zen の高機能性、使いやすさ、柔軟性を体験してください。Zen が提供する各種機能を理解し、それをさらに拡張するかどうかを各自で判断してください。どのようなときにもさまざまな選択肢が用意されています。