手順 2 : ページ フローとコントロールを追加する

この手順のタスクは以下のとおりです。

新しいページ フローを作成するには

  1. [プロジェクト・エクスプローラ] で CustomerCare プロジェクトを右クリックして [新規｜ページ フロー] を選択します。
  2. [新しいページ フロー] ダイアログの [ページ フロー フォルダ名] フィールドに customerManagement と入力し、[終了] をクリックします。

  3. ページ フロー パースペクティブを開くかどうか尋ねられた場合、[はい] をクリックします。

新しいページ フローを追加すると、デフォルトでページ フロー パースペクティブに表示されます。ページ フロー パースペクティブでは、特定のページ フローに対して以下の 4 つの異なるビューが提供されます。

  1. ページ フロー エクスプローラ
  2. ページ フロー エディタ
  3. ソース エディタ
  4. ページ フロー概要

ページ フロー エクスプローラ

[ページ フロー エクスプローラ] には、現在のページ フローの論理ビューが表示されます。ページ フローに含まれるアクション、ページ、ページ フローに含まれるアクション、JSP ページ、フォーム Bean などすべてがリストされます。[ページ フロー エクスプローラ] では、ファイル ツリーと似た方法で要素が表示されます。ただし、このツリーは、ページ フロー アーティファクトのファイル システム レイアウトではないことに注意する必要があります。(ファイル システム上のページ フローの実際のファイル ツリーを確認するには、ナビゲーター ビューに切り替えます)。

最上位のノードとして、現在のページ フロー コントローラのパッケージが表示されます。これは、JSP が格納される WebContent の下のフォルダ名にもなります。ページ フローでは、パッケージのフォルダ名と WebContent のフォルダ名は、常に一致しなければなりません。ここでは、customerManagement という名前が共有されます。

最初の子ノードとして、ページ フロー コントローラ クラスが表示されます。ここでは、CustomerManagementController.java です。

次のノードには、アクションがリストされます。ここでは、begin というアクションが 1 つのみ存在します。このアクションは、新しい各ページ フローに対してデフォルトで作成されます。

次に JSP がリストされます。ここでは、index.jsp という JSP が 1 つのみ存在します。

この時点では、その他のノードはすべて空です。これは、このページ フローがまだ開発されていないためです。この後で、これらのノードに項目を追加していきます。

ページ フロー エディタ

ページ フロー エディタには、現在のページ フローの特定の要素がグラフィカル表示されます。

グラフィカル表示には、ページ フローのアクション、JSP、およびアクションとページとの間の接続が表示されます。下の図では、begin アクションが中央のペインに表示されてます。begin アクションから index.jsp ページに伸びている矢印は、begin アクションが呼び出されたときにユーザを index.jsp に転送する Forward を表します。

左側のペインは上流ペインと呼ばれ、右側のペインは下流ペインと呼ばれます。[ページ フロー エディタ] は常に左から始まり右に進むようにフローの方向を表している点に注意してください。

現在示されているページ フローを変更するには、下図に示すように、緑色の三角形マークのドロップダウン リストをクリックします。

下図のドロップダウン リストに示すように、Web アプリケーションには次の 2 つのページ フローが存在します。(1) Controller (各 Web アプリケーションに作成されるデフォルトのページ フロー) と (2) CustomerManagementController (このチュートリアルの残りで開発するページ フロー) です。

[ページ フロー エクスプローラ] タブ上のアイコンをクリックすることによっても、利用可能なページ フローのリストにアクセスできます。下図では、このアイコンを赤丸で囲んでいます (左横に接しているアイコンをクリックすると、[新しいページ フロー] ウィザードが起動します)。

[ページ フロー概要]

[ページ フロー概要] では、ページ フローのグラフィカルな概要が表示されます。すべてのアクション、ページ、およびそれらの関係が表示されます。

[ページ フロー概要] 内でノードを選択すると、[ページ フロー エディタ] の中央のペインに同じノードが表示されます。

[ページ フロー概要] 内のアイコンをダブルクリックすると、ソース ビューに、関連するソース コードが表示されます。

ソース エディタ

[ページ フロー概要] の直下にある [ソース エディタ] には、ページ フロー コントローラ クラスの Java ソースが表示されます。

コントロールをページ フローに追加するには

