A Detailed Page Flow Example

In WebLogic Workshop it is very easy to build the basic framework of a web application's navigational control and to create JSPs that provides access to form bean properties through a form. This allows you to quickly implement the basic design of a (component of a) web application, and test the business and navigational logic of a site before enhancing JSPs and implementing minor navigational flows. This topic gives a number of pointers on how to quickly set up the basic framework of your web application. If you want to build your own page flow right now, go to Tutorial: Page Flow.

This topic uses, and partially reproduces, a sample web application that implements an online reservation system for theaters. A detail of the Flow View of the web application is shown here:

After selecting a venue on the page venues.jsp, you are guided to the reservations.jsp page showing the available shows. A detail of this page, which is still under construction, is shown here:

The form displays the theater that was selected and allows the user to make various reservation selections. After clicking Submit, the action method checkAvailability is invoked, which checks whether seats are available. If so, the various options are shown in showSelection.jsp. If no available seats could be found that match the user's request, the user is notified on showApologies.jsp.

Building a New Page Flow

There are various ways to go about designing a page flow from scratch. One approach is to use a top-down or forward design in which you follow the flow of events as if you were an actual user, and build new action methods and JSPs as you encounter them in the flow. Another approach, the one that is used here, is to use a data-centric approach to designing a page flow. In the data-centric approach the designer focuses on the data-to-be-exposed and the data handling logic first, and uses that to determine the JSP's user interface.

To start building the basic framework, you must have started a new page flow. If you are not sure how to do this, see How Do I: Create a Page Flow? When a page flow is open, WebLogic Workshop displays its Flow View window and a Palette window. You can choose an icon in the Palette and drag the icon onto the Flow View canvas.

Creating an Action Method that Uses a Form Bean

In a data-centric approach, we first concentrate on the data and data handling. For example, in our sample application we might decide to first create the action method checkAvailability, which uses a form bean:

In only a few steps we have created an action method and a form bean.

Creating an Input Page

To create a JSP that binds to the data in the form bean and calls the action method that we have just created, do this:

This creates a JSP with a form that calls the action method, and form fields for the various form bean properties. In our example, the form fields generated for checkAvailability's form bean properties are not the ones we want to use eventually, but we will worry about this later. However, we will rename the JSP to reservations.jsp.

Creating a Calling Action Method

It is similarly easy to create an action method that calls a JSP:

In our example we generate two calling action methods for reservations.jsp and we name these showReservations and backToReservations. We now have the following page flow:

Implementing Data Handling

So far we have created a form bean, a JSP to enter values in the form, and various action methods. Now we need to determine how to process the data the user enters. In the example, we go to the checkAvailability action method in Source View and implement the handling code:

/**
 * @jpf:action
 * @jpf:forward name="noAvailability" path="showApologies.jsp"
 * @jpf:forward name="showOption" path="showSelection.jsp"
*/
protected Forward checkAvailability(SelectItemForm form)
{
    SelectReservationForm availableSeatsForm = new SelectReservationForm();
    if(findAvailableReservations(form, availableSeatsForm))
        return new Forward("showOptions", availableSeatsForm);

    else
        return new Forward("noAvailability");
}

(To create a running page flow, you will also have to implement the findAvailableReservations method and the SelectReservationsForm form bean in the JSP. We leave this exercise up to you.) If we now go back to Flow View, we see that two ghost JSP icons have appeared:

These JSP names correspond to the path names you have entered in the action method's jpf:forward tag. To turn these into real JSPs, right-click a ghost JSP icon and select Create.

Running Your First Test

Now it's time to test the data handling logic you've implemented. To do so, we first need to add the begin action to our Flow View:

Before we start testing our example, we modify the file showApologies.jsp to enable calling the action method backToReservations. To do so:

Now you can run the first test. You can enter values in the form fields of reservations.jsp and depending on your data handling logic, you will either see the showSelection.jsp or showApologies.jsp page. In the latter case, you can click the link on that page to go back to the page reservations.jsp.

At this point we have created a sizable piece of the basic framework of the web application. Notice that a large number of design elements have not been implemented at this point. For instance, the JSP showApologies.jsp only has an anchor at this point, but it will need explanatory text and possibly links to other JSPs, for instance to go the venues.JSP page and select a different venue.

You can now continue building the other pieces of the navigational framework, or you can further enhance the business logic and data handling in the currently available flow. The latter will be discussed next.

Enhancing a User Interface

