演習 3.3: ツリー・コンポーネントの追加
この演習を始める前に、演習 3.2: タブ・パネル・コンポーネントの追加を完了する必要があります。
ツリー・コンポーネントの挿入と構成
- ツリー・コンポーネントを挿入します。
- JSP ファイルが開いていることを確認します。
タブ・パネルでツリー・パネルを選択します。
- パレットで、Faces Client コンポーネント・ドロワーをクリックして開きます。
- Tree コンポーネントをドラッグし、設計ビューのツリー・パネル上にドロップします。
- ツリー・コンポーネントのプロパティーを構成します。
- 幅と高さをピクセルまたは相対サイズで指定すると、画面のコントロールされたエリア内でツリーに囲み線をつけることができます。
ツリーがそれより大きく、ユーザーがノードを展開すると、ツリーの異なるエリアを表示できるようスクロール・バーが現れます。
幅で 600 ピクセル、高さで 200 ピクセルを選択してください。
- ルート・ノードを表示するかどうかを選択できます。
このチュートリアルでは、選択したままにしてください。
- ノードの選択を使用可能にすると、ツリー内の各ノードの横にチェック・ボックスが作成されます。
「ノードの選択を使用可能にする (Enable node selection)」をチェックしてください。
- クライアント・サイド・データが使用可能になっていることを確認します。
このチュートリアルの他のセクションを完了していれば、ページ・データ・ビューにはすでに Bean があり、クライアント・データ・ビューにはそれに対応する Bean があると思われます。
それらがない場合は、演習 2.2: サーバー・サイド・データの追加および演習 2.3: クライアント・データの構成の作成と構成の説明に従って作成してください。
- そのデータをツリー・コンポーネントにバインドします。
ツリーでユーザーとそのポートフォリオのリストを表示したいと考えます。
- クライアント・データ・ビューからルート Bean をツリー上にドラッグします。
ツリーに対して、まず開始点、つまりそのツリーのルートになるルート・オブジェクトを指定し、次にそのルート・ノードのどのプロパティーをツリーの第 1 レベルに使用するかを指示します。
またツリー内の各ノードについて、データにどのように従って下位ノードを検索するかを指定します。
- 「プロパティー」ビューで「ツリー (Tree)」をクリックし、「ツリー・ノード・リスト (Tree Node List)」タブを選択します。
- すべてのノードを展開し、root、user、portfolio を選択します。
マッピングを変更し、別のノードを選択して、それらがツリーのレンダリングにどのような影響を与えているかを確認することができます。
任意のノードから、複数の子があれば、それらをピックすることができます。
ノードがデータ構造の中間にあっても (例えば、ポートフォリオには複数のポジションのリストがあり、各ポジションには 1 つの株式があるなど)、必ずしも下位ノードを選択して選択されたノードをリーフにする必要はありません。
root (暗黙的に選択済み)、user、portfolio を選択することにより、特定のデータ・パスのみを表示して portfolios で停止するようツリーに指示します。
- それぞれノードごとに、そのノードのレンダリング方法をカスタマイズすることができます。
いくつかのことができます。
- ノードにプロパティーがある場合、ノードのラベルにどのプロパティーを使用するかを選択することができます。
- ノードにプロパティーがない場合、ノード・ラベルとして値を入力することができます。
- ノードの展開時および縮小時のアイコンを指定し、デフォルトのフォルダー・アイコンおよびファイル・アイコンをオーバーライドすることができます。
root および portfolio ノードについてはプロパティーが 1 つのみなので、デフォルトの選択が適切です。
しかし user クラスにはプロパティーが多数あります。
user クラスをクリックし、「ラベル値 (Label value)」フィールドに @{lastName} プロパティーを選択して、user ノードにそのユーザーのラストネームが表示されるようにします。
カスタマイズは、すべてクラス・ベースで行われます。
つまり、例えばツリーの複数の場所に user クラスに基づいたノードが表示されると、それらのノードすべてが、カスタマイズされた同じオプションをもつことになります。
データ構造内で user が何度参照されても、user クラスは 1 つしかありません。
イベント・ハンドラーのセットアップと管理
Faces Client コンポーネントのイベント・ハンドラーは、クイック編集ビューを使用して書きます。
データ・グリッドまたはツリー・コンポーネントについては、インクルードされたイベント・ハンドラーを使用することも、独自のカスタマイズされたイベント・ハンドラーを書くこともできます。
インクルードされたイベント・ハンドラーは 2 つあります。
- ターゲット・コンポーネントで選択されたオブジェクトをルートとして設定 - このハンドラーは、現行のコントロールで選択されたオブジェクト (オプションで、そのオブジェクト内の特定の参照) をとり、それをターゲット・コントロールでルート・オブジェクトにします。
このタイプのイベント・ハンドラーの場合、ターゲット・コントロールは Web サービスを除く任意の Faces Client コンポーネントおよび Faces Client によってサポートされている標準 JavaServer Faces コンポーネントで、イベントの発生元と同じ種類のオブジェクトにバインドされているものです。
可能なターゲット・コントロールのリストは、表示される構成ダイアログに示されます。
このイベント・ハンドラーは、ツリー・ビュー (ソース) 内で選択されたオブジェクトによってデータ・グリッド (ターゲット) に表示されるものを決定したい場合に使用します。
このハンドラーはデータ・ソースのデータ値は変更しませんが、選択されたコントロールに表示されるものを設定します。
- 選択されたオブジェクトを別のオブジェクトにバインド- このハンドラーは、選択されたオブジェクトの値 (オプションで、そのオブジェクト内の特定の参照) をとり、それを別のデータ・オブジェクトにバインドします。
このイベント・ハンドラーは、例えば Java Bean、リレーショナル・データベース・レコードなど、データ・オブジェクトに保管されているデータ値を設定します。
例えば Faces Client ポートフォリオのサンプルでは、ユーザーがデータ・グリッドから特定の株式を選択すると、その株式オブジェクト内のフィールドの値が placeHolderStock データ・オブジェクトにコピーされ、それが後に Web サービスへの入力パラメーターとして使用されます。
ハンドラーはそのオブジェクトに保管された値を変更します。
ツリーは、JavaScript を使用しているブラウザーで発生するいくつかのクライアント・サイド・イベントもサポートします。
クイック編集ビューでツリー・コンポーネント全体を選択すると、ツリー内のいずれかのノードが何らかの方法で操作されている場合にスクリプトできる以下のグローバル・イベントが表示されます。
- onnodecollapse
- このイベントはユーザーがノードを縮小するとコールされ、開発者はこれによって応答内に任意のロジックをインプリメントすることができます。
特定のノードに oncollapse イベント用のイベント・ハンドラーがすでにある場合は、これがコールされるより前に、そのイベント・ハンドラーがコールされます。
- onnodeexpand
- このイベントはユーザーがノードを展開するとコールされ、開発者はこれによって応答内に任意のロジックをインプリメントすることができます。
特定のノードに onexpand イベント用のイベント・ハンドラーがすでにある場合は、これがコールされるより前に、そのイベント・ハンドラーがコールされます。
- onnodehighlight
- このイベントはユーザーがノードを強調表示するとコールされ、開発者はこれによって応答内に任意のロジックをインプリメントすることができます。
例えば、何らかの計算を行わせる、URL を呼び出す、ページを変更する、などです。
特定のノードに onhighlight イベント用のイベント・ハンドラーがすでにある場合は、これがコールされるより前に、そのイベント・ハンドラーがコールされます。
- onnodeselect
- このイベントは、いずれかのノードが選択されるとコールされます。
イベントが発生するためには、ノードの選択が使用可能になっていなければなりません。
特定のノードに onselect イベント用のイベント・ハンドラーがすでにある場合は、これがコールされるより前に、そのイベント・ハンドラーがコールされます。
- onnodeunselect
- このイベントは、以前に選択されたノードが選択解除されるとコールされます。
イベントが発生するためには、ノードの選択が使用可能になっていなければなりません。
特定のノードに onnodeunselect イベント用のイベント・ハンドラーがすでにある場合は、これがコールされるより前に、そのイベント・ハンドラーがコールされます。
ツリーで個々のノードを選択すると、クイック編集ビューは以下のローカル・イベントを表示します。
- oncollapse
- このイベントはユーザーがノードを縮小するとコールされ、開発者はこれによって応答内に任意のロジックをインプリメントすることができます。
- onexpand
- このイベントはユーザーがノードを展開するとコールされ、開発者はこれによって応答内に任意のロジックをインプリメントすることができます。
- onhighlight
- このイベントはユーザーが指定されたノードを強調表示するとコールされ、開発者はこれによって応答内に任意のロジックをインプリメントすることができます。
例えば、何らかの計算を行わせる、URL を呼び出す、ページを変更する、などです。
- onselect
- このイベントは、指定されたノードが選択されるとコールされます。
イベントが発生するためには、ノードの選択が使用可能になっていなければなりません。
- onunselect
- このイベントは、指定されたノードが選択解除されるとコールされます。
イベントが発生するためには、ノードが以前に選択済みで、ノードの選択が使用可能になっていなければなりません。
ノードに適用されるカスタマイズはクラス単位のため、例えば User クラスにイベント・ハンドラーをインプリメントすると、ツリー内のノードとして User クラスが現れる場所すべてにこのイベントが適用されます。
注意:
- ハンドラーが任意のノードに対してローカルに指定され、グローバル・イベントのハンドラーもある場合には、ローカル・ハンドラーが先にコールされます。
それが真を戻すと、次にグローバル・ハンドラーがコールされます。
- クイック編集ビューでイベントを選択し、コード・パネルでクリックすると、そのイベントの目的、そのパラメーター、および予期される戻りの型と値を説明するコメントが表示されます。
スタイルの編集
ツリー・コンポーネントのルック・アンド・フィールをカスタマイズする必要がある場合は、tree.css というデフォルトの CSS (Cascading Style Sheet) を編集してください。
このファイルは、プロジェクト・エクスプローラーのプロジェクトで /WebContent/theme/tree.css にあります。
これで、演習 3.4: グラフ・コンポーネントの追加を開始する準備ができました。