Creating Page Flow Applications with WebLogic Workshop

Page Flow is an implementation built on top of the Model-View-Controller (MVC) pattern. It's designed to make robust Web applications easier to develop. This chapter examines the foundations of Page Flow and how it's configured by using WebLogic Workshop.

WebLogic Workshop is used to graphically create and configure Page Flow applications. Using Workshop, you can create Page Flow Web applications that use actions and pages. Also, you can take advantage of controls to access other resources, such as Enterprise JavaBeans (EJBs), Web services, and databases.

Creating a Page Flow Application

The first step in creating a Page Flow application is to right-click on the current application and select New, Project. This opens the New Project dialog box, which displays the different types of applications Workshop can create. For a Page Flow application, select the Web User Interface folder and then select Web Project on the right. Supply a project name; this name is used to reference the Web application in the browser. In this example, the BuyChips application would be referenced as http://< address >:<port>/BuyChips/Controller.jpf .

Figure 4.1 shows the New Project dialog box. For the Wonderland Casino application, it has been decided that guests will be able to prepay for chips and the chips will already be in their rooms when the guests arrive .

Figure 4.1. Creating a Page Flow application in WebLogic Workshop.

The result of these steps is a BuyChips folder, a Controller.jpf file, an index.jsp file, and an error.jsp file. The Controller.jpf file is the configurable Controller for your application. When it's opened in Flow View, you can add pages and actions simply by dragging them from the Palette to the Page Flow. When you view the page in Action View, the Controller can be configured to use controls to access external resources. In Source View, you can code the actions used by the Controller.

Adding Pages to a Page Flow Application

Two pages are created when the Page Flow application is built: index.jsp and error.jsp . Most likely, your application will be much more complicated than that. For the Wonderland Casino application, you need to add a buyChips page. First, make sure you have the Controller.jpf file open in Flow View, and then drag a page from the Palette onto the Flow View, as shown in Figure 4.2. After it's added, the new page needs to be renamed . To do this, right-click on the page and choose Rename.

Figure 4.2. Adding a page to a Page Flow by using the Palette.

Another way to add a page to a Page Flow is to right-click on the Page Flow's folder and choose File, New, JSP File. In the casino example, it's the BuyChips folder. This opens the New File dialog box, which prompts you to select a filename. After you click Create, you should notice that the page is part of the Page Flow.

Adding Actions to a Page Flow

So far you have worked with the View component and created two pages, buyChips.jsp and confirmation.jsp . At this point, they are just sample JSP files, but you'll add to them soon. Before you can do that, however, you need to create the actions the Page Flow is going to use. Remember that actions are the Controller's way of accessing the Model component, which accesses the back-end resources.

When you open the Flow View, notice that a begin action is already there. The begin action is automatically created when a new Page Flow application is created. It is executed when no other action is given to the Controller, usually when the application is first accessed.

Adding an action is similar to adding a page. This time, drag an action from the Palette onto the Form View of the Controller. This is illustrated in Figure 4.3, where the purchaseChips action has been created. After an action is dragged onto the controller, a dialog box opens and prompts you for a name. It also asks whether you want to create a Form bean. For now, select No Form Bean. You'll see how to create and use them later in the section, "Passing Data with Form Beans."

Figure 4.3. Adding an action to a Page Flow.

Forward Objects and Linking Pages

After your action has been created, you can use the Source View of the Controller to edit what the action does. Initially, it should look like the following code:

 public class Controller extends PageFlowController {     /**      * @jpf:action      * @jpf:forward name="index" path="index.jsp"      */     protected Forward begin()     {         return new Forward("index");     }     /**      * @jpf:action      */     protected Forward purchaseChips()     {         return new Forward("success");     } } 

The begin and purchaseChips actions aren't complex. However, this code introduces a new topic: forward objects . Forward objects are used to determine where the Page Flow should go next . First, take a look at the begin action, which has a @jpf:forward annotation to define all the possible places that action could go. Currently, the purchaseChips action has none of these forward object annotations because you have yet to link this action to a page. After it's linked, Workshop automatically produces the @jpf:forward annotation for your action.

To create the link, the Controller needs to be in Flow View. First, you need to create a link from the buyChips.jsp to the purchaseChips action. To do this, place your mouse pointer next to the buyChips.jsp icon. You should see three vertical squares appear as you approach the perimeter of the JSP icon. Click and drag these three squares to the purchaseChips action, as shown in Figure 4.4.

