演習 3.3: ツリー・コンポーネントの追加

この演習を始める前に、演習 3.2: タブ・パネル・コンポーネントの追加を完了する必要があります。

ツリー・コンポーネントの挿入と構成

  1. ツリー・コンポーネントの挿入:
    1. JSP ファイルが開いていることを確認します。 タブ・パネルでツリー・パネルを選択します。
    2. パレットで、Faces Client コンポーネント・ドロワーをクリックして開きます。
    3. Tree コンポーネントをドラッグし、設計ビューのツリー・パネル上にドロップします。
  2. ツリー・コンポーネントのプロパティーを構成します。
  3. クライアント・サイド・データが使用可能になっていることを確認します。 このチュートリアルの他のセクションを完了していれば、ページ・データ・ビューにはすでに Bean があり、クライアント・データ・ビューにはそれに対応する Bean があると思われます。 それらがない場合は、演習 2.2: サーバー・サイド・データの追加および演習 2.3: クライアント・データの構成の作成と構成の説明に従って作成してください。
  4. そのデータをツリー・コンポーネントにバインドします。 ツリーでユーザーとそのポートフォリオのリストを表示したいと考えます。
    1. クライアント・データ・ビューからルート Bean をツリー上にドラッグします。 ツリー対して、まず開始点、つまりそのツリーのルートになるルート・オブジェクトを指定し、次にそのルート・ノードのどのプロパティーをツリーの第 1 レベルに使用するかを指示します。 またツリー内の各ノードについて、データにどのように従って下位ノードを検索するかを指定します。
    2. 「プロパティー」ビューで「ツリー (Tree)」をクリックし、「ツリー・ノード・リスト (Tree Node List)」タブを選択します。
    3. すべてのノードを展開し、rootuserportfolio を選択します。 マッピングを変更し、別のノードを選択して、それらがツリーのレンダリングにどのような影響を与えているかを確認することができます。 任意のノードから、複数の子があれば、それらをピックすることができます。 ノードがデータ構造の中間にあっても (例えば、ポートフォリオには複数のポジションのリストがあり、各ポジションには 1 つの株式があるなど)、必ずしも下位ノードを選択して選択されたノードをリーフにする必要はありません。 root (暗黙的に選択済み)、userportfolio を選択することにより、特定のデータ・パスのみを表示して portfolios で停止するようツリーに指示します。
    4. それぞれノードごとに、そのノードのレンダリング方法をカスタマイズすることができます。 いくつかのことができます。
      • ノードにプロパティーがある場合、ノードのラベルにどのプロパティーを使用するかを選択することができます。
      • ノードにプロパティーがない場合、ノード・ラベルとして値を入力することができます。
      • ノードの展開時および縮小時のアイコンを指定し、デフォルトのフォルダー・アイコンおよびファイル・アイコンをオーバーライドすることができます。

      root および portfolio ノードについてはプロパティーが 1 つのみなので、デフォルトの選択が適切です。 しかし user クラスにはプロパティーが多数あります。 user クラスをクリックし、「ラベル値 (Label value)」フィールドに @{lastName} プロパティーを選択して、user ノードにそのユーザーのラストネームが表示されるようにします。

      カスタマイズは、すべてクラス・ベースで行われます。 つまり、例えばツリーの複数の場所に user クラスに基づいたノードが表示されると、それらのノードすべてが、カスタマイズされた同じオプションをもつことになります。 データ構造内で user が何度参照されても、user クラスは 1 つしかありません。
タブ・パネルのツリー・コンポーネント

イベント・ハンドラーのセットアップと管理

Faces Client コンポーネントのイベント・ハンドラーは、クイック編集ビューを使用して書きます。 データ・グリッドまたはツリー・コンポーネントについては、インクルードされたイベント・ハンドラーを使用することも、独自のカスタマイズされたイベント・ハンドラーを書くこともできます。 インクルードされたイベント・ハンドラーは 2 つあります。

ツリーは、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: グラフ・コンポーネントの追加を開始する準備ができました。

ご利用条件 | フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved. (C) Copyright IBM Japan 2004