Web ページの編集

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

スマート エディタの使用

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

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

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

プロパティ シートの使用

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

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

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

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

コード補完の使用

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

<html:text property="username"/>

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

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

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

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

変数の挿入

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

Checkout for:

3. このテキストを選択し、[テキスト｜スタイル｜太字] を選択して太字にします。

[Source] ペインには次のコードが生成されます。

<b>Checkout for: </b>

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

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

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

Struts フォームの挿入

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

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

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

Form Tag ウィザードが表示されます。

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

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

編集の同期
データ バインディング

Web ページの操作

JSP エディタ
フォームの挿入

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