5. Editing Web Pages

In this section, you will learn how Workshop allows you to easily make changes to your web pages using the JSP editor, the Workshop Palette, the Smart Editors and the Property Sheet. You will also learn how to use code completion to save time as you work.

Using the smart editors

1. Double-click home.jsp in the Project Explorer to open this page.
2. In the Design view, click on the searchType form field.

The Properties view shows the Smart Editor for the Struts html:select tag.

3. Click on some of the other tags in this page, and notice the different tag editors.

Using the property sheet

1. Double-click shoppingcart.jsp in the Project Explorer to open this page.
2. Click on the html:form (/shoppingcart) box in the Design editor pane.
3. Click on the Property Sheet tab in the Properties view.

The Property Sheet for the Struts html:form tag is activated.

4. Click in the action attribute’s value edit field

Notice the lightbulb button that displays. You can click this button to select a Struts action for this form.

Using code completion

1. Double-click login.jsp in the Project Explorer to open this page.
2. In the login.jsp page, locate the line in the Source pane that contains this html:text tag:

<html:text property="username"/>

3. Delete the characters username from this code line.
4. Press Ctrl-Space.

This displays a list of all the property names of the form bean associated with the form containing the edit field. In this case, two entries are displayed: password and username.

5. Double-click the username entry.

Workshop inserts the username property.

Inserting a variable

1. Double-click checkoutPayment.jsp in the Project Explorer to open this page.
2. In the Design pane, insert the cursor to the right of the Checkout image, press Return, and enter:

Checkout for:

3. Select the text, and choose HTML Style > Bold to apply the bold style.

The following code is generated in the Source pane:

<b>Checkout for: </b>

4. In the JSP Variables section of the Workshop Palette view, expand the profile variable, and drag and drop its firstName property to the right of the text you entered and styled.

A graphical representation of the bean:write tag displays in the Design editor. In the Source editor, this code for the bean:write tag is generated:

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

Inserting a Struts form

1. Double-click login.jsp in the Project Explorer to open this page.
2. Click on the html:form (/logon) box in the Design pane.

This selects the Struts form tag and its content.

3. Press Delete to remove the form from the page. (You will re-insert it in the next step).
4. In the Workshop Palette view, expand the Struts HTML tag library by clicking on the plus (+) sign next to the Struts HTML node.
5. Double-click on the Form entry from the expanded library. Alternatively, you can drag and drop the Form entry to the position in the Design editor where you want the entry inserted.

The Form Tag wizard displays.

6. In the first page of the wizard, select the /logon action.
7. In the following wizard pages, you can select the form bean properties you want to insert along with their form field types.
8. Press Finish.

The wizard generates the source code for the entire Struts form.

Click one of the following arrows to navigate through the tutorial: