演習 2.5: データのバインドと表示のカスタマイズ

この演習を始める前に、演習 2.4: データ・グリッドの構成を完了する必要があります。

データのバインドと表示のカスタマイズ

ポートフォリオ・ポジション (購入株式) をデータ・グリッドで表示し、ユーザーがポートフォリオのコンテンツの表示、データのページ・スルー、データのソート、数量の編集をして、簡単な分析作業を行えるようにしたい場合があります。

  1. クライアント・データ・ビューで、root.users.portfolios.positions ノードにナビゲートし、それを設計ビューのデータ・グリッドにドラッグします。 データ・グリッドは、Position クラスのすべてのフィールドについて基本データ表示に自動的にセットアップされます。
    バインドされたデータ・グリッド
  2. データ・グリッドが選択されていることを確認してから、odc:dataGrid の下で「プロパティー」ビューの「列 (Columns)」タブをクリックし、その列をカスタマイズします。 およびボタンを使用すれば、列の順序を変更することができます。 また「追加 (Add)」および「除去 (Remove)」ボタンを使用すれば、列を追加または除去することができます。 行を選択すると、列ヘッダーのラベル、幅、値を入力することができます。 デフォルトでは、属性の値が列ヘッダーとして使用されます。
    このチュートリアルでは、次のようにしてください。
    1. refNum 属性を除去します。
    2. 列をそれぞれの必要に合わせて再配列します。
    3. 内容を説明する列ヘッダーを入力します。
  3. データ・グリッドの任意のセルを選択し、「プロパティー」ビューで「列の詳細 (Column details)」タブを選択します。 「プロパティー」ビューのタブの内容はダイナミックで、選択された列を反映して自動的に更新されます。 「列 (Column)」タブでは、次のことを行えます。 このチュートリアルでは、次のようにしてください。
    1. quantity, price, purchased date に右寄せを選択します。
    2. quantity に「列のコンテンツは編集可能 (Column content is editable)」を選択します。
  4. また、個々の列が表示される方法も構成することができます。 「列の詳細 (Column details)」タブをクリックすると、次の 4 つの選択項目がある「フォーマット (Format)」リストが表示されます。 このチュートリアルでは、次のようにしてください。
    1. Purchased Date の列を「日付/時刻 (Date/Time)」に設定します。 データ・グリッドで日付を表示する場合には、実際にその列を日付としてフォーマットするよう設定することが重要です。 これを設定しないと、1970 年 1 月 1 日 00:00:00 GMT からの経過ミリ秒数が表示されます。 これが Java または JavaScript での Date オブジェクトの内部表記になっているためです。
    2. price および quantity の列を「数値 (Number)」に設定します。

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

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

  1. ターゲット・コンポーネントで選択されたオブジェクトをルートとして設定 - このハンドラーは、現行のコントロールで選択されたオブジェクト (オプションで、そのオブジェクト内の特定の参照) をとり、それをターゲット・コントロールでルート・オブジェクトにします。 このタイプのイベント・ハンドラーの場合、ターゲット・コントロールは Web サービスを除く任意の Faces Client コンポーネントおよび Faces Client によってサポートされている標準 JavaServer Faces コンポーネントで、イベントの発生元と同じ種類のオブジェクトにバインドされているものです。 可能なターゲット・コントロールのリストは、表示される構成ダイアログに示されます。 このイベント・ハンドラーは、ツリー・ビュー (ソース) 内で選択されたオブジェクトによってデータ・グリッド (ターゲット) に表示されるものを決定したい場合に使用します。 このハンドラーはデータ・ソースのデータ値は変更しませんが、選択されたコントロールに表示されるものを設定します。
  2. 選択されたオブジェクトを別のオブジェクトにバインド- このハンドラーは、選択されたオブジェクトの値 (オプションで、そのオブジェクト内の特定の参照) をとり、それを別のデータ・オブジェクトにバインドします。 このイベント・ハンドラーは、例えば Java Bean、リレーショナル・データベース・レコードなど、データ・オブジェクトに保管されているデータ値を設定します。 例えば Faces Client ポートフォリオのサンプルでは、ユーザーがデータ・グリッドから特定の株式を選択すると、その株式オブジェクト内のフィールドの値が placeHolderStock データ・オブジェクトにコピーされ、それが後に Web サービスへの入力パラメーターとして使用されます。 ハンドラーはそのオブジェクトに保管された値を変更します。

データ・グリッドを選択すると、クイック編集ビューは以下のイベントを表示します。

onhighlight
このイベントはユーザーが行を強調表示するとコールされ、開発者はこれによって応答内に任意のロジックをインプリメントすることができます。 例えば、何らかの計算を行わせる、URL を呼び出す、ページを変更する、などです。
onselect
このイベントは、行が選択されるとコールされます。 イベントが発生するためには、行の選択が使用可能になっていなければなりません。
onunselect
このイベントは、行が選択解除されるとコールされます。 イベントが発生するためには、行が以前に選択済みで、行の選択が使用可能になっていなければなりません。

: クイック編集ビューでイベントを選択し、コード・パネルでクリックすると、そのイベントの目的、そして最も重要なものとして、そのパラメーターおよび予期される戻りの型と値を説明するコメントが表示されます。

スタイルの編集

データ・グリッドのルック・アンド・フィールをカスタマイズする必要がある場合は、datagrid.css というデフォルトの CSS (Cascading Style Sheet) を編集してください。 このファイルは、プロジェクト・ナビゲーターのプロジェクトで /WebContent/theme/datagrid.css にあります。 コンポーネント・スタイルについてさらに学習したい方に

これで、演習 2.6: サーバー上でのテストを開始する準備ができました。

フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved. (C) Copyright IBM Japan 2005