前 次 前/次ボタンと目次ボタンとの区切り線

手順 2 : JSF Web アプリケーションを作成する

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

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

この手順では、Web アプリケーションにコントロールを追加します。コントロールは、Customer オブジェクトの ArrayList の形式で顧客データを返すように設計されています。実際のシナリオでは、このコントロールがデータベースまたは Web サービスを呼び出して顧客データを取得する場合があります。ただし、このシナリオのコントロールは、JSF コンポーネントをテストする目的のため、単に Customer オブジェクトの固定された ArrayList を返すものとします。

  1. [ウインドウ|パースペクティブを開く|ページ フロー] を選択します。ページ フロー パースペクティブの説明については、「ページ フロー パースペクティブ」を参照してください。
    1. [ページ フロー エクスプローラ] タブで [参照先のコントロール] ノードを右クリックして [コントロールの追加] を選択します。
  2. [コントロールの選択] ダイアログで、[既存のプロジェクト コントロールCustomerControl - controls] を選択し、[OK] をクリックします。
  3. 〔Ctrl〕+〔S〕を押して作業を保存します。

この時点で、次の 4 行のコードがページ フロー コントローラ クラスに追加されました。

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

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

検索クエリを送信するための JSF フォームおよび NetUI アクションを追加する

この手順では、顧客データに対して検索クエリを送信するための JSF フォーム (<h:form>) を追加します。

また、コントローラ クラスに新しい NetUI アクション (getCustomers) を追加します。JSF フォームは、フォームの属性 action を介してこのアクションを呼び出します。このアクションは Customer 型のフォーム Bean パラメータを持ちます。フォーム Bean は、HTML フォーム データの Java 表現です。

ユーザがフォームを介してデータを送信すると、次のイベントが発生します。

  1. [ページ フロー エクスプローラ] タブで、ノード [ページ|index.jsp] をダブルクリックし、JSP のソース コードを開きます。
  2. [JSP デザイン パレット] から [フォームの作成] を index.jsp のソース コードまでドラッグします。</f:view> タグの直前にドロップします。

    注意 : getCustomers メソッド ([ページ フロー エクスプローラ] ビュー上) をドラッグして、index.jsp ページ ([ページ フロー エディタ] 内) の上に直接ドロップしても同じこと (新しいフォームの作成) を実現できます。
  3. [フォームの作成] ウィザードで、新しいアクションを作成するには [新規] をクリックします。
  4. [新しいアクション] ウィザードの [アクション テンプレート] ドロップダウン フィールドで、[コントロールを使用した項目の更新] を選択します。
    [フォーム Bean] フィールドの横にある [追加] をクリックします。

  5. [FormBean の選択] ダイアログで、Customer と入力します。
    [一致する型] で、[Customer - businessObjects] を選択します。
    [OK] をクリックします。

  6. [新しいアクション] ダイアログで [次へ] をクリックし、[終了] をクリックします。
  7. [フォームの作成] ダイアログで [次へ] をクリックします。
  8. すべてのフィールドがチェックされていることを確認します。
    [次へ] をクリックします。

  9. [フォームの作成] ダイアログで、以下の順序になるようにフィールドを順序付けます。

    [id]
    [first]
    [last]
    [address]
       [city]
       [state]
       [zip]


    [終了] をクリックします。
  10. 〔Ctrl〕+〔Shift〕+〔S〕を押して作業を保存します。

この時点で、以下に示すフォームが index.jsp ページに追加されました。

フォームは、ユーザが入力した検索データから Customer オブジェクトを構築することによって機能します。Customer オブジェクトは、入力データをバッキング Bean のフォーム Bean にロードすることによって構築されます (<h:inputText value="#{backing.formBean1.last}" id="field2" />)。backing.formBean1 は、バッキング Bean の Customer オブジェクト フィールドを参照する点に注意します。

次に、Customer オブジェクトが属性として付加されたフォームが NetUI アクション getCustomers に送信されます。

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

    <h:form>
        ....
        <h:outputLabel value="Last:" for="field2" />
        <h:inputText value="#{backing.formBean1.last}" id="field2" />
        ...
        <h:commandButton action="getCustomers" value="getCustomers">
			<f:attribute name="submitFormBean" value="backing.formBean1" />
		</h:commandButton>
	</h:form>

付加されたフォーム Bean は、アクションのメソッド パラメータとして送信されます。

    getCustomers(businessObjects.Customer form)

また、Controller.java コントローラ ファイルに、以下に示すアクションが追加されています。

このアクションは Customer オブジェクト パラメータをとる点に注目します。これが、フォームとともに送信されるフォーム Bean です。

	@Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "", actionOutputs = { @Jpf.ActionOutput(name = "getCustomersResult", type = java.util.ArrayList.class, typeHint = "java.util.ArrayList<businessObjects.Customer>") }) })
	public Forward getCustomers(businessObjects.Customer form) {
		Forward forward = new Forward("success");
		businessObjects.Customer criteria = form;
		java.util.ArrayList<businessObjects.Customer> getCustomersResult = customerControl
				.getCustomers(criteria);
		forward.addActionOutput("getCustomersResult", getCustomersResult);
		return forward;
	}

クエリ結果を表示する JSF ページを追加する

この手順では、新しい JSF ページを作成し、クエリ結果を表示するための JSF タグを追加します。

適切なデータが渡されたときに HTML テーブルとして表示する <h:dataTable> タグを追加します。この場合、Customer オブジェクトの java.util.ArrayList が <h:dataTable> タグに渡されます。このタグは、Customer オブジェクトを反復処理し、各オブジェクトを標準の HTML テーブルの行として表示します。

