手順 4 : 顧客データを編集するためのページを作成する

この手順では、個々の顧客レコードを編集するための JSP を追加します。

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

• レコード編集ページを作成する
• 顧客データを更新するためのフォームを作成する
• 顧客リストに戻るナビゲーションを設定する
• ページ フローを実行する

レコード編集ページを作成するには

1. [ページ フロー エクスプローラ] タブで [ページ] ノードを右クリックして [新しい JSP ページ] を選択します。
2. ページの名前を editCustomer.jsp に変更します。〔Enter〕を押します。
3. [ページ フロー エディタ] タブの [クイック ジャンプ] フィールド内にカーソルを置き、get と入力して〔Ctrl〕+〔Space〕を押します。リストから getCustomerById を選択します。これによって、中央ペインに getCustomerById ノードが表示されます。(別の手段としては、[ページ フロー概要] タブ上で getCustomerById ノードをクリックします)。
4. editCustomer.jsp アイコン ([ページ フロー エクスプローラ] タブ上) を [未指定] ノード ([ページ フロー エディタ] タブ上) にドラッグ アンド ドロップします。
   
   注意 : 以下に示すように、[未指定] ノード上に直接ドロップしてください。
   
   

顧客データを更新するためのフォームを作成するには

1. [ページ フロー エクスプローラ] タブで、editCustomer.jsp をダブルクリックして、そのソース コードを開きます。
2. [デザイン パレット] の [NetUI] タグ ライブラリ セクションで、[フォームの更新] パターンを JSP ソース エディタまでドラッグし、</netui:body> タグの直前にドロップします。
   
   
3. [フォームの更新] ダイアログの [アクション] フィールドの横にある [新規] ボタンをクリックします。
   
   
4. [新しいアクション] ダイアログの [
   コントロール メソッド] ドロップダウン リストから updateCustomer(Customer) メソッドを、[
   フォーム Bean] ドロップダウン リストから customerManagement.CustomerManagementController.GetCustomerByIdFormBean を選択します。[
   次へ] ボタンをクリックします。
   
   
5. [新しいアクション] ダイアログの [入力マッピング] ページで [終了] ボタンをクリックします。
   
   
6. [項目 ID] フィールドの横にある [選択] ボタンをクリックします。
   
   
7. [id] プロパティを選択し、[OK] をクリックします。
   
   
8. [フォームの更新] ダイアログの [アクションを選択] ページで、[次へ] ボタンをクリックします。

   

9. [フォームの更新] ダイアログの [プロパティの選択] ページで、[次へ] ボタンをクリックします。

   

10. 以下の順序になるようにフィールドを順番付けます。
    
       [Id]
       [First Name]
       [Last Name]
       [Company Name]
       [City]
       [State]
       [Zip]
       [Phone]
       [Email] 
    
    [終了] ボタンをクリックします。
    
    
    
    

顧客リストに戻るナビゲーションを設定するには

1. [ページ フロー エディタ] タブの [クイック ジャンプ] フィールド内にカーソルを置き、updateCustomer と入力して〔Enter〕を押します。これによって、中央ペインに updateCustomer ノードが表示されます。(別の手段としては、[ページ フロー概要] タブ上で updateCustomer ノードをクリックします)。
2. getCustomers アクション ([ページ フロー エクスプローラ] タブ上) を、[ページ フロー エディタ] タブの右側にドラッグ アンド ドロップします。
   
   
3. 〔Ctrl〕+〔Shift〕+〔S〕を押して作業を保存します。
4. editCustomer.jsp のソース ファイルを閉じます。

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

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

   

2. [サーバで実行] ダイアログで、[BEA WebLogic v10.0 Server] が選択されていることを確認し、[終了] をクリックします。
   
   EAR および Web アプリケーション プロジェクトのデプロイを待機します。
   ブラウザ タブが表示され、顧客データのグリッドが表示されます。
3. 「David Owen」の [編集] リンクをクリックします。
4. David Owen の情報を更新し、updateCustomer をクリックします。
5. グリッド ページで情報が更新されていることが分かります。

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