Figure 4.4. Adding an action to a Page Flow.

Now you need to link the action to another page by dragging a link from the purchaseChips action to the confirmation.jsp file. The default name for links is "success," but the links can be named anything. To change the name, right-click on the link and select Rename. This automatically changes the value in the Controller's source code as well.

To run the Page Flow, you need to create a link in the JSP that tells the Controller to execute the purchaseChips action. To do this, double-click the buyChips.jsp file to open it. Then drag an anchor tag from the NetUI section of the Palette. The <netui:anchor> tag is used to specify an href or to call an action; in this case, you want to call an action. Also, you want to supply how many dollars the user wants in chips. To do this, use a <netui:parameter> tag. The JSP code for these actions is shown in Listing 4.1.

Listing 4.1. Using a <netui:anchor> Tag in the buyChips.jsp File

 <!--Generated by WebLogic Workshop--> <%@ page language="java" contentType="text/html;charset=UTF-8"%> <%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%> <%@ taglib uri="netui-tags-html.tld" prefix="netui"%> <%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%> <netui:html>     <head>         <title>             Prepay for Chips         </title>     </head>     <body>         <p>         <netui:anchor action="purchaseChips">             Buy 0 worth of chips             <netui:parameter name="amount" value="100"></netui:parameter>         </netui:anchor>         <netui:anchor action="purchaseChips">             Buy 0 worth of chips             <netui:parameter name="amount" value="500"></netui:parameter>         </netui:anchor>         <netui:anchor action="purchaseChips">             Buy 00 worth of chips             <netui:parameter name="amount" value="1000"></netui:parameter>         </netui:anchor>         </p>     </body> </netui:html> 

The lone attribute that is passed into the <netui:anchor> tag is action . Also, note that the <netui:parameter> tag appears between the start and end anchor tags. Typically, you wouldn't use links to pass the dollar amount; instead, you would use a form. Using forms in Page Flows is discussed later in the section "Passing Data with Form Beans."

Now that the JSP is supplying information the Controller needs, it's time to update the purchaseChips action in the Controller, as shown in the following code:

 /**      * @jpf:action      * @jpf:forward name="confirmed" path="confirmation.jsp"      */     protected Forward purchaseChips()     {         String amount = getRequest().getParameter("amount");         return new Forward("success");     } 

To access the request object, you use the getRequest() method. Then you can use the getParameter() method to access the query string parameters that are passed in. Notice that a @jpf:forward statement has been added; however, because you renamed the link from the default "success," it's no longer correct in the return object. Double-check your return objects whenever you rename links; in this instance, the return object has been changed to confirmed . Figure 4.5 shows a successful execution of the BuyChips application.

Figure 4.5. A successful navigation of the BuyChips application.

Branching Page Flows

Right now, the purchaseChips action has only one destination, but imagine the following requirement was added: If users decide they want $1,000 worth of chips, they should be considered high rollers. If users are high rollers, you want to send them to a high roller page instead of the standard confirmation page.

You can do this in Page Flow by taking advantage of branching . Branching has an action to determine whether the request merits being a high roller; if it does, it's routed to a highRoller.jsp page. After a highRoller page is added to the Controller, a link is drawn from the purchaseChips action to the highRoller.jsp . This is no different from the method discussed in the previous section. The results are shown in Figure 4.6.

Figure 4.6. The final results of adding highRoller.jsp to the Page Flow.

Now that the JSP and link have been added, it's time to take a look at how the actual branching is done. Listing 4.2 shows how to branch within an action.

Listing 4.2. Branching from Within an Action

 /**      * @jpf:action      * @jpf:forward name="confirmed" path="confirmation.jsp"      * @jpf:forward name="highRoller" path="highRoller.jsp"      */     protected Forward purchaseChips()     {         String amount = getRequest().getParameter("amount");         int amt = Integer.parseInt(amount);         if (amt == 1000)             return new Forward("highRoller");         else             return new Forward("confirmed");     } 

The purchaseChips action, as before, gets the amount of chips being purchased, but this time the value is compared against 1,000. To branch the application, all you need to do is set the string equal to a different value. All the available values are listed in the @jpf:forward annotations in the comment section before the action.

Successful execution of this application is the same as what was previously shown in Figure 4.5. Figure 4.7 shows the results if the guest is a high roller.

Figure 4.7. Navigation of BuyChips for high rollers.