この手順では、コントロール (CustomerControl.java) をページ フローに追加します。ページ フロー クライアントは、このコントロールのメソッド (addCustomer、editCustomer など) によって、データベース内の顧客データと対話できます。ページ フロー クライアントとデータベースとの間の対話は、次の 3 つのクラスから構成されます。

  1. CustomerManagementController.java : クライアントのページ フロー クラス
  2. CustomerControl.java : ラッパー中間コントロール クラス
  3. CustomerDB.java : データベース コントロール クラス (データベースを直接クエリする)

CustomerControl.java コントロールは、クライアントの CustomerManagementController.java とデータベース コントロールの CustomerDB.java との間のラッパー中間クラスとして機能します。このラッパー中間物によってアプリケーションのモジュール性が向上し、ユーザは (1) 将来の必要時に異なるデータベース コントロールに切り替えることができ、(2) ラッパー クラス内で再キャストされる任意のデータ型を実行できます。

このチュートリアルでは、再キャストは実際に発生しませんが、再キャストが必要になる状況は簡単に想像できます。たとえば、ページ フローでは Customer[] オブジェクトを期待していたが、データベース コントロールが Customer オブジェクトの ArrayList を返す場合などが考えられます。このような状況でも、中間ラッパー クラスを使うと、データをページ フローに渡す前に ArrayList を Customer[] にロードできます。

  1. [ページ フロー エクスプローラ] タブで [参照先のコントロール] ノードを右クリックして [コントロールの追加] を選択します。

  2. [コントロールの選択] ダイアログで、[既存のプロジェクト コントロール｜CustomerControl - controls] を選択し、[
    OK

    ] をクリックします。

ここでは、次の 4 行のコードをページ フロー コントローラ クラス CustomerManagementController.java に追加しています。

    import org.apache.beehive.controls.api.bean.Control;
    import controls.CustomerControl;
    
	...
    
    @Control
    private CustomerControl customerControl;

これらの行では、ページ フローに対して Customer コントロールを宣言しており、これによって、コントロール メソッドを呼び出すことができます。

ページ フロー クラスに対してコントロールを宣言すると、そのコントロールは利用可能なメソッドのリストと共に [参照先のコントロール] ノード内に表示されます。

データを JSP に転送するアクションを作成するには

この手順では、ページ フロー クラスを編集して、CustomerControl から顧客データを取得するようにします。具体的には、1 つのアクション (すなわち、getCustomers() と呼ばれるアノテーション付きのメソッド) を、ページ フロー クラスに追加します。このクラスが、Customer オブジェクトの配列を返す CustomerControl メソッド getCustomers() を呼び出します。(次の手順では、Customer オブジェクトのこの配列を HTML テーブルとして表示する JSP を作成します)。

  1. [ページ フロー エクスプローラ] タブ上で、参照先のコントロール/customerControl ノードを開き、getCustomers メソッドを検索します。
  2. getCustomers メソッドを、[ページ フロー エディタ] タブの右側に表示されている index.jsp ページ上に直接ドラッグ アンド ドロップします。

    注意 : ページ フロー CustomerManagementController が [ページ フロー エディタ] 内に表示されていることを確認してください。別のページ フローが表示されている場合は、ドロップダウン リストから CustomerManagementController を選択します (ドロップダウン リストを表示するには緑色の三角形マークをクリックします)。

  3. [新しいアクション] ダイアログで、デフォルト設定のまま [終了] をクリックします。



    ダイアログが閉じると、[ページ フロー エディタ] は次のように表示されます。



    この時点で、コントロール メソッド getCustomers() を呼び出す新しいページ フロー アクション getCustomers() が作成されています。このアクションのソース コードは次のようになります。 
        @Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "", actionOutputs = { @Jpf.ActionOutput(name = "getCustomersResult", type = model.Customer[].class) }) })
    public Forward getCustomers() {
        Forward forward = new Forward("success");
        model.Customer[] getCustomersResult = customerControl.getCustomers();
        forward.addActionOutput("getCustomersResult", getCustomersResult);
        return forward;
    }
  4. 〔Ctrl〕+〔Shift〕+〔S〕を押して作業を保存します。

チュートリアルを移動するには、矢印をクリックしてください。

さらにヘルプが必要ですか。質問は Workshop ニュース グループまでお寄せください。