5. Web ページを編集する

ここでは、[JSP エディタ]、[デザイン パレット]、[スマート エディタ]、および [プロパティ シート] を使用して、Web ページを簡単に変更する方法について説明します。また、コード補完機能を使用して作業時間を短縮する方法についても説明します。

[スマート エディタ] の使用

  1. このページを開くには、[プロジェクト・エクスプローラ] で home.jsp をダブルクリックします。
  2. [デザイン] ビューで、searchType フォーム フィールドをクリックします。

    3. [プロパティ] ビューに、Struts html:select タグの [スマート エディタ] が表示されます

  3. このページの他のタグをクリックすると、別のタグ エディタが表示されます。

[プロパティ シート] の使用

  1. このページを開くには、[プロジェクト・エクスプローラ] で shoppingcart.jsp をダブルクリックします。
  2. デザイン エディタ ペインで、html:form (/shoppingcart) ボックスをクリックします。
  3. [プロパティ] ビューの [プロパティ シート] タブをクリックします。

    4. Struts html:form タグの [プロパティ シート] がアクティブになります。

  4. action 属性の [値] 編集フィールドをクリックします。

    5. [(...)] ボタンが表示されます。このボタンをクリックすると、このフォームの Struts アクションを選択できます。

コード補完の使用

  1. このページを開くには、[プロジェクト・エクスプローラ] で login.jsp をダブルクリックします。
  2. login.jsp ページのソース ペインで、次の html:text タグを含む行を探します。

    3. <html:text property="username"/>

  3. このコード行から文字列 username を削除します。
  4. 〔Ctrl〕+ スペース キーを押します。

    5. その編集フィールドを含むフォームに関連付けられたフォーム bean のすべてのプロパティ名の一覧が表示されます。この場合は、2 つのエントリ (password および username) が表示されます。

  5. username エントリをダブルクリックします。

    6. username プロパティが挿入されます。

変数の挿入

  1. このページを開くには、[プロジェクト・エクスプローラ] で checkoutPayment.jsp をダブルクリックします。
  2. デザイン ペインで、Checkout 画像の右にカーソルを挿入し、〔Enter〕を押してから次のように入力します。

    3. Checkout for:

  3. テキストを選択し、選択されたテキストを右クリックして [HTML スタイル｜太字] を選択して太字を適用します。

    4. ソース ペインには次のコードが生成されます。

    <b>Checkout for: </b>

  4. [デザイン パレット] ビューの [JSP 変数] セクションで profile 変数を展開し、その firstName プロパティをドラッグして、先ほど入力して太字にしたテキストの右にドロップします。

    5. デザイン エディタに、bean:write タグを視覚的に表わすボックスが表示されます。ソース エディタには、bean:write タグの次のコードが生成されます。

    <bean:write name="profile" property="firstName"/>

Struts フォームの挿入

  1. このページを開くには、[プロジェクト・エクスプローラ] で login.jsp をダブルクリックします。
  2. デザイン ペインで、html:form (/logon) ボックスをクリックします。

    3. これにより、Struts フォーム タグとそのコンテンツが選択されます。

  3. 〔Delete〕を押して、ページからフォームを削除します (このフォームは、以降の手順で再度挿入します)。
  4. [デザイン パレット] ビューで、[Struts HTML] ノードの横にあるプラス記号 (+) をクリックして Struts HTML タグ ライブラリを展開します。
  5. 展開されたライブラリの中から Form エントリをダブルクリックします。デザイン エディタ内のエントリ挿入位置に、Form エントリをドラッグ アンド ドロップしても構いません。

    6. [フォーム タグ] ウィザードが表示されます。

  6. ウィザードの最初のページで /logon アクションを選択します。
  7. 後続のウィザード ページでは、挿入するフォーム Bean プロパティと、そのフォーム フィールドの型を選択できます。
  8. [終了] をクリックします。
  9. ファイルを保存します。

    10. Struts フォーム全体のソース コードが生成されます。

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

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