In our example, WebLogic Workshop auto-generated the file reservations.jsp. It created a form that calls the action method checkavailability and contains form fields to access the properties of the associated form bean. This was very helpful for our first test, but it is not what the final form page should look like. For instance, WebLogic Workshop created a checkbox and textboxes to access the form bean properties, but our design incorporates different form fields. Specifically, we want the user to select a show from a dropdown list. The list of actual shows changes constantly and is stored in a database. The design also calls for enabling the user to select the days he or she can attend, and to include attendance to late night shows as a radio button option.

Creating a Dropdown List

To create a dropdown list that displays values from a database, we first need to read the values from a database and add these to one of the available data bindings context. To read the database values, we use the Java control that was created earlier for this purpose, quite possibly by another member of the development team, in our JPF file. (For more information on Java controls, see Working with Java Controls.) The list of possible shows only needs to be available in reservations.jsp, so we 've decided to add these values to the request context in the action method that calls the page, instead of in the pageFlow or globalApp:

/**
 * @common:control
*/
private ItemsDBControl items;
private transient Map options = null;
...

protected void initSelections()
{
    ...
    ItemSelectNode[] array = items.getItemSelectData();
    Map map = new LinkedHashMap();
    for(int i = 0; i < array.length; i++)
        map.put(new Integer(array[i].itemNumber), array[i].itemName);
    options = map;
    ...
}

/**
 * @jpf:action
 * @jpf:forward name="success" path="reservations.jsp"
*/
protected Forward showReservations() throws Exception
{
    initSelections();
    getRequest().setAttribute("allShows", options);
    return new Forward( "success");
}

Using the Java control, we read the possible shows from the database, put their primary key values and names in a Java Map, and add the map to the request data binding context.

In reservations.jsp, we need to replace the textbox for the show field with a netui:select tag. You can use the Table Navigator window to easily find the correct cell in the table. In Source View, this tag should be implemented as follows:

<netui:select dataSource="{actionForm.selectedShow}" optionsDataSource="{request.allShows}"/>

Notice that the dataSource attribute binds the primary key value of the show the user selects to the selectedShow property in the form bean. The optionsDataSource attribute binds to the list of shows and displays the show names as the options in the dropdown list. Instead of using a Java Map, we also could have created an ArrayList of show names. In the latter case, a select option's value and its displayed text will both be the name of a show.

Checkboxes and Radio Buttons

To implement a set of checkboxes, you use a netui:checkBoxGroup JSP tag. To implement a set of radiobuttons, you use a netui:radioButtonGroup tag. For both tags you can use the optionsDataSource attribute to read data from a data binding context, like we saw above for the dropdown list, or you can implement the various options directly in the JSP. In our example we use both approaches:

...
<netui:checkBoxGroup defaultValue="{pageFlow.daysOfWeek[0]}"
      dataSource="{actionForm.selectedDays}" optionsDataSource="{pageFlow.daysOfWeek}" />
...
<netui:radioButtonGroup dataSource="{actionForm.lateNight}">
    <netui:radioButtonOption value="1">Yes</netui:radioButtonOption>
    <netui:radioButtonOption value="0">No</netui:radioButtonOption>
</netui:radioButtonGroup>
...

The netui:checkBoxGroup JSP tag reads the various days from the ArrayList object daysOfWeek, which is stored in the pageFlow data binding context, and selects the first day in the object by default through the defaultValue attribute. The user's selection is stored in the form bean's selectedDays property.

The netui:radioButtonGroup tag uses netui:radioButtonOption tags to implement the various radio buttons. The user selection, that is, the value corresponding to the netui:radioButtonOption tag that the user selected, is stored in the form bean property lateNight referenced in the dataSource attribute of the netui:radioButtonGroup tag.

Although we have now implemented additional major pieces of functionality in the reservations.jsp page, there is still more work to be done. Minor navigational flows, for instance to cancel the reservation selection process and go somewhere else in the site, might still have to be implemented. Also, form validation of the user input is probably desirable to create a more robust system. Finally, the JSP is going to require further work to, for instance, show the selected venue and to present all this information in a visually appealing manner, aspects that might be implemented by another member of the development team. However, in relatively little time and with little effort we have created a running web application framework that can be used to test our design and allows us to make modifications to the web application's navigational and other business logic early in the software development cycle.

Related Topics

Best Practices for Page Flow Applications

Getting Started: Web Applications

Tutorial: Page Flow

Page Flow and JSP Samples

How Do I: Page Flows and JSPs