Training

WLSKB006 - Implementing a Multi-step Transaction in WebLogic Workshop Tutorial

Popular Courses

Browse Our Free Resources

  • whitepapers
  • whitepapers
  • webinars
  • blogs

Our Locations

Training Centres

Vancouver, BC
Calgary, AB
Edmonton, AB
Toronto, ON
Ottawa, ON
Montreal, QC
Hunt Valley
Columbia

locations map

Calgary

550 6th Av SW
Suite 475
Calgary, AB
T2P 0S2

Toronto

821A Bloor Street West
Toronto, ON
M6G 1M1

Vancouver

409 Granville St
Suite 902
Vancouver, BC
V6C 1T2

U.S. Office

436 York Road
Suite 1
Jenkintown, PA
19046

Other Locations

Dallas, TX
Miami, FL

Web Age Solutions Inc.

Introduction

In a multi-step transaction, user enters data using a sequence of forms. At the end of the sequence, the application does something with the input data. Desktop applications use wizards to simplify operations. Wizards are good examples of multi-step transaction. In an e-commerce site, the checkout flow can be seen as a multi-step transaction.

In this tutorial, you will be a skeletal checkout flow. Starting from the shopping cart page, the user will go through the shipping, billing, confirmation and finally a thank you page.

Implementation Technique

A good way to implement a multi-step transaction is to save the name of the current stage as a session attribute. Based on the current stage, the controller can forward the user to the next page in sequence.

In WebLogic Workshop, the Page Flow object is stored in session. We can use a member variable in the Page FLow class to store the stage name. You can also use HttpSession to store the same data. In general, using a member variable in a Page Flow requires less coding and we will use that technique in this tutorial.

Create the Application

Launch WebLogic Workshop. Create a new application called BasicApp, unless it is already created from a previous tutorial. The new application will have a web project called BasicAppWeb.

Create the Page Flow

Right click on BasicAppWeb and select New->Page Flow. Create a basic Page Flow called CheckoutFlow.

Switch to the Source View of the Page Flow editor. Add a member variable as shown in boldface below.

public class CheckoutFlowController extends PageFlowController
{

String checkoutStage = "";

Add a new action method called showCheckoutPage as shown below.

/**
 * @jpf:action
 * @jpf:forward name="shipping" path="shipping.jsp"
 * @jpf:forward name="billing" path="billing.jsp"
 * @jpf:forward name="confirm" path="confirm.jsp"
 * @jpf:forward name="thankyou" path="thankyou.jsp"
 */
protected Forward showCheckoutPage()
{
    String nextStage = "";
 
    if (checkoutStage.equals("")) {
        //We are getting started
        nextStage = "shipping";
    } else if (checkoutStage.equals("shipping")) {
        nextStage = "billing";
    } else if (checkoutStage.equals("billing")) {
        nextStage = "confirm";
    } else if (checkoutStage.equals("confirm")) {
        nextStage = "thankyou";
    }
 
    checkoutStage = nextStage;
 
    return new Forward(checkoutStage);
}

Add a few other required actions as shown below. These actions save user input from various stages in the session or the database. They always forward to the showCheckoutPage action which in turn decides what page should be displayed next.

/**
 * @jpf:action
 * @jpf:forward name="success" path="showCheckoutPage.do"
 */
protected Forward saveShippingInfo()
{
    return new Forward("success");
}
/**
 * @jpf:action
 * @jpf:forward name="success" path="showCheckoutPage.do"
 */
protected Forward saveBillingInfo()
{
   return new Forward("success");
}
/**
 * @jpf:action
 * @jpf:forward name="success" path="showCheckoutPage.do"
 */
protected Forward placeOrder()
{
getRequest().setAttribute("orderId", "10001");
return new Forward("success"); }

In real life, the placeOrder action will actually cause the credit card to be charged and an order to be placed.

Save changes (Control+S).

Build the Views

Switch back to the Flow View in the editor. Right click on shipping.jsp and select Create. Similarly, create the billing.jsp, confirm.jsp and thankyou.jsp.

Double click on index.jsp. Switch to the Source View. Set the contents of the <body> tag to as shown below.

<body>
 <h2>Shopping Cart Page</h2>
 <p><netui:anchor action="showCheckoutPage">Checkout</netui:anchor></p>
</body>

Save and close the file.

Similarly, set the content of the <body> tag of the shipping.jsp page to:

<body>
 <h2>Shipping Page</h2>
 <p><netui:anchor action="saveShippingInfo">Next</netui:anchor></p>
</body>

Contents of the <body> tag of the billing.jsp page should be:

<body>
 <h2>Billing Page</h2>
 <p><netui:anchor action="saveBillingInfo">Next</netui:anchor></p>
</body>

Contents of the <body> tag of the confirm.jsp page should be:

<body>
 <h2>Confirmation Page</h2>
 <p><netui:anchor action="placeOrder">Next</netui:anchor></p>
</body>

Contents of the <body> tag of the thankyou.jsp page should be:

<body>
 <h2>Than you</h2>
 <p>Your order number is: <netui:label value="{request.orderId}"/>.</p>
</body>

Save changes (Control+S).

Test

Start the server if it is not already running. From a browser enter the URL: http://localhost:7001/BasicAppWeb/CheckoutFlow/CheckoutFlowController.jpf

Make sure that you can proceed with the checkout process.


Feedback


Email Address: *


Very useful Somewhat useful Not bad Needs many corrections


Comments:
*


( * ) = mandatory field