新しい JSF ページを作成すると、Workshop for WebLogic によってページのバッキング Java Bean が自動的に作成されます。

  1. [ページ フロー エディタ] ビュー上で、[クイック ジャンプ] というラベルのフィールドにカーソルを合わせます。

    〔Ctrl〕+〔Space〕 を押して、コンテンツ アシスタント ドロップダウンを表示します。

    getCustomers をダブルクリックします。

    getCustomers アクションが、[ページ フロー エディタ] 内でハイライトされます。

  2. [ページ フロー エクスプローラ] タブで [ページ] ノードを右クリックして [新しい JSF ページ] を選択します。
  3. ページの名前を customers.jsp とし、〔Enter〕を押します。
  4. [名前を 'newPage1.java から 'customers' に変更します] ダイアログで [継続] をクリックします。

    この時点で Workshop for WebLogic によって、(1) customers.jsp ページと (2) バッキング Java クラス customers.java の両方が作成されます (バッキング クラスを確認するには、ページを右クリックして、[バッキング ファイルを開く] を選択します)。
  5. [ページ フロー エクスプローラ] ビューの customers.jsp を [ページ フロー エディタ] タブまでドラッグします。[未指定] ノード上でドロップします。
  6. [ページ入力の追加] ダイアログで [OK] をクリックします (ページ入力の詳細については、「チュートリアル : Web アプリケーションからコントロールへのアクセス : 手順 3 : データ グリッドを作成する」を参照してください)。
  7. [ページ フロー エクスプローラ] ビュー ([ページ フロー エディタ] ではない) 上で、customers.jsp をダブルクリックしてそのソース コードを開きます。
  8. [JSP データ パレット] から getCustomersReportcustomer.jsp のソース ビューまでドラッグします。</f:view> タグの直前にドロップします。
  9. [データ表示] ウィザードで、すべてのフィールドがチェックされていることを確認し、[終了] をクリックします。
  10. 〔Ctrl〕+〔Shift〕+〔S〕を押して作業を保存します。

この時点で、以下に示すコードが customers.jsp ファイルに追加されました。

データ テーブルが入力データを NetUI の暗黙的オブジェクト pageInput を介して取得している点に注目します。これは、Beehive NetUI と JSF の技術を統合する最も一般的な方法の 1 つです。これらの技術の統合に関する詳細については、「Web アプリケーションへの Java Server Faces の統合」を参照してください。

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib uri="http://beehive.apache.org/netui/tags-databinding-1.0"
	prefix="netui-data"%>
<netui-data:declarePageInput required="true"
	type="java.util.ArrayList<businessObjects.Customer>"
	name="getCustomersResult" />


<html>
<head>
</head>
<body>
<f:view>
	<f:verbatim>
		<p>Beehive NetUI-JavaServer Faces Page -
		${pageContext.request.requestURI}</p>
	</f:verbatim>

	<h:dataTable value="#{pageInput.getCustomersResult}" var="item0"
		border="1">
		<h:column>
			<f:facet name="header">
				<h:outputLabel value="Last" />
			</f:facet>
			<h:outputText value="#{item0.last}" />
		</h:column>
		<h:column>
			<f:facet name="header">
				<h:outputLabel value="Address" />
			</f:facet>
			<h:panelGrid columns="2">
				<h:outputLabel value="State: " />
				<h:outputText value="#{item0.address.state}" />
				<h:outputLabel value="Zip: " />
				<h:outputText value="#{item0.address.zip}" />
				<h:outputLabel value="City: " />
				<h:outputText value="#{item0.address.city}" />
			</h:panelGrid>
		</h:column>
		<h:column>
			<f:facet name="header">
				<h:outputLabel value="First" />
			</f:facet>
			<h:outputText value="#{item0.first}" />
		</h:column>
		<h:column>
			<f:facet name="header">
				<h:outputLabel value="Id" />
			</f:facet>
			<h:outputText value="#{item0.id}" />
		</h:column>
	</h:dataTable>
</f:view>
</body>
</html>

また、getCustomers アクションのナビゲーション ターゲットも指定されています。

	@Jpf.Action(forwards = { @Jpf.Forward(name = "success", path = "customers.faces", actionOutputs = { @Jpf.ActionOutput(name = "getCustomersResult", type = java.util.ArrayList.class, typeHint = "java.util.ArrayList") }) })
	public Forward getCustomers(businessObjects.Customer form) {
		Forward forward = new Forward("success");
		businessObjects.Customer criteria = form;
		java.util.ArrayList<businessObjects.Customer> getCustomersResult = customerControl
				.getCustomers(criteria);
		forward.addActionOutput("getCustomersResult", getCustomersResult);
		return forward;
	}

アクションが .faces ファイル拡張子 (path = "customers.faces") を使って、customers.jsp ページに転送している点に注目します。

検索フォーム ページに戻るリンクを追加する

この手順では、ユーザを検索フォーム ページに戻すリンクを結果のページに追加します。追加するリンクは、NetUI アクションを直接実行する JSF リンクになります。

  1. [ページ フロー エディタ] ビュー上で customer.jsp ノードをクリックし、customer.jsp がビューの中央ペインに表示されるようにします。
  2. [ページ フロー エディタ] ビュー上でビューの右側 (「下流ペイン」とも呼ばれる) を右クリックし、[新しいアクション] を選択します。

  3. [新しいアクション] ダイアログの [アクション名] フィールドに、showIndex と入力します。
    [フォーム Bean] フィールドで、<なし> が選択されていることを確認します。
    [転送先] フィールドで、index.jsp を選択します。
    [完了] をクリックします。 

  4. [ページ フロー エクスプローラ] ビューで、customers.jsp ノードをダブルクリックして、そのソース コードを開きます。
  5. customer.jsp の </h:dataTable> タグの直後に以下のコードを追加します。

        <h:form>
            <h:commandButton action="showIndex" value="Back to Search Page"/>
        </h:form>
  6. 〔Ctrl〕+〔Shift〕+〔S〕を押して作業を保存します。

Web アプリケーションを実行する

  1. [ページ フロー エクスプローラ] ビューで、サーバ アイコンをクリックし、ページ フローをデプロイおよび実行します。

  2. [サーバで実行] ビューで [終了] をクリックします。

    アプリケーションのコンパイル、サーバの起動、およびアプリケーションのデプロイを待機します。
  3. 提供されたフィールドに検索条件を入力し、[getCustomers] ボタンをクリックします。

    注意 :
    入力フォームの検索条件としてのみ、部分的な姓名を使用できます。何も入力しないで送信すると、すべての顧客を取得できます。

関連トピック

Web アプリケーションへの Java Server Faces の統合

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

 

ナビゲーション バーのスキップ   ページの先頭