< 前へ | 次へ >

演習 7: JavaServer Pages (JSP) ページへの要素の追加

入力フィールド、プッシュ・ボタン、および出力フィールドを JSP ページに 追加して、入出力の動的なユーザー・インターフェースを作成します。

入力フィールドで、結果として作成されたアプリケーションのユーザーが 興味のある日、月、および年を入力します。入力ページには、「実行」ボタンと 「更新」ボタンがあります。出力フィールドには、対応する曜日が表示されます。 これらのページを作成する手順は、次のとおりです。
  1. 入力 JSP ページに 要素を追加します。
  2. 出力 JSP ページに 要素を追加します。

入力ページ

フィールドとプッシュ・ボタンを入力 JSP ページに追加する手順は、次のとおりです。

  1. Web ダイアグラムで、input.jsp ページをダブルクリックして、Page Designer で ページを開きます。
  2. Page Designer で、「デザイン」タブをクリックします。
  3. メインメニュー・バーで「ウィンドウ」 > 「ビューの表示」 > 「その他」を選択します。
  4. ウィンドウで「Web」 > 「ページ・データ」を 選択して、「OK」をクリックしてページ・データ・ビューを 開きます。
  5. ページ・データ・ビューで、Struts フォーム Bean フォルダーを展開します。 dateData フォーム Bean および定義したフィールドを見つけます。
    ページ・データ・ビューには、その「day」、「 dayOfWeek 」、「month」、
および「year」フィールドを持つ dataData フォーム Bean が表示されます。
  6. Page Designer でページ・データ・ビューから入力 JSP ページに「day」、「month」、および「year」フィールドをドラッグします。 「データ・オブジェクトの挿入」ウィンドウが 開きます。
    「データ・オブジェクトの挿入」ウィンドウには、/computeDay アクションと、
「day」、「month」、および「year」フィールドが表示されます。
  7. 上部にある「既存レコードの更新」を選択します。
  8. 「オプション」をクリックして、「実行ボタン」「「削除」ボタン」チェック・ボックスが 選択されていることを確認します。次に、「OK」をクリックします。
  9. 「終了」をクリックして、フォームにフィールドと ボタンを作成します。
    Page Designer の「デザイン」ページには、3 つのフィールドと 2 つの
ボタンを持つ入力 JSP ページが表示されます。
  10. 入力 JSP ファイルを保管して閉じます。

出力ページ

出力 JSP ページにフィールドを追加する手順は、次のとおりです。

  1. Web ダイアグラムで、output.jsp ページをダブルクリックして 、Page Designer でページを開きます。
  2. Page Designer で、「デザイン」タブをクリックします。
  3. ページ・データ・ビューで、Struts フォーム Bean フォルダーを展開します。 dateData フォーム Bean および定義したフィールドを見つけます。
  4. Page Designer でページ・データ・ビューから出力 JSP ページに「dayOfWeek」フィールドをドラッグします。 「データ・オブジェクトの挿入」ウィンドウが 表示されます。
  5. 上部にある「既存レコードの表示」を 選択して、「終了」をクリックしてページにフィールドを 作成します。
  6. 出力 JSP ファイルを保管して閉じます。

演習のチェックポイント

この演習では、入力フィールドとプッシュ・ボタンを入力 JSP ページに 追加しました。また、出力 JSP ページに出力フィールドを追加しました。

以下のタスクの実行方法を学習しました。
  • JSP ページを開いて変更する方法。
  • 入力フィールド、出力フィールド、およびボタンを JSP ページに追加する方法。
< 前へ | 次へ >