4 Lesson One: Designing the Home Page

4.1 Introduction

The home page represents our store front. It is the first thing the user sees when entering our Toy Store site. The home page must both attract potential customers and serve returning customers. To accomplish these aims, the web store home page typically:

• Allows the customer to browse products within specific categories (ours are Accessories, Games, Party Supplies, and so on)

• Allows the customer to quickly locate specific products by typing keywords in a search field

• Allows the customer to view and edit the contents of their shopping cart

• And, of course, allows customers to register/sign in and edit their personal account information

4.2 Planning the Design of the Home Page

Our web store home page is a good place to begin planning our application. In JDeveloper, it is tempting to open the HTML/JSP Visual Editor and begin laying out the pages. But initially we need to address some basic questions about the underlying technology:

• What model layer objects will the home page require?

• Do some of the model layer objects represent common operations that we can access across the application's pages?

• Do we anticipate localizing the application?

In the initial planning phase, it makes sense to focus on the home page. While the home page of our web store application does not represent 100 percent of the required application business objects, we can identify important objects, including the ProductList, Accounts, and ShoppingCart objects. Although the finished application will utilize additional business objects, creating the model layer can be iterative, meaning that we can expose those business objects as we require them.

Next, the home page forces us to think about the controller layer, because we can begin to see how the page flow is organized. With Struts as our controller layer, we'll identify "action forwards" like showcategory.do and search.do to specify targets for the home page links and operations.

To invite users to browse the store, we want our application to have a well-considered site navigation. For example, we don't want users to have to return to the home page just to log in, view their cart, and search products. Instead, these operations should appear across the application. Our first page design decision springs from the need to reuse these home page operations: we will create a header.jsp banner with the common operations displayed and utilize the JSP include directive to insert the banner into the desired pages. This best practice allows us to reduce the number of pages and simplify site navigation.

Finally, since we are committed to hosting our site internationally, we will utilize the Struts Bean tags to retreive translated strings from locale-specific message resource files that we will create. In the hands-on for this lesson, we'll see exactly how easy it is to utilize this capablity of Struts in JDeveloper.

4.3 Getting Started with the Struts Page Flow Diagram

The Struts page flow diagram in JDeveloper is your workbench for creating pages, accessing the page action's implementing action class (or Oracle ADF data action classes, in some cases), visualizing the action forwards and page links of the page flow, running the application by initiating a Struts action .do request (we never run JSP pages directly in a Struts-based web application), and even creating and opening HTML or JSP pages for editing in the visual editor. That's a lot of activities to be aware of, but through the course of this project, we'll utilize them all.

Each lesson focuses on a small portion of the complete page flow diagram. In Lesson 1, we limit the discussion to the component labeled /home. Figure 4-1, "The Home Data Page Icon Represents the Postback Pattern", illustrates this component's position in the overall page flow.

Figure 4-1 The Home Data Page Icon Represents the Postback Pattern

Absent from the page flow diagram are any JSP pages. This is because our JSP pages are databound and therefore represent a combination of components. The icon shown for the home page is typical of the majority of the Struts page flow components: it is the symbol for a data page and is available from the Struts Page Flow Component Palette.

Each data page in the page flow represents Oracle ADF's integration with Struts action classes. For developing page flows with databound JSP pages, the data page is very convenient because it combines a Struts action class (DataForwardAction or subclass), a Struts action forward, and a target web page in a single icon. Alternatively, the page flow could display several icons to represent the postback. Figure 4-2, "The Postback Pattern Implemented Without a Data Page", depicts the same postback as it would appear in the page flow diagram using the Oracle ADF data action (labeled /Home), a success forward, and, finally, the target index.jsp page.

Figure 4-2 The Postback Pattern Implemented Without a Data Page

The single data page icon effectively represents the typical use case where a web page posts back to the action that initially set up the page's data. The postback pattern allows the action to handle page events before initiating the page flow action forward. The underlying Oracle ADF element, data action, is also available on the Component Palette and may be used in a page flow when finer granularity is required or when the postback pattern is not required.

As we'll see in the next lesson, the page flow developer implements a data action (corresponding to the data page visualized in the page flow) to perform specific work on the model and to customize the Oracle ADF request-handling lifecycle. Because the Oracle ADF lifecycle prepares the Oracle ADF binding context for databound web pages, it is specifically this integration between Struts and Oracle ADF that provides the glue between the presentation layer and the model layer where the data lies.

4.4 Laying Out the Home Page

With a minimum of information, including a useful page name, a starting page flow, and a nice way to include common operations into our page, we are ready to begin.

In the Struts page flow diagram, double-click /home to open the index.jsp page in the visual editor design view. Overall the page design is very clean with a minimum of tags. The include directive appears at the top of the page to include our reusable page. Below that appears the body of our home page: a two-column table element, with another table embedded in the first column to provide the product category links. We also see the message tag displayed with the key to reference in the application resource .properties file. The message tag, available from the Component Palette Struts Bean list, serves our internationalization requirement.

Notice that there are no text links displayed in the page. This is because the home pages utilizes images as links. It is worth noting that we utilize the URL rewriting capability of the JSTL <c:url> tag to construct the URLs for each link in the home page. The <c:url> tag builds the URL by adding a session ID (for cases where browser cookies are disabled) to maintain session information as the user navigates the site. In this example, the fully encoded URL is then used as the href attribute value in the HTML link element:

<a id="accessories" href="<c:url value='showcategory.do&id=A'/>">
    <img src="<bean:message key='images.sidebar.A'/>" border="0"/>
</a>

We will make use of the above constuction throughout the application pages. The <c:url> tag's value attribute specifies the Struts action to invoke and passes the id argument to the associated action handler class. We will examine the action handler in the next lesson.

Complete the following hands-on task before proceeding to the next lesson if you would like to explore concepts described in this lesson.

4.5 Hands-On for Lesson 1

The following hands-on shows how to quickly create and use a new translatable message resource within any JSP page.

1. In the Application Navigator, expand toystore.view in ToyStoreViewController and double-click ToyStoreResources.properties.

2. In the open file, locate the index.P resource string and insert the text:

   index.Z=The high-tech variety

3. Close the file and save the new resource with it.

4. Open the index.jsp home page in the design view of the visual editor.

5. Right-click inside the last table row of the single-column table (displays message index M) and choose Table-Insert Rows or Columns.

6. In the dialog, make the necessary selections to insert a single new row below the current row.

7. Click in the newly inserted row and display Struts Bean tags in the Component Palette.

8. Click the message tag from the Component Palette to insert the tag into the empty table cell.

9. To display the tag editor, double-click the inserted tag icon in the open page. Scroll the editor to locate the key attribute, click the dropdown icon, and choose index.Z from the list. The icon will be updated with the key name.

10. From the Struts page flow diagram, right-click the home.do action and choose Run to launch the application. Your new page will display the newly created message resource.

You may want to return to JDeveloper to copy the full link text from one of the table cells and paste it in the same table cell as the newly created message resource. Because the link is constructed with embedded JSTL tags within the HTML link tag, it is not possible to work exclusively with the Component Palette to build the link. In this case, we recommend using the source editor to modify the source directly.

The next lesson describes how to expand the Struts page flow with additional databound JSP pages.