手順 3 : データ グリッドを作成する

この手順では、アプリケーションにデータ グリッドを追加します。データ グリッドは、データを HTML テーブルとして表示するように設計されている一連の JSP タグです。これは、データベース データの表示用に特に有効です。データ グリッドはデータベース フィールドをテーブルのカラムとして表示し、データベース レコードをテーブルの行として表示します。

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

顧客リストを表示する JSP を作成するには

この手順では、新しい JSP を作成し、ページ フローのナビゲーション スキーム内に配置します。この JSP は、getCustomers() アクションが呼び出されると表示されます。

  1. [ページ フロー エディタ] タブで、getCustomers アクション アイコンをクリックしてノードを中央に配置します。
  2. [未指定] ノードを右クリックして [新しい JSP] を選択します。

    [未指定] ノードは、getCustomers アクションが、指定された JSP ページまたは別のアクションに向かわないことを意味します。未指定ノードが含まれる場合でもページ フローはコンパイルされますが、実行時に getCustomers アクションが呼び出されると、例外が送出されます。ソース コードでは、[未指定] ノードは Forward オブジェクトの path 属性における空の文字列を表します (@Jpf.Forward(name = "success", path = "")。
  3. 新しい JSP ファイルに customers.jsp という名前を付けます。(必要に応じて、新しい JSP を右クリックし、[名前の変更] を選択できます)。



注意 : Java メソッドと同様に、ページで受け取りが期待されているデータの名前と型を NetUI declarePageInput タグを使用して宣言できます。

ページ フロー アクションは、アクション出力を介して、期待されるデータをページに渡します。アクション出力は、アクションのメソッド内の Forward オブジェクトに追加されます。対応するアクション出力アノテーションは、渡されるデータの名前と型を、次のコードに示すように宣言します。 

    @Jpf.Action(
                ...
                actionOutputs = { @Jpf.ActionOutput(  name="getCustomersResult", type = model.Customer[].class) }
                ...
                )
    public Forward getCustomers() {

アクションが予想外のデータ型を渡す場合、実行時例外が送出されます。

[ページ フロー エディタ] では、アクション出力は、転送を表す矢印上に小さい四角のアイコンで表されます。 

上記のように転送の送り先が指定されていない場合は、[ページ フロー エクスプローラ] で新しいページを送り先として作成することで、一致したページ入力宣言がページに自動的に追加されます。

    <netui-data:declarePageInput name="getCustomersResult" type="model.Customer[]" required="true" />

アクション出力またはページ入力の宣言を編集する必要がある場合は、アクションと JSP ページとの間にまたがる矢印を右クリックして、[アクション出力を編集] を選択します。表示されるエディタを使用すると、アクション出力アノテーションとページ入力タグの両方を編集できます。それらは必ず一致するようにします。

顧客リストを表示するグリッドを作成するには

このタスクでは、Java オブジェクトを HTML テーブルとして表示するように特別に設計されている一連の JSP タグ (<netui-data:dataGrid>、<netui-data:rows> など) を追加します。

  1. [ページ フロー エディタ] タブで customers.jsp を右クリックし、[開く] を選択してソース コードを開きます。
  2. [デザイン パレット] の [JSP 変数] セクションで、[pageInput] ノードを開き、[getCustomersResult[]] を見つけます。
    この getCustomersResult アイコンを customers.jsp のソース コードまでドラッグし、</netui:body> タグの直前にドロップします。

  3. [ウィザードの選択] ダイアログから [データ グリッド] を選択し、[OK] をクリックします。

  4. [データ グリッド] ダイアログで、[カラム] タブをクリックします。

  5. 以下の順序になるようにカラムを再順番付けします。
       
       [Id]
       [First Name]
       [Last Name]
       [Company Name]
       [City]
       [State]
       [Zip]
       [Phone]
       [Email    ] 

  6. [新規作成] ボタンをクリックし、新しいカラム (デフォルト名は Newcolumn0) をリストの最上位に配置します。




    これらのリンクによって、編集ページに移動し、特定の行のフィールドを更新できます。
  7. 新しいカラムの [ヘッダ テキスト] を Newcolumn0 から Edit に変更します。(編集するセル内をクリックすると、テキストを変更できます)。

  8. [表示方法] カラムを [テキスト アンカー] に設定します。(これによって、テキストがプレーン テキストではなくハイパーリンクとして表示されます)。

  9. [コンテンツ ソース] カラムを [静的] に設定します。

    このドロップダウンを [静的] に設定することによって、各行のカラムに同じコンテンツ (静止画像など) を表示する意図を伝えています。[データ] に設定すると、カラムに動的コンテンツを表示する意図を伝えることになります。通常、行 ID など、その行のデータに基づく表示テキストです。

    ドロップダウンを [データ] に設定すると、ウィザードの下部に動的な表示テキストをフォーマットできるフィールドが表示されます。ドロップダウンを [静的] に設定した場合、これらのフィールドは表示されません。

  10. [表示テキスト] フィールドに Edit と入力します。

  11. [新規] ボタン ([アンカー アクション] フィールドの横) をクリックします。

  12. [新しいアクション] ダイアログの [アクション テンプレート] ドロップダウン リストから [コントロールを使用して編集する項目の取得] を選択します。

    この [新しいアクション] ウィザードでは、一般的なシナリオ用のさまざまなアクションを構築できます。また、新しいアクションを作成するためにさまざまなオプションを利用できます。[単純な宣言アクション] を選択すると、単純なナビゲーション的アクションを設定できます。[コントロール メソッドの呼び出し] を選択すると、コントロール呼び出しアクションを設定できます。

    [コントロール メソッド] ドロップダウン リストで、getCustomerById(Integer) メソッドが選択されていることを確認します。
    [次へ] をクリックします。

  13. [新しいアクション] ダイアログの [入力マッピング] ページで [終了] ボタンをクリックします。



    ページ フロー コントローラ ファイルに getCustomerById という新しいアクションが作成されます。
  14. [データ グリッド] ダイアログで、[パラメータ] タブをクリックします。

  15. [選択] ボタン ([コンテンツ] タブではなく [パラメータ] タブ上) をクリックします。

  16. [id] プロパティを選択し、[OK] をクリックします。

  17. [データ グリッド] ダイアログで [OK] をクリックします。

  18. 〔Ctrl〕+〔Shift〕+〔S〕を押して作業を保存します。

この時点で、以下のデータ グリッドが customers.jsp ページに追加されました。

	<netui-data:dataGrid name="getCustomersResultGrid"
		dataSource="pageInput.getCustomersResult">
		<netui-data:configurePager disableDefaultPager="true" />
		<netui-data:header>
			<netui-data:headerCell headerText="Edit" />
			<netui-data:headerCell headerText="Id" />
			<netui-data:headerCell headerText="First Name" />
			<netui-data:headerCell headerText="Last Name" />
			<netui-data:headerCell headerText="Company Name" />
			<netui-data:headerCell headerText="City" />
			<netui-data:headerCell headerText="State" />
			<netui-data:headerCell headerText="Zip" />
			<netui-data:headerCell headerText="Phone" />
			<netui-data:headerCell headerText="Email" />
		</netui-data:header>
		<netui-data:rows>
			<netui-data:anchorCell value="Edit" action="getCustomerById">
				<netui:parameter name="id" value="${container.item.id}" />
			</netui-data:anchorCell>
			<netui-data:spanCell value="${container.item.id}">
			</netui-data:spanCell>
			<netui-data:spanCell value="${container.item.firstName}">
			</netui-data:spanCell>
			<netui-data:spanCell value="${container.item.lastName}">
			</netui-data:spanCell>
			<netui-data:spanCell value="${container.item.companyName}">
			</netui-data:spanCell>
			<netui-data:spanCell value="${container.item.city}">
			</netui-data:spanCell>
			<netui-data:spanCell value="${container.item.state}">
			</netui-data:spanCell>
			<netui-data:spanCell value="${container.item.zip}">
			</netui-data:spanCell>
			<netui-data:spanCell value="${container.item.phone}">
			</netui-data:spanCell>
			<netui-data:spanCell value="${container.item.email}">
			</netui-data:spanCell>
		</netui-data:rows>
	</netui-data:dataGrid>

ページ フローを実行するには

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

  2. ブラウザ タブが表示され、顧客データのグリッドが表示されます。
  3. http://localhost:7001/customerCare/customerManagement/CustomerManagementController.jpf のブラウザ タブを閉じます。

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

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