Faces Client のサンプルの詳細

例の概要

このポートフォリオのサンプルは、Web ベースのポートフォリオ管理アプリケーションを模倣しています。 目標は、ユーザーが、ポートフォリオをすべて表示し、それらの全体をナビゲートし、図示し、 さらに Web サービスによってこのページに配信されたときに定期的に現在の株価で更新することを可能にすることです。 ユーザーは、分析の目的で、それらの株式の数量を変更することもできます。

Hello World のサンプルは、Faces Client フレームワークの能力を例示するために、 非常に簡単なモデルを使用して MVC (Model View Controller) セットアップをページ上に表示し、 制御用に 2 つの入力フィールドを使用します。

ポートフォリオ・アプリケーション文書

このポートフォリオのサンプルは、Web ベースのポートフォリオ管理アプリケーションを模倣しています。 このアプリケーションのモデルはルート・オブジェクトをもち、 それにはユーザーのコレクションおよび株式のコレクションが含まれています。 また、単一の株式オブジェクトへの参照も含まれており、 このオブジェクトはサンプルの Web サービスとのデータ送受信のためにプレースホルダーとして使用されます。 さらに、ユーザーが存在します。 各ユーザーは、ゼロまたはそれ以上のポートフォリオをもつことが可能であり、 また各ポートフォリオは、ゼロまたはそれ以上の位置をもつことが可能です。それぞれの位置は、株式を指します。

以下に、ページに対して異なる制御をセットアップする場合の説明があります。

このページには、2 つのタブ付きパネルがあります。最初のタブ・パネルには、3 つのパネルがあります。 「ツリー」パネルは、ルートに接続されたユーザーのリストにバインドされた TreeView を示し、 ユーザーごとにポートフォリオのリストが表示されます。 「データ・グリッド」パネルには、選択したポートフォリオの位置にバインドされたデータ・グリッドが表示されます。 「フル」パネルには、「ツリー」パネルおよび「データ・グリッド」パネルの場合のセットアップと同じツリー、 およびデータ・グリッドが並べて表示されます。
2 番目のタブ・パネルには、2 つのパネルがあります。 「グラフ」パネルには、選択したポートフォリオの位置に結合されたグラフ制御が表示されます。 グラフの X 軸には銘柄シンボルのリストが示され、Y 軸には株式ごとに対応する価格と数量が示されます。 「Web サービス」パネルには、 一時的なプレースホルダー株式のプロパティーにバインドされたいくつかの入力および出力用テキスト・フィールドが表示されます。 このパネルのコマンド・ボタンは、株式 Web サービスを起動するのに使用されます。

以下に、制御間の対話についての簡単な要約があります。

モデル・データの変更がすべて制御に反映されるように、各制御が独立してモデルにマップされることに注目してください。 これらの暗黙的なバインディングの他に、制御間でいくつかの明示的なバインディングがあります。 TreeView のポートフォリオを強調表示すると、DataGrid および GraphDraw がそのポートフォリオ・オブジェクトと一緒に更新され、 そのポートフォリオ・オブジェクトの位置に最新表示されます。 「ツリー」パネルの TreeView と「データ・グリッド」パネルの DataGrid との間で、 また「フル」パネルの TreeView と同パネルの DataGrid と「GraphDraw」パネルの GraphDraw との 3 者間でも、 この種のイベント・システムを作成します。 作成する別のタイプのイベントは、「フル」パネルの DataGrid とプレースホルダー株式オブジェクトとの間です。 DataGrid の特定の行が強調表示されると、 その位置の株式オブジェクトのすべてのフィールドは、 プレースホルダー株式オブジェクトの対応するフィールドにコピーされます。 結果として、「Web サービス」パネルの入出力フィールドが更新されます。

株式 Web サービスを起動して特定のシンボルの株価情報を得るには、 「Web サービス」パネルの「情報取り出し」ボタンをクリックします。 「Web サービス」パネルのフォーム制御によって表示される値は、株式 Web サービスから受け取られた値で更新されます。

「フル」パネルのデータ・グリッドで株式数を変更することもできます。 株式数を変更すると、GraphDraw および 損益欄を自動的に更新されます。 「フル」パネルの「終了」ボタンを押すことで、 クライアント・サイドのデータに行われたいずれの変更も、 サーバー・サイド Bean と同期化することができます。

Hello World アプリケーション文書

サーバー・サイドのこのアプリケーション用に、テキスト・タイプ・ストリングと呼ばれる属性を含む、 Hello と呼ばれる簡単なクラスがあります。 クライアント・サイドでは、2 つの入力テキスト・フィールドをもつこの同じモデルを JavaScript およびブラウザーにエクスポートしました。 この両方のフィールドを Hello オブジェクトのテキスト属性にバインドします。 1 つの制御の値を更新すると、Hello オブジェクトのテキスト・フィールドが変更され、 その結果、サーバーを往復して戻ることなしにその値が他の制御に反映されます。

最初の入力テキスト・ボックス制御内のストリングの値を「Hello World!!!」に変更してみてください。 制御は、基本的なデータ・モデルを更新するイベントを生成します (クライアント・サイドで)。 最初のテキスト・ボックスのコンテキストから移動した場合 (ボックスの外側をクリックするか、 または 2 番目のテキスト・ボックスにナビゲートした場合)、 最初の制御と同じオブジェクトの同じ属性にもバインドされるため、 2 番目のテキスト・ボックスの値は「Hello World!!!」に変更されます。