Business-to-Consumer (B2C) Portal Tour

The business-to-consumer (B2C) portal tour describes the key features that were implemented for the Avitek Digital Imaging portal. The site demonstrates a combination of product features, including the portal framework in WebLogic Portal, the use of two Web services built in WebLogic Workshop, plus inventory checks and order management provided by WebLogic Integration. All these components run on the Web application server environment provided by WebLogic Server.

Note: The information that is presented in this online book is also available in a context-sensitive tour guide portlet that runs as part of the application.

This business-to-consumer (B2C) portal tour contains the following sections:

• Outline of Initial Processing
• The My Avitek Page
• The Products Page
• The Category Portlet
• The Product Item Portlet
• The Product Evaluator Portlet and Web Service
• The Buy Now Button and Inventory Checks Via WebLogic Integration AI
• The Search Results Portlet
• The Save for Later Button
• The My Shopping Cart Portlet, Step1.jsp

• The Add to Cart Button in Saved Items List
• The REMOVE Button in the Saved Items List
• The REMOVE Button on the Current Items List
• The Save for Later Button on Current Items List
• The Checkout Portlet, Step2.jsp
• The Order Submission Portlet, Step3.jsp
• The Order Confirmation Portlet, Step4.jsp

 

---

Outline of Initial Processing

When you started the WebLogic Platform sample application, what happened that resulted in server startup and initial display of the Introduction or "splash" page? First, there were several ways you could have invoked the sample application, for example, from the WebLogic Platform Quick Start Application or Windows Start menu, or directly by running a startE2E script.

Regardless of which option you used, the startE2E.bat (Windows) or startE2E.sh (UNIX) script was invoked. It started a WebLogic Server instance for the application, which runs in a domain named e2eDomain. ("e2e" is an abbreviation for "end-to-end," meaning a sample that shows a full range of key features.) The word "domain" has many meanings in the computing industry. BEA products use domain to mean a collection of servers, services, interfaces, machines, and associated resource managers, all defined by a single configuration file.

When the startE2E script runs, it reads configuration information from the enterprise application's config.xml file. By default this configuration file resides in the following BEA_HOME installed directory:

weblogic700/samples/platform/e2eDomain

The config.xml file includes the following definition, setting splashPage as the default Web application in the domain.

<WebServer

	DefaultWebApp="splashPage"
	LogFileName="./logs/access.log"
	LoggingEnabled="true"
	Name="e2eServer"
   />

With the e2eServer running, specifying a URL such as http://localhost:7501 in a browser results in running the splashPage Web application (or "Webapp") in the following directory:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\splashPage 

The splashPage webapp's web.xml configuration file defines index.jsp in the <welcome-file-list> definition. This web.xml resides in the following directory:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\splashPage\WEB-INF 

On the splash page, you clicked the Login as Rachel Adams button graphic to arrive on this My Avitek page. This action resulted in the splash page passing in the URL for the portal application, plus predefined login credentials.

The splash page sets up requests that allow you to automatically log into the b2cPortal or b2bPortal. This is done to help simplify this sample application. You would not want to embed usernames and passwords in a JSP page. We used a scriptlet to define the login credentials, but do not recommend that you use this approach for your Web applications.

Note: WebLogic Portal provides other samples that demonstrate login authentication code, plus techniques to gather demographic information for Web applications. For details, please refer to the WebLogic Portal documentation.

Once the URL was passed to the browser for the b2cPortal application, why was the My Avitek page the first page displayed? The default page was defined in the WebLogic Portal Administration Tools. For details on this and other characteristics of the My Avitek page, see the next section.

 

---

The My Avitek Page

The B2C portal tour starts on the My Avitek page, which presents content that has been personalized for logged-in user Rachel Adams. WebLogic Portal tools were used to organize sets of information into portlets. Personalized content on this page includes Rachel's current shopping cart, her order history, and listing her name next to the Logout button.

If this is your initial tour, and no other user has logged in as Rachel Adams on a shared server instance, the shopping cart and order history are empty. The following screen shows a My Avitek page for a user who has already completed two orders.

 

Technical Details for the My Avitek Page

This section provides details about the processing that occurs on this page.

Introduction

The My Avitek portal page presents a number of portlets to give the logged-in user a personalized view of the site. The My Avitek page is one of three tabbed pages in the b2cPortal. In the BEA_HOME directory where you installed WebLogic Platform, you will find the files that comprise the e2eApp in the following locations:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\... 

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project\... 

The My Avitek page can include the following portlets:

• The mybanner portlet, which provides the top banner and the three tabs for My Avitek, Products, and Shopping Cart pages.
• The login portlet, used when an authenticated user has been logged into the application. It provides the Logout button and the name of the currently logged-in user.
• The search portlet, which provides a keyword-based search input box.
• The myavitek portlet, which provides the Feature Photo Tips graphics and text on the My Avitek page. (The content shown in this sample is static, but could be personalized for different types of users using features in WebLogic Portal. For information about personalizing application content, see the WebLogic Portal Development Guide.)
• The summarycart portlet, which provides an abbreviated list of the logged-in user's Shopping Cart.
• The orderhistory portlet, which provides an abbreviated list of the logged-in user's order history.
• The tourguide portlet, which provides the context-sensitive documentation in the application. It has two forms: the smaller version on the left side of the running application, and the current maximized version that includes Technical Details, View Code, and e-docs pointers.

All of the portlets that comprise the My Avitek page are identified in the following file:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project
\application-sync\webapps\b2cPortal\b2cPortal.portal 

For example:

<page-name>My Avitek</page-name>
...
	<portlet-pool>
		<portlet-name>login</portlet-name>
		<portlet-name>search</portlet-name>
		<portlet-name>tourguide</portlet-name>
		<portlet-name>subnav</portlet-name>
		<portlet-name>summarycart</portlet-name>
		<portlet-name>myavitek</portlet-name>
		<portlet-name>orderhistory</portlet-name>
		<portlet-name>mybanner</portlet-name>
		<portlet-name>anonUser</portlet-name>
	</portlet-pool>

During the development cycle, these portlets were added to the My Avitek page using the E-Business Control Center. The EBCC is a Java client-based tool suite. It provides graphical interfaces that simplify complex tasks such as rule definitions, Webflow editing, and portal creation and management. As users of the E-Business Control Center work with its point-and-click interface, it generates XML files that are synchronized with the server.

In addition to the EBCC, the browser-based Portal Administration tools were used for administering and managing the portal at runtime. For information about that process, see the WebLogic Portal Administration Guide.

As you run this sample application, it is important to understand that as a developer you are interested in the portlet JSP code before it was rendered by the browser. That's why the code fragments in this section, and the View Code link, describe the prerendered JSP file for a particular portlet.

You can find the b2cPortal's portlet JSP files in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal
\portlets\... 

For this My Avitek page, the View Code link opens the source for the \orderhistory\content.jsp portlet file. It presents the personalized order history for the logged-in user. This portlet's file resides in the orderhistory subdirectory under the path shown above.

How do we know that the Order History portlet uses the content.jsp in the ...\e2eApp\b2cPortal\portlets\orderhistory directory? This was specified in the E-Business Control Center provided by WebLogic Platform. This information is also defined in the following file:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project
\application-sync\portlets\orderhistory.portlet 

This XML file contains the following definition:

<portlet-name>orderhistory</portlet-name>
...
<content-url>/portlets/orderhistory/content.jsp</content-url>

Notice how the content URL is relative to the root of the b2cPortal Web application, which by default is the following installed directory location:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal 

Location in the Default Webflow

Before we start our discussion about the default webflow for the My Avitek page, let's define some terms.

Webflow is a BEA technology that allows developers to control the flow of a Web site, without hard-coding in the presentation JSP the URL of the next page. WebLogic Portal uses Webflow to determine which pages the application should display in a browser and which pieces of business logic it should execute. One or more Webflow namespace files allow you to configure the Webflow for a particular Web application.

A Webflow namespace file is an XML file that configures the Webflow for a Web application, controlling the order in which your site's Web pages are displayed and initiating the execution of the business logic that is associated with them. You edit Webflow namespace files using the Webflow and Pipeline Editors, available in the BEA E-Business Control Center. These editors are graphical tools designed to help you visually create, modify, and validate Webflows for your Web applications.

Pipelines and Input Processors are the two different types of processor nodes that come packaged with the Webflow implementation.

A Pipeline is a BEA technology that allows developers to bind a sequence of services into a single named service. You can build Pipelines to manage the processing of business data. Generally, Pipelines control the flow of business logic that is executed resulting from Webflow, and they can be transactional or nontransactional. For example, if a visitor attempts to move to another page on your Web site but you want to persist the visitor's information to a database first, you could use a Pipeline. Pipelines contain business logic that may apply to multiple Web applications within a larger enterprise application, and are therefore loaded by the Enterprise JavaBean (EJB) container.

Pipelines are represented as Pipeline Nodes in the Webflow and Pipeline Editors, available in the BEA E-Business Control Center. The Webflow and Pipeline Editors generate underlying Webflow namespace and Pipeline namespace XML files, which you should not hand-edit.

For the b2cPortal application, the Webflow namespace files are located in the following directory:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project\application-sync\webapps\b2cPortal 

Input Processors are predefined, specialized Java classes that carry out more complex tasks when invoked by the Webflow mechanism. Input Processors are typically used to validate HTML form data, or to provide conditional branching within a Web page. For example, an Input Processor may contain code that verifies whether a date has been entered in the correct format, as opposed to embedding that code within the same JSP that displays the form fields. Input Processors contain logic that is specific to the Web application, and are therefore loaded by the Web application's container.

For details about the Webflow and Pipeline technology and its editors, see the section Setting up Portal Navigation in the WebLogic Portal Development Guide.

That covers the key definitions for the Webflow technology. Now let's focus on the My Avitek page. On a page that preceded the display of the My Avitek page, you performed one of the following actions:

• Clicked the Login as Rachel Adams button graphic on the sample's Introduction page. The form used on the page constructed the URL value from predefined values and login credentials. (It was implemented this way to simplify the sample application, but is not a recommended practice.) Please see the WebLogic Portal documentation for information about using login authentication code, plus techniques to gather demographic information for Web applications.
• Clicked the My Avitek tab from a Products page or Shopping Cart page.

See the next section for information about events on the My Avitek page.

Events on the My Avitek Page

Every time a customer clicks a link or button on a JSP, it is considered an event. Events trigger particular responses in the default Webflow that allow customers to continue. While this response might be to load another JSP, it is usually the case that an Input Processor and/or Pipeline is invoked first.

When you are on a Products or Shopping Cart page and then click the My Avitek tab, you will notice a resulting URL similar to the following (shown here on several lines to improve readability).

http://<host>/<port>/b2cPortal/application?
origin=hnav_bar.jsp&event=bea.portal.framework.internal.refresh
&pageid=My+Avitek 

The refresh event causes any page to be displayed again with the latest data. All the portlets on the My Avitek page that contain dynamic data (My Shopping Cart, My Order History, Tour Guide) have their data refreshed.

The tabs are provided via the hnav_bar.jsp file, which resides in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal\framework 

The hnav_bar.jsp file imports two JSP Tag libraries:

<%@ taglib uri="webflow.tld" prefix="wf" %>
<%@ taglib uri="portal.tld" prefix="ptl" %>

When you clicked the My Avitek tab from another page in the application, the hnav_bar.jsp used the JSP tag in the following link for the target tab:

<a href="<ptl:createPortalPageChangeURL pageName='<%= portalPageName %>'/>"><%=portalPageName%></a> 

The (portal) ptl:createPortalPageChangeURL JSP tag generates a webflow URL for a page change event.

Dynamic Data Display on My Avitek Page

On the My Avitek page, let's look at one of the dynamic portlets, summarycart (shown as "My Shopping Cart" on the My Avitek page).

The webflow namespace file for the summarycart portlet is:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project\app
lication-sync\webapps\b2cPortal\summarycartportlet.wf 

It contains:

    <presentation-origin node-name="step1" node-type="jsp">
        <node-processor-info page-name="step1.jsp"
	             		page-relative-path="/portlets/summarycart"/>
    </presentation-origin>

The step1.jsp file is located in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal\portlets\summarycart\step1.jsp 

The step1.jsp file uses a combination of JSP tags, including webflow tags to get the current shopping cart and saved shopping cart from the pipeline session:

<webflow:getProperty id="shoppingCart"
 property="<%=PipelineSessionConstants.SHOPPING_CART%>
 "type="com.beasys.commerce.ebusiness.shoppingcart.ShoppingCart"
 scope="session" namespace="portal" />

<webflow:getProperty id="savedShoppingCart"
 property="<%=PipelineSessionConstants.SAVED_SHOPPING_CART%>"
 type="com.beasys.commerce.ebusiness.shoppingcart.ShoppingCart"
 scope="session" namespace="portal" />

Administration Task to Designate Default Portal Page

Most of the properties discussed in this My Avitek section were not edited by hand, but were defined using the E-Business Control Center, and the Portal Management area of the WebLogic Portal Administration Tools. For example, designating that the My Avitek page was the default starting page in the b2cPortal application was accomplished using the Portal Administration Tools. This section explains how to start the tool and shows a sample screen for the default page setting.

1. In a new browser window, point to the following URL, which starts the WebLogic Portal Administration Tools:

   http://<host>:<port>/e2eAppTools/index.jsp 

   These steps assume that the server for the e2eDomain is still running. You can run the e2eAppTools Web application and the sample application at the same time. Both Web applications are part of the same e2eApp enterprise application and run in the same domain.

2. Substitute the name of your local machine (localhost) or the remote host name, and substitute the port number on which WebLogic Server is listening. For WebLogic Portal applications, the default port number is 7501. The e2eAppTools portion of the URL is case sensitive.

3. You are prompted for a username and password. These values may be different for your site, but by default they are:

   Username: administrator
   Password: password 

   The login values are case sensitive. If these credentials do not work, please check with the administrator, who may have changed the default values for the administrator account after the sample was installed.

4. On the main Administration Tools page, click the icon in the Portal Management banner.

5. On the Portal Management Home page, click "Default Portal (Everyone)" for the b2cportal.

6. On the Group Portal Management Home page, click "Manage Pages and Portlets".

7. On the Pages and Portlets page, click "Select and Order Pages."

   The following figure shows a portion of the page:

   

   
    

Note how the My Avitek page has been designated as the default Home Page.

For more information about the WebLogic Portal Administration Tools, see the WebLogic Portal Administration Guide.

To exit the Administration Tools, close the browser window.

Next Step

To continue the tour, select the Products tab in the banner.

 

---

The Products Page

Having clicked the Products tab, this page loaded the top-level categories from the product catalog in the center portlet, catalog.jsp. Text and images for the catalog were organized earlier using the Catalog Management area of the WebLogic Portal Administration Tools. For a logged-in user, the latest data for My Shopping Cart and My Order History were refreshed.

The following screen shows the categories on the initial Products page.

 

Technical Details for the Products Page

This section provides details about the processing that occurs on this page.

Introduction

The Products page includes many of the portlets you saw on the My Avitek page:

• The mybanner portlet, which provides the top banner and the three tabs for My Avitek, Products, and Shopping Cart pages.
• The login portlet, used when an authenticated user has been logged into the application. It provides the Logout button and the name of the currently logged-in user.
• The search portlet, which provides a keyword-based search input box.
• The summarycart portlet, which provides an abbreviated list of the logged-in user's Shopping Cart.
• The orderhistory portlet, which provides an abbreviated list of the logged-in user's order history.
• The tourguide portlet, which provides the context-sensitive documentation in the running sample.

In addition, this Products page adds the catalog.jsp portlet. Its source files reside in the following subdirectory under your installed BEA_HOME directory:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal\portlets\catalog 

The catalog.jsp portlet includes JSP code from different include files, depending on the catalog event that just occurred, as you will see as you select different items in the catalog on subsequent pages.

Besides the catalog.jsp portlet, an additional portlet that you will see on subsequent Products pages is called the Product Evaluator. This portlet will appear on catalog pages that include one or more product items in a category. The Product Evaluator portlet uses a Web service created earlier in WebLogic Workshop to look-up consumer ratings for the selected product item. The portlet's source files (evaluator.jsp, and included files step1.jsp and step2.jsp) are located in the following subdirectory under your installed BEA_HOME directory:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal\portlets\evaluator 

All of the portlets that comprise the Products page are identified in the following file:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project\app
lication-sync\webapps\b2cPortal\b2cPortal.portal 

For example:

 <page-name>Products</page-name
  ...
     <portlet-pool>
     <portlet-name>login</portlet-name>
     <portlet-name>search</portlet-name>
     <portlet-name>evaluator</portlet-name>
     <portlet-name>summarycart</portlet-name>
           <portlet-name>tourguide</portlet-name>
     <portlet-name>catalog</portlet-name>
     <portlet-name>subnav</portlet-name>
     <portlet-name>orderhistory</portlet-name>
</portlet-pool>

Location in Default Webflow

The Webflow for this application displayed this catalog page when you selected the Products tab.

As mentioned in the previous section, the catalog.jsp portlet includes JSP code from different included files, depending on the catalog event that just occurred. For example, the following webflow:getProperty tag in catalog.jsp gets the last catalog event from the pipeline session:

<webflow:getProperty
	id="event"
	type="java.lang.String"
	property="<%= B2CPortalConstants.LAST_CATALOG_EVENT_ATTRIB %>"
	scope="session"
	namespace="portal" />

• If the catalog event is null, the following JSP is included into the catalog.jsp portlet:

<jsp:include page="/portlets/catalog/catalog_index.jsp" flush="true" /> 

Catalog_index.jsp performs the processing to load the top-level categories that you saw on the initial Products page.

• If the user clicked one of the specific categories, the following JSP is included into the catalog.jsp portlet:

<jsp:include page="/portlets/catalog/category.jsp" flush="true" /> 

Information about the category.jsp processing is provided in the Technical Details section of a category page.

• If the user clicked one product item in a specific category (not shown from the initial Products page), the following JSP is included into the catalog.jsp portlet:

<jsp:include page="/portlets/catalog/item.jsp" flush="true" /> 

For information about the item.jsp processing, see the section The Product Item Portlet.

• If the user entered a search keyword and clicked the Go button, the following JSP is included into the catalog.jsp portlet:

<jsp:include page="/portlets/catalog/search_results.jsp" flush="true" /> 

Information about the search_results.jsp processing is provided in the section The Search Results Portlet.

Dynamic Data Display

On the initial Products page that loaded the six product categories, the catalog event was null. Consequently the catalog_index.jsp file was included into the catalog.jsp portlet. If you want, take a look at the code for catalog_index.jsp, which is located in the following subdirectory under your installed BEA_HOME directory:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal\portlets\catalog 

The catalog_index.jsp file includes a view iterator that cycles through the catalog and retrieves properties for each category. First we use a webflow:getProperty JSP tag to get the catalog categories view iterator from the pipeline session:

<webflow:getProperty
	id="categories"
	type="com.beasys.commerce.ebusiness.catalog.ViewIterator"
	property="<%=PipelineSessionConstants.CATALOG_CATEGORIES%>"
	scope="session"
	namespace="portal" />

Then we iterate through the categories and display each one. A subset of the coding is shown here:

<catalog:iterateViewIterator
	id="category"
	returnType="com.beasys.commerce.ebusiness.catalog.Category"
	iterator="<%=categories%>">

<catalog:getProperty 
	id="categoryKey"
	returnType="com.beasys.commerce.ebusiness.catalog.CategoryKey"
	object="<%= category %>"
	propertyName="key" />

<catalog:getProperty 
	id="largeImage"
	returnType="com.beasys.commerce.ebusiness.catalog.ImageInfo"
	object="<%= category %>"
	propertyName="image"
getterArgument="<%= new Integer(Category.LARGE_IMAGE_INDEX ) %>" />
...

Still in the same iterator in catalog_index.jsp, each table cell displays some of the properties on the page. A subset of the coding is shown here:

<a href="<portlet:createWebflowURL namespace="catalogportlet"
event="link.category"extraParams="<%=linkParams +
java.net.URLEncoder.encode( categoryKey.getIdentifier())
%>"/>"><img src="<webflow:createResourceURL
resource='<%=largeImage.getUrl()%>'/>" width="180" height="136"
alt="<%=shortDesc%>" border="0"></a>

That processing results in the display of the categories on the initial Product page, in the catalog.jsp portlet. You will notice in the HTML above that if the user then clicks the category's image, it will generate an event called link.category for the transition to the next page. But what event occurred that preceded the display of this initial Products page? See the next section for details.

Events on the Initial Products Page

When you are on a My Avitek or Shopping Cart page and then click the Products tab, you will notice a resulting URL similar to the following (shown here on several lines to improve readability).

http://<host>/<port>/b2cPortal/application?
origin=hnav_bar.jsp&event=bea.portal.framework.internal.refresh
&pageid=Products 

The refresh event causes any page to be displayed again with the latest data. All the portlets on the Products page that contain dynamic data have their data refreshed. This particular refreshed Products page contains the initial one showing the six top-level categories.

The tabs are provided via the hnav_bar.jsp file, which resides in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal
\framework 

The hnav_bar.jsp file imports two JSP Tag libraries:

<%@ taglib uri="webflow.tld" prefix="wf" %>
<%@ taglib uri="portal.tld" prefix="ptl" %>

When you clicked the Products tab from another page in the application, the hnav_bar.jsp used the following JSP tag in the link for the target tab:

<a href="<ptl:createPortalPageChangeURL pageName='<%= portalPageName %>'/>"><%=portalPageName%></a> 

The (portal) ptl:createPortalPageChangeURL JSP tag generates a webflow URL for a page change event.

Also, as mentioned previously, on this initial Products page the catalog event was null. This resulted in loading the catalog_index.jsp into the catalog.jsp portlet. From the coding in the catalog.jsp portlet:

<webflow:getProperty
	id="event"
	type="java.lang.String"
	property="<%= B2CPortalConstants.LAST_CATALOG_EVENT_ATTRIB %>"
	scope="session"
	namespace="portal" />
<%
	if ( event == null )
	{

%>

<jsp:include page="/portlets/catalog/catalog_index.jsp" flush="true" />

Category Administration Tasks

The catalog in this sample application uses a simple, two-level hierarchy of categories. The first level is the default root category, and the second level is comprised of the six categories you saw on the initial Products page. However, the WebLogic Portal catalog feature supports multi-level hierarchical categories, as explained in the WebLogic Portal documentation.

The six categories in this sample application were previously defined in the Catalog Management area of the browser-based WebLogic Portal Administration Tools. If you want, you can follow the instructions in this section to see the existing definitions.

The following steps assume that the server for the e2eDomain is still running. You can run the e2eAppTools Web application and the sample application at the same time. Both Web applications are part of the same e2eApp enterprise application and run in the same domain.

1. In a new browser window, use the following URL format, which starts the WebLogic Portal Administration Tools:

   http://<host>:<port>/e2eAppTools/index.jsp 

   In the URL, substitute for the name of your local machine (localhost) or the remote host name, and substitute the port number on which WebLogic Server is listening. For WebLogic Portal applications, the default port number is 7501. The e2eAppTools portion of the URL is case sensitive. For example:

   http://localhost:7501/e2eAppTools/index.jsp 

2. You are prompted for a username and password. These values may be different for your site, but by default they are:

   Username: administrator
   Password: password 

   The login values are case sensitive. If these credentials do not work, please check with the administrator, who may have changed these default values for the administrator account after the sample was installed.

3. On the main Administration Tools page, click the icon in the Catalog Management banner.

4. On the Catalog Management page, click the underlined word Categories.

   The following screen is displayed:

   

   
    

   Click one of the underlined categories. For example, click AviPix (0avipix). (Warning: do not click the red X icon, which deletes the category from the catalog. Keep in mind that you are using the administration pages for the sample catalog data.)

5. On the resulting page, scroll down to see the location for an image representing that category.

For more information about catalog administration tasks, see the WebLogic Portal documentation.

To exit the Administration Tools, close the browser window.

Next Step

To continue the tour, click the AviPix Consumer Digital Cameras category.

 

---

The Category Portlet

Product items in this specific category have been loaded from the catalog and displayed on this page. For example:

 

Category Page Technical Details

This section provides details about the processing that occurs on this page.

Introduction

Product items in this specific category have been loaded from the catalog and displayed on this page. The top banner includes a graphic that highlights the current category. The Product Evaluator portlet near the bottom of the page includes a menu that allows logged-in user Rachel Adams to get ratings on product items in this category.

Processing of the Webflow event determined that a link.category event occurred, which resulted in loading the category.jsp file into the centered catalog.jsp portlet.

Notice a sample URL that resulted for the current sample application's page, shown over several lines to improve formatting:

http://localhost:7501/b2cPortal/application
?origin=catalog_index.jsp
&event=bea.portal.framework.internal.portlet.event
&pageid=Products&portletid=catalog
&wfevent=link.category&wlcs_catalog_category_id=0avipix 

In the sample URL, the origin state is shown in the second, third, and fourth lines. The Webflow event is shown in the last line. A link.category event occurred, which resulted in the page you saw in the sample application. Product items are displayed for (in this example) the 0avipix category that was selected on the prior page. The number zero is an index into the six product categories.

Location in Default Webflow

The Webflow for this application resulted in loading the data for the category selected on a prior page. The catalog.jsp portlet includes JSP code from different included files, depending on the catalog event that just occurred. For example, the following webflow:getProperty tag in catalog.jsp gets the last catalog event from the pipeline session:

<webflow:getProperty
id="event"
type="java.lang.String"
property="<%= B2CPortalConstants.LAST_CATALOG_EVENT_ATTRIB %>"
scope="session"
namespace="portal" />

In the catalog.jsp portlet, the returned event attribute is checked:

...
<%
	}
	else if ( ( event.equals( "link.category" ) ) || 
		( event.equals( "button.category.buy" ) ) ||
		( event.equals( "button.category.save") )   )
	{
%>
...
<jsp:include page="/portlets/catalog/category.jsp" flush="true" />

In this case, the category.jsp file was included into the catalog.jsp portlet because the link.category event occurred.

Dynamic Data Display

In the category.jsp file, we get the category that was selected on the prior page from the pipeline session:

<webflow:getProperty
	id="category"
	type="com.beasys.commerce.ebusiness.catalog.Category"
	property="<%= PipelineSessionConstants.CATALOG_CATEGORY %>"
	scope="session"
	namespace="portal" />

We then use a series of JSP tags to get properties about the current category. An example:

<catalog:getProperty
	id="headerImage"
	returnType="com.beasys.commerce.ebusiness.catalog.ImageInfo"
	object="<%= category %>"
	propertyName="image"
	getterArgument="<%= new Integer( CatalogItem.SMALL_IMAGE_INDEX 		  ) %>" />

Next we use a view iterator to get the products items in this category from the pipeline session:

<webflow:getProperty
	id="items"
	type="com.beasys.commerce.ebusiness.catalog.ViewIterator"
	property="<%= PipelineSessionConstants.CATALOG_ITEMS %>"
	scope="session"
	namespace="portal" />

We then iterate through the product items and display some properties about each one in the catalog.jsp portlet. A subset of the coding is shown here:

<catalog:iterateViewIterator
	id="item"
	returnType="com.beasys.commerce.ebusiness.catalog.ProductItem"
	iterator="<%= items %>">

<catalog:getProperty
	id="itemImage"
	returnType="com.beasys.commerce.ebusiness.catalog.ImageInfo"
	object="<%= item %>"
	propertyName="image"
	getterArgument="<%= new Integer( CatalogItem.SMALL_IMAGE_INDEX ) %>" />

<catalog:getProperty
	id="currentPrice"
	returnType="com.beasys.commerce.axiom.units.Money"
	object="<%= item %>"
	propertyName="currentPrice" />
		...

Because category.jsp includes a number of buttons (Details, Buy Now, and Save for Later), additional work is done. For example, to prepare the Details link, we set up the HTTP request parameters.

<% 
	String linkParams = 
		HttpRequestConstants.CATALOG_CATEGORY_ID + "=" +
			java.net.URLEncoder.encode( categoryKey.getIdentifier()
				) + "&" +
		HttpRequestConstants.CATALOG_ITEM_SKU + "=" + 
			itemKey.getIdentifier();
%>

Still in the same iterator in category.jsp, each table cell displays properties on the page. A small subset of the coding is shown here. Please see the table in category.jsp for additional coding:

<a href="<portlet:createWebflowURL namespace="catalogportlet" event="link.item"
extraParams="<%=linkParams%>" />"><img src="<webflow:createResourceURL
resource="<%=itemImage.getUrl()%>"/>" width="187" height="139" alt=""
border="0"></a>

The code shown above is used if the user clicks the item's image or the Details button graphic.

You will notice in the HTML subset above that if the user clicks the product item's image, it will generate an event called link.item for the transition to the next page. But what event occurred that preceded the display of this initial Products page? See the next section for details.

Events

On a prior Products page, after the catalog_index.jsp file was included into the catalog.jsp portlet, an HTML table in the portlet included the following code:

<a href="<portlet:createWebflowURL namespace="catalogportlet" event="link.category"
extraParams="<%=linkParams + java.net.URLEncoder.encode( categoryKey.getIdentifier() )%>"
/>"><img src="<webflow:createResourceURL resource='<%=largeImage.getUrl()%>'/>"
width="180" height="136" alt="<%=shortDesc%>" border="0"></a>

When you clicked on a specific category, either in the banner graphic or in the catalog.jsp (which was displaying the catalog_index.jsp file), it triggered the link.category Webflow event. That resulted in loading the category.jsp file into the catalog.jsp portlet, which in turn displayed the product items that comprise the selected category.

All the catalog events are defined in the following Webflow file for the catalog.jsp portlet:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project\app
lication-sync\webapps\b2cPortal\catalogportlet.wf 

One of the events defined in catalogportlet.wf is:

	<event event-name="link.category">
		<destination namespace="catalogportlet"
			node-name="getCategoryIP" node-type="inputprocessor"/>
	</event>
					...
	<processor-origin node-name="getCategoryIP"
		node-type="inputprocessor"><node-processor-info
	    class-name="examples.e2e.b2c.catalog.webflow.GetCategoryIP"/>
		<event-list>
			<event event-name="success">
				<destination namespace="catalogportlet"
					node-name="getCategory" node-type="pipeline"/>
			</event>
		</event-list>
	</processor-origin>
...

The link.category event uses an input processor named getCategoryIP, which is a Java program that takes a Category ID string from the HTTP request, validates the ID String, creates a CategoryKey based on the ID String, and adds it to the PipelineSession in the session scope. You can view the source file for this input processor in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal
\WEB-INF\src\examples\e2e\b2c\catalog\webflow\GetCategoryIP.java 

Assigning Items to a Category

For the sample application, product items were assigned to categories using the Catalog Management section of the browser-based WebLogic Portal Administration Tools. This section outlines the basic steps. For details, see the WebLogic Portal documentation.

Note: If you have a catalog with hundreds of categories and thousands or tens of thousands of items, making the assignments via the Administration Tools is obviously not practical. An alternative is to use the DBLoader tool provided by WebLogic Portal.

The following steps assume that the server for the e2eDomain is still running. You can run the e2eAppTools Web application and the sample application at the same time. Both Web applications are part of the same e2eApp enterprise application and run in the same domain.

1. In a new browser window, use the following URL format, which starts the WebLogic Portal Administration Tools:

   http://<host>:<port>/e2eAppTools/index.jsp 

   In the URL, substitute for the name of your local machine (localhost) or the remote host name, and substitute the port number on which WebLogic Server is listening. For WebLogic Portal applications, the default port number is 7501. The "e2eAppTools" portion of the URL is case sensitive. For example:

   http://localhost:7501/e2eAppTools/index.jsp 

2. You are prompted for a username and password. These values may be different for your site, but by default they are:

   Username: administrator
   Password: password 

   The login values are case sensitive. If these credentials do not work, please check with the administrator, who may have changed these default values for the administrator account after the sample was installed.

3. On the main Administration Tools page, click the icon in the Catalog Management banner.

4. On the Catalog Management page, click the underlined word Categories.

5. In the Catalog hierarchy display, click the category or subcategory into which you want to add or remove an item. (The categories in this sample application do not have subcategories.)

6. When the category is shown in the hierarchy, click its underlined link. For example, assume that you clicked the AviPro category. Near the top of the page, notice the text:

Editing Category : AviPro
	Enter the appropriate information then click Save.
	To modify the items assigned to this category, please click here.

On the page, click the link in the text "...please click here."

WebLogic Portal displays a screen similar to the following:

 

The Items Assigned to Category text box shows the items that are already in this category. You can search for the item you want to add or remove via three modes: keyword, query-based, or orphaned-items (uncategorized items). The search results are displayed on the left-side text box. To add an item to the category, move the item to the right-side text box by clicking on the right arrow.

For more details, see the WebLogic Portal documentation.

To exit the Administration Tools, close the browser window.

Next Step

To continue the tour, click the image of the AviPix 5000 product item in the category.

 

---

The Product Item Portlet

Details for the product item are loaded from the catalog. Earlier in the process, the design team worked with an administrator to identify each item's larger image in the catalog, plus the longer description. The Catalog Management area of the WebLogic Portal Administration Tool was used to specify the details for the item. The following screen shows a sample resulting display in the portlet:

 

Technical Details for the Product Item Portlet

This section provides details about the processing that occurs on this page.

Introduction

Processing of the Webflow event determined that a link.item event occurred, which resulted in loading the category.jsp file into the centered catalog.jsp portlet.

Notice a sample URL that resulted for the current sample application's page, shown over several lines to improve formatting. The URL on your sample page will be different if you selected another product item:

http://blues:7501/b2cPortal/application
?origin=category.jsp
&event=bea.portal.framework.internal.portlet.event
&pageid=Products&portletid=catalog
&wfevent=link.item
&wlcs_catalog_category_id=0avipix&wlcs_catalog_item_sku=pix5000 

In the sample URL, the origin state is shown in the second, third, and fourth lines. The Webflow event is shown in the last line. A link.item event occurred, which resulted in the page you saw in the sample application. Product items are displayed for (in this example) the 0avipix category that was selected on the prior page. The number zero is an index into the six product categories. And in this example, the specific item selected was the AviPix 5000. Its Stock Keeping Unit (SKU) is pix5000.

Location in Default Webflow

The Webflow for this application resulted in loading the data for the specific product item that was selected on a prior page. The catalog.jsp portlet includes JSP code from different included files, depending on the catalog event that just occurred. For example, the following webflow:getProperty tag in catalog.jsp gets the last catalog event from the pipeline session:

<webflow:getProperty
	id="event"
	type="java.lang.String"
	property="<%= B2CPortalConstants.LAST_CATALOG_EVENT_ATTRIB %>"
	scope="session"
	namespace="portal" />

In the catalog.jsp portlet, the returned event attribute is checked:

...
<%
	}
	else if ( ( event.equals( "link.item" ) ) || 
		( event.equals( "button.item.buy" ) ) ||
		( event.equals( "button.item.save") )   )
	{
%>
...
<jsp:include page="/portlets/catalog/item.jsp" flush="true" />

In this case, the item.jsp file was included into the catalog.jsp portlet because the link.item event occurred.

Dynamic Data Display

In the item.jsp file, we get the item's category from the pipeline session. We then use a series of JSP tags to get properties about the current category and its current item. The following example shows two of the JSP tags:

<catalog:getProperty
	id="itemImage"
	returnType="com.beasys.commerce.ebusiness.catalog.ImageInfo"
	object="<%= item %>"
	propertyName="image"
	getterArgument="<%= new Integer( CatalogItem.LARGE_IMAGE_INDEX 
  %>" />

<catalog:getProperty
	id="currentPrice"
	returnType="com.beasys.commerce.axiom.units.Money"
	object="<%= item %>"
	propertyName="currentPrice" />

Because item.jsp includes a number of buttons (Buy Now, Save for Later), additional work is done. For example, to prepare the Buy Now link, we set up the HTTP request parameters for the graphic:

<catalog:getProperty 
	id="itemKey"
	returnType="com.beasys.commerce.ebusiness.catalog.ProductItemKey"
	object="<%= item %>" 
	propertyName="key" /> 

<% 
	String linkParams = 
		HttpRequestConstants.CATALOG_ITEM_SKU + "=" + itemKey.getIdentifier();
%>

The following code from item.jsp shows how the URL will be constructed for the user who clicks the Buy Now button graphic.

<a href="<portlet:createWebflowURL namespace="catalogportlet" 
	event="button.item.buy" 
extraParams="<%= linkParams %>" />"><img src="<webflow:createResourceURL
resource='<%=imagesPath + "prod_step2_buynow.gif"%>'/>" width="63" height="18"
	alt=""
border="0"></a>

Also in the item.jsp file, as we are preparing to display the item's price, we use an Internationalization (I18N) JSP tag to get the currency type that is defined for the catalog:

<i18n:getMessage bundleName="/commerce/currency"
messageName="<%=currentPrice.getCurrency()
%>"/><%=WebflowJSPHelper.priceFormat(
currentPrice.getValue() )%>

Events

On a prior Products page, when you clicked on a specific product item, it triggered the link.item Webflow event. That resulted in loading the item.jsp file into the catalog.jsp portlet.

All the catalog events are defined in the following Webflow file for the catalog.jsp portlet:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project
\application-sync\webapps\b2cPortal\catalogportlet.wf 

One of the events defined in catalogportlet.wf is:

<event event-name="link.item">
	<destination namespace="catalogportlet"
		node-name="getItemCategoryIP"
			node-type="inputprocessor"/>
</event>
...

The link.item event uses an input processor named getItemCategoryIP, which is a Java program that takes a SKU string from the HTTP request, validates the SKU string, creates a ProductItemKey based on the SKU String, and adds it to the PipelineSession in the session scope. You can view the source file for this input processor in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal\
WEB-INF\src\examples\e2e\b2c\catalog\webflow\GetItemCategoryIP.java 

Adding or Modifying Product Item Data

In a similar fashion to the way category data is added to the catalog, specific item data is added using the WebLogic Portal Administration Tools. If you have not read about this administration task, please see the section Assigning Items to a Category.

Next Step

To continue the tour, scroll down on the Products page and select the AviPix 5000 item from the Product Evaluator portlet. Click the Go button and view the ratings returned by the Web service and displayed in the portlet. Then read the next section.

 

---

The Product Evaluator Portlet and Web Service

After you selected a product item in the Product Evaluator portlet and then clicked the Go button, the portlet was refreshed with the results of a product rating Web service. (In the sample, you may need to scroll down to see the results.)

During the application design and development cycle, we used BEA WebLogic Workshop to create a product rating Web service. We then used the Portlet Wizard to generate the interfaces for this Web services.

Finally, we included the interfaces code into the Product Evaluator portlet and then completed the presentation coding based on earlier design prototype work with a graphic artist. We also packaged the Web service as a Web application within the e2eApp, as explained in Web Services Tour.

Technical Details for the Product Evaluator Portlet

The Product Evaluator portlet, evaluator.jsp, appears near the bottom of Products pages. Initially the portlet displays a discount ad via an included step1.jsp file. When the Products page is refreshed and the Product Evaluator portlet determines that specific product items have been loaded, it includes a step2.jsp file that allows the logged-in user to get product ratings. This portlet is interesting because it uses a Web service that we created earlier with WebLogic Workshop to look-up the product ratings.

WebLogic Workshop is a visual development environment that makes it easy for application developers and J2EE experts alike to build and deploy enterprise-class web services. The product is comprised of two major components:

1. A design-time tool that lets developers write Java code to implement Web services.

2. A run-time framework that provides the Web services infrastructure, testing, debugging, and deployment environment for applications.

The meeting place between the design-time tool and the run-time framework is the Java Web Service (JWS) file and any associated control (CTRL) files. JWS files are standard Java files with annotations (using the Javadoc syntax) to express additional functionality. Annotations are used to display the Web service and its properties graphically. And the annotations are used by the framework to generate the EJB and J2EE code to execute the Web service. Control files typically include a collection of method definitions that allow you to easily access a resource such as a database or another Web service.

Another key file is the Web Service Description Language (WSDL) file that describes the Web service. WSDL files describe all the methods a Web service exposes (in the form of XML messages it can accept and send), as well as the protocols over which the Web service is available. The WSDL file provides all the information a client application needs to use the Web service.

In development, we used a browser-based test form provided by WebLogic Workshop to check whether the expected results were being returned by the Web service. To set this up, we deployed a workshop webapp as part of the e2eApp enterprise application. The workshop webapp contains the productEvalWSC and paymentWS Web services that we created with WebLogic Workshop. Consequently you can run the WebLogic Workshop test pages for these Web services in the server instance for the e2eDomain. The test pages are browser-based. For example, in a new browser window, open:

http://localhost:7501/workshop/productEvalWSC/EvalProduct.jws 

The URL is case sensitive. For a complete walk-through of the Product Evaluator Web service's test form screens, please refer to Web Services Tour. The following sample screen shows only one of the test forms in mid-conversation with the Web service. On a prior test form screen, we specified pix1000 as the productId (SKU) on which to get evaluation data. In the following screen, we just ran a test of the getReliabilityRating method:

 

Notice the Web service response is the integer 2. On the Product Evaluator portlet, this results in displaying two out of five possible stars. For example:

 

After you create a Web service with WebLogic Workshop, you can use the Portlet Wizard that comes with WebLogic Workshop, point to the WSDL file, and generate the client interfaces. For a description of this process, see the Web Services Tour, which is also available from the sample application's Introduction page.

Determine Items to Display

The Product Evaluator portlet's JSP file is:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal
\portlets\evaluator\evaluator.jsp 

It initially includes the step1.jsp file, which displays a discount ad:

 

When an event from another portlet on the Products page allows the Product Evaluator portlet to determine that specific product item data is present, the Product Evaluator portlet includes the step2.jsp file that can get product ratings. The first view of the step2.jsp portlet contains one or more items on the pull-down menu. For example:

 

After you select an item from the portlet's menu and click the Go button, the step2.jsp file in the portlet is refreshed with the results returned from the Web service. For example, if you selected the AviPix 5000 camera:

 

The first action taken by the evaluator.jsp portlet is get the last catalog event from the pipeline session:

<webflow:getProperty
	id="event"
	type="java.lang.String"
	property="<%= B2CPortalConstants.LAST_CATALOG_EVENT_ATTRIB %>"
	scope="session"
	namespace="portal" />

If the catalog event is null, it displays the static discount ad:

<jsp:include page="/portlets/evaluator/step1.jsp" flush="true" /> 

That jsp:include tag brings in the graphic you saw near the bottom of the initial Products page:

If the catalog event is not null, we determine which event type occurred. If the event was link.category, button.category.buy, or button.category.save, we set the evalEvent to "browse". If the event was link.item, button.item.buy, or button.item.save, we set the evalEvent to "detail". Finally, if the event was button.search, button.search.buy, or button.search.save, we set evalEvent to "search". The value is significant to the portlet because it determines which item or items to list on the product rating pull-down menu, and which rating data to get from the Web service.

We use a webflow:setProperty JSP tag to pass the evalEvent value to the pipeline:

<webflow:setProperty
	property="B2CPortalConstants.PRODUCT_EVAL_ATTRIB"
		scope="request"
			value="<%=evalEvent%>"
			namespace="portal"/>

Using the Web Service

Evaluator.jsp then includes the step2.jsp portlet. If the Product Evaluator portlet is posting to itself, it will display the results of the productEvalIP input processor with the select list focused on the requested product item. Otherwise, it will display an unselected list of product items and no rating information (yet).

The step2.jsp file contains the Web services includes:

<%@ page import="org.openuri.www.* "%>
<%@ page import="org.openuri.www.x2002.x04.soap.conversation.* "%>
<%@ page import="java.io.IOException" %>
<%@ page import="java.rmi.RemoteException" %>
<%@ page import="productEvalWSC.EvalProduct_Impl" %>
<%@ page import="productEvalWSC.EvalProductSoap" %> 

We get the evalEvent value from the pipeline session:

<webflow:getProperty
	id="evalEvent"
		type="java.lang.String"
		property="B2CPortalConstants.PRODUCT_EVAL_ATTRIB"
		scope="request"
		namespace="portal" />

In step2.jsp, we then use a view iterator to get the items for a category or a specific item. If the user selects an item and clicks the Go button, we invoke the EvalProduct.jws Web service that we defined in WebLogic Workshop. We also used the Portlet Wizard to create the Web services interface code, which includes referencing the Web service's WSDL.

<%
	if (request.getParameter("origin").equals("step2.jsp") &&
		request.getParameter("wfevent").equals("button.evaluator.go"))
	{
			String productEvaluation = request.getParameter("productEvaluation");
%>
<!-- Portlet Wizard generated web services interfaces code -->

<%  
	EvalProduct_Impl         m_Proxy = null;
	EvalProductSoap     m_ProxySoap = null; 
	String m_conversationID = session.getId();
	String comments = "";
	int valueRating = 0;
	int reliabilityRating = 0;
	int overallRating = 0;
	boolean webServiceAvail = true;

	String serverNamePort = "http://" + request.getServerName() + ":"
		+ request.getServerPort() + "/";

	try
	{
		m_Proxy = new EvalProduct_Impl(serverNamePort +
			"workshop/productEvalWSC/EvalProduct.jws?WSDL");
	}
	catch (IOException ex)
	{
		ex.printStackTrace();
		webServiceAvail = false;
	}
		m_ProxySoap = m_Proxy.getEvalProductSoap();

	try
	{
		// Set up the header objects we'll need
		StartHeader startHeader = 
			new StartHeader( m_conversationID, 
				serverNamePort
				+ "workshop/productEvalWSC/EvalProduct.jws");
				ContinueHeader continueHeader = 
				new ContinueHeader( m_conversationID );
		// Start the conversation
		GetEvaluation getEvaluation = new GetEvaluation(productEvaluation);

		if (m_ProxySoap.getEvaluation(getEvaluation,
			startHeader).getGetEvaluationResult().equals("SUCCESS"))
		{
		// Continue the conversation
		comments =  m_ProxySoap.getComments(null,
				continueHeader).getGetCommentsResult();

			// Continue the conversation
				reliabilityRating = m_ProxySoap.getReliabilityRating(null,
					continueHeader).getGetReliabilityRatingResult();

			// Continue the conversation
				overallRating = m_ProxySoap.getOverallRating(null,
					continueHeader).getGetOverallRatingResult();

			// Continue the conversation
				valueRating = m_ProxySoap.getValueRating(null,
					continueHeader).getGetValueRatingResult();
	}
			...

See the step2.jsp code for additional coding, including the error handling. After receiving the product rating from the Web service, we then display the results in the portlet as part of the step2.jsp work.

For more information about how we used WebLogic Workshop and then Portlet Wizard during the development of the Product Evaluator portlet, see the Web Services Technical Tour that is available from this sample's Introduction page.

Next Step

To continue the tour, click the Buy Now button that appears next to the AviPix 5000 product item.

 

---

The Buy Now Button and Inventory Checks Via WebLogic Integration AI

The Buy Now button triggered a Webflow event that added the item to the Current Items list in the summarycart portlet ("My Shopping Cart") on the refreshed page. If you click Buy Now multiple times for the same product item, the quantity column is updated. The full Shopping Cart, with price and discount information, is not seen until you click the Checkout button or the Shopping Cart tab. In the following sample screen, the AviPix 5000 camera was added to a cart that already included the AviPrint 200 camera. Your cart's Current Items and Saved Items lists in the sample application may be different.

 

Technical Details for the Buy Now Button

The Buy Now button can be selected for a specific item when the user is browsing a category page, or an item's detail page, or a search results page. The event type, depending on the page, could be one of the following, as defined in the catalogportlet.wf Webflow file:

• button.category.buy
• button.item.buy
• button.search.buy

When the Buy Now button is selected, the sample application performs an inventory check to make sure the order can be fulfilled before adding the item to the user's shopping cart. The database includes an inventory table that keeps data about the current, minimum, and maximum inventory for a product item. The inventory table is accessed in read-only mode via the Application Integration (AI) component of WebLogic Integration.

For example, this check occurs when you click the Buy Now button on several portlets in this b2cPortal's Products page. An inventory check is also performed if user tries to update the quantity of the item already in the shopping cart, by entering a new value on the Shopping Cart's step1.jsp portlet, and then clicking the RECALCULATE button.

Before we discuss the inventory check's implementation, let's look at the way several portlet pages set up the Buy Now link. For example, from the item.jsp file, which is included into the catalog.jsp portlet:

<a href="<portlet:createWebflowURL namespace="catalogportlet"
	event="button.item.buy"
extraParams="<%= linkParams %>" />"><img src="<webflow:createResourceURL
resource='<%=imagesPath + "prod_step2_buynow.gif"%>'/>" width="63" height="18" 
	alt=""
border="0"></a> 

In the HTML subset above, if the user clicks the Buy Now image, it will generate an event called button.item.buy for the transition to the next page. The linkParams parameters contain the information about the specific item. This data was collected earlier in the item.jsp processing by a series of <catalog:getProperty...> JSP tags, followed by:

<% 
	String linkParams = 
		HttpRequestConstants.CATALOG_ITEM_SKU + "=" + itemKey.getIdentifier();
%>

Inventory Checks

The inventory check is implemented in the CheckInventoryPC pipeline component. You can find its source file in the following location:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\src\
examples\e2e\b2c\shoppingcart\pipeline\CheckInventoryPC.java 

This pipeline component checks the Inventory and places an additional value. In this sample application, it is invoked every time the shopping cart content is changed. In your production environment, you may want to do it differently for performance reason, based on your business logic. For example, you may want to check inventory only when the item is placed in the shopping cart the first time, by keeping the actual quantity in stock, and showing different messages based on the difference between what is in stock and what is in the shopping cart.

The CheckInventoryPC pipeline component works with an InventoryProvider SPI. Its source files are in the following location:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\src\examples\e2e\common\inventory\spi\*.java 

This SPI is a stateless session bean that includes the checkInventory remote method. This method:

• Uses Application Integration (AI) to make a call via a pre-configured AI service. This service is used to query the inventory table.
• Calls an XML Helper to parse the response from AI.
• Returns available inventory (int) based on the response.

Next Steps

To continue the tour, please browse through the product catalog and add about four or five product items to your cart's Current Items list and Saved Items list. Having a lot of items in the cart will make it easier to try a number of options on the Shopping Cart page.

As part of that exercise, use the Search portlet. For example, enter the keyword camera and click the Go button. On the search results page, add some of the items to the Current Items list and Saved Items list. Then read the following explanation about the Search Results portlet.

 

---

The Search Results Portlet

The search feature provided with the product catalog is based on keywords that an administrator assigned to product items. The Catalog Management area of the WebLogic Portal Administration Tools was used to make the assignments. The development team and administrator can work together to determine the best keywords for each item. For information about the existing keywords, plus information about the Webflow events associated with the search Go button, and other events, read this section. The following screen shows a portion of the search results portlet's display after entering "camera" and clicking Go:

 

Technical Details for the Search Results Portlet

This section provides details about the processing that occurs on this page.

Introduction

The search_results.jsp portlet presents information about product items that resulted from the keyword-based search. The customer can then browse through the results. Assembling the search results was accomplished using a combination of portlet, webflow, catalog, and i18n (internationalization) JSP tags.

For a match to occur, the customer must have entered a keyword that had already been associated with one or more product items. The assignment of keywords for product items was done by an administrator in the Catalog Management area of the Weblogic Portal Administration Tools. Information about keywords and the Administration Tools appears later in this discussion.

Note: WebLogic Portal commerce services allow you to use query-based searches, in addition to keyword searches. To simplify the scope of this sample application, only a keyword-based search has been implemented here. For details about query-based searches, see the WebLogic Portal documentation.

By default, the search_results.jsp portlet file resides in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal\portlets\catalog 

The searchform.jsp portlet, which provides the search input box, the Go button's graphic, and processing, resides by default in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal\portlets\search 

As you run this sample application, it is important to understand that as a developer you are primarily interested in the JSP code before it was rendered by the browser. That's why the code fragments in this section, and the View Code link above, describe and show you the pre-rendered JSP file for a particular portlet.

Location in the Default Webflow

Customers see the search_results.jsp portlet on the Products page after they enter a keyword in the searchform.jsp portlet and click the Go button. From the search_results.jsp portlet, customers can:

• View more details about a particular item shown in the results list (which loads the items.jsp portlet, which includes content from the itemdetails.jsp portlet)
• Add a product item shown in the search results list to their shopping cart by clicking the Buy Now or Save for Later buttons.

WebLogic Platform provides the E-Business Control Center (EBCC), a graphical tool that simplifies complex tasks such as rule definition, Webflow editing, and portal creation and management. The EBCC Webflow Editor and Pipeline Editor are designed to help you create, modify, and validate Webflow and Pipeline XML configuration files. If you want, you an start the EBCC and examine the existing Webflow and Pipeline definitions for the e2eApps.

For example, complete the following steps:

1. On a Windows system, go to the Start menu and select Programs —> BEA WebLogic Platform 7.0 —> WebLogic Portal 7.0 —> E-Business Control Center.

2. Click the Open Project icon on the upper left side of the screen. For example:

   

   
    

3. In the Open Project dialog window, navigate to the following directory:

   weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project 

4. Select and open the e2eApp-project.eaprj project file that was installed there.

5. In the EBCC Explorer window, select the Site Infrastructure tab near the bottom of the window. Then click the Webflows/Pipelines icon — you may need to scroll down to see it. The EBCC displays a screen similar to the following:

   

   
    

6. Click the plus sign next to b2cPortal and then double-click the searchportlet Webflow item. The Webflow editor displays a large graphical representation of the searchportlet Webflow components. You can close the adjacent Explorer window if you want more screen space to view the components. The Webflow Editor and Pipeline Editor contain many options, not described here. However, you can read a detailed description of the editors in the section Setting up Portal Navigation in the WebLogic Portal Development Guide.

Events

On a page that preceded the display of the search results, the user entered a keyword in the search input box and then clicked the Go button. This took place in the searchform.jsp portlet. (Another Webflow scenario is that you returned to this Products page by clicking the Product tab from another page, and the Products page was refreshed with the latest catalog event, which happened to be search results. In either event, this explanation will focus on the original search-related event.) The form defined in the portlet includes the following:

A table cell containing the search input box.

<input name="<%=HttpRequestConstants.CATALOG_SEARCH_STRING%>" type="text" class="searchPortlet" size="27"> 

A scriptlet that defines additional Webflow parameters to display the results on the Products page (because the search can be submitted from other portal pages) and executes the search portlet's Webflow:

<%
String formParams= 
	PortalAppflowConstants.PORTLET_WEBFLOW_EVENT_PARAMETER + "=" + "button.search"
   + "&" +
	PortalAppflowConstants.PAGE_PARAMETER + "=" +
	B2CPortalConstants.PRODUCTS_PAGE_NAME + "&" +
	PortalAppflowConstants.PORTLET_PARAMETER + "=" + "search" ;
%>

And the form definition itself:

<form method="POST" action="<webflow:createWebflowURL
event="bea.portal.framework.internal.portlet.event" origin="searchform.jsp"
extraParams="<%= formParams %>"/>" onsubmit="return ValidateSearchForm(this)" > 

The event button.search is defined separately as using keywordSearchIP (an input processor) in the searchportlet namespace.

This definition is in the searchportlet.wf (Webflow) file that resides in:

BEA_HOME\weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project\application-sync\webapps\b2cPortal 

KeywordSearchIP.java takes a keyword search String from the HTTP request, validates the search String, creates a KeywordQuery based on the search String, adds it to the PipelineSession in the session scope, and clears the PipelineSession of any previous search results. If a keyword search String is not supplied, the PipelineSession will be examined for previous cached search results. If previous results exist and are valid, the results are left in the PipelineSession.

You can view the source file for this input processor in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal
\WEB-INF\src\examples\e2e\b2c\catalog\webflow\KeywordSearchIP.java 

Once the search results are available, the search_results.jsp portlet page is displayed. See the next section for more on the dynamic data display.

Now let's look at events defined within the search_results.jsp, for subsequent processing:

• The link.item event is triggered when the customer either clicks the product item's image (for example, an image of an AviPix 3000 camera) or the item's Details button image.
• The button.search.buy event is triggered when the customer clicks the Buy Now button next to a product item in the search results.
• The button.search.save event is triggered when the customer clicks the Save for Later button next to a product item in the search results.

The following line from search_results.jsp (pre-rendering by the browser) shows how the coding was set up for the Details button on the portlet:

<a href="<portlet:createWebflowURL namespace="catalogportlet" event="link.item" extraParams="<%=linkParams%
<" />"><img src="<webflow:createResourceURL resource='<%=imagesPath + "prod_step2_details.gif"%>'/> 

In the example above, the href link is constructed using a webflow:createResourceURL JSP tag. Notice that the Webflow namespace is catalogportlet. Let's look at the catalogportlet.wf (Webflow) file in:

BEA_HOME\weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project\application-sync\webapps\b2cPortal 

In catalogportlet.wf, the event named link.item identifies the following input processor: storeCatalogEventIP. This input processor is used to store the current portlet event as a session-scoped pipeline attribute. The portlet uses this information to decide which view of the catalog to display.

For example, if on the search results portlet you clicked the Details button next to an AviPix 1000 camera, notice how the value for the webflow:createResourceURL parameter results in the following. (The URL shown here spans several lines to improve the formatting.)

http://localhost:7501/b2cPortal/application?origin=search_results.jsp
&event=bea.portal.framework.internal.portlet.event
&pageid=Products&portletid=catalog
&wfevent=link.item&wlcs_catalog_item_sku=pix1000 

Dynamic Data Display

In search_results.jsp, the matched results (if any) will be retrieved from the pipeline session. For example:

<webflow:getProperty
	id="searchResults"
	type="com.beasys.commerce.ebusiness.catalog.ViewIterator"
	property="<%= PipelineSessionConstants.CATALOG_SEARCH_RESULTS%>"
	scope="session"
	namespace="portal" />

We check to see if there are search results:

<% 
	if ( ( searchResults != null ) && ( searchResults.size() > 0 ) )
	{
%>

If there are search results, we iterate through the catalog, retrieving information about each product item that matched the keyword. For example:

<catalog:iterateViewIterator
	id="item"
	returnType="com.beasys.commerce.ebusiness.catalog.ProductItem"
	iterator="<%= searchResults %>">

	<catalog:getProperty
		id="itemImage"
		returnType="com.beasys.commerce.ebusiness.catalog.ImageInfo"
		object="<%= item %>"
		propertyName="image"
		getterArgument="<%= new Integer(CatalogItem.SMALL_IMAGE_INDEX
       ) %>" />

Other data from the catalog is similarly retrieved for each product item: currentPrice, (short) description, and productItemKey (SKU).

We then set up the HTTP request parameters for this item's detail link.

Data for each matched product item is cycled through the view iterator until there are no more items. We also reset the search results view iterator in case the portlet is refreshed.

If there are no matches found for the keyword entered on searchform.jsp, we use in search_results.jsp the i18n:getMessage JSP tag provided by WebLogic Portal. I18N is an abbreviation for Internationalization, meaning the process of setting up application code so that language-specific files can be added or modified, to customize the message text for non-English customers. For example, in search_results.jsp, we have:

<i18n:getMessage messageName="noResults" bundleName="search_results" /> 

The search_results.properties file, which is in the same directory as search_results.jsp, contains:

noResults=No matches found. 

Administration Tasks for Keyword-based Searches

The search function for this sample application uses keywords that were previously defined in the Catalog Management area of the WebLogic Portal Administration Tools. This section explains how to set up keywords for items.

The following steps assume that the server for the e2eDomain is still running. You can run the e2eAppTools Web application and the sample application at the same time. Both Web applications are part of the same e2eApp enterprise application and run in the same domain.

1. In a new browser window, use the following URL format, which starts the WebLogic Portal Administration Tools:

   http://<host>:<port>/e2eAppTools/index.jsp 

   In the URL, substitute for the name of your local machine (localhost) or the remote host name, and substitute the port number on which WebLogic Server is listening. For WebLogic Portal applications, the default port number is 7501. The e2eAppTools portion of the URL is case sensitive. For example:

   http://localhost:7501/e2eAppTools/index.jsp 

2. You are prompted for a username and password. These values may be different for your site, but by default they are:

   Username: administrator
   Password: password 

   The login values are case sensitive. If these credentials do not work, please check with the administrator, who may have changed these default values for the administrator account after the sample was installed.

3. On the main Administration Tools page, click the icon in the Catalog Management banner.

4. On the Catalog Management page, click the underlined word Items.

5. In the Keywords input box, enter the following keyword: camera

6. Click one of the underlined search results. For example, click AviPix 5000. (Warning: do not click the red X icon, which deletes the item from the catalog. Keep in mind that you are using the administration pages for the catalog data.)

7. On the resulting page, click the Edit icon that is on the same line with "Item Core Attributes."

Some of the values on the Edit Item Information page will be familiar if you have browsed through the sample application's catalog. For example, notice the short description and long descriptions values. Also notice how the small and large graphics' location was specified (near the bottom of the page). Initially the data records were loaded from scripts or using the DBloader program provided with WebLogic Portal. These catalog administration pages provide a view into the values and the ability to subsequently change values, if desired. (Most organizations will run catalog data scripts again, instead of using the Administration Tools to modify values.)

The search keywords can be viewed or modified on this Edit Item Information page. In the sample application, we defined a set of keywords for each product item in the catalog. Scroll down the page to find the Keywords input box and the set of existing keywords.

The following graphic shows a portion of the page:

 

Existing keywords are: avipix, camera, cameras, consumer, digital, pix.

The administrator can work with the development team to determine additional keywords to help site visitors find product items.

For more information, see the WebLogic Portal documentation.

To exit the Administration Tools, close the browser window.

Next Steps

If your search returned "No matches found" enter one of the existing keywords such as camera in the search input box. Again, the existing keywords are avipix, camera, cameras, consumer, digital, pix. Then click the Go button.

To continue the tour, add several items to your cart from among the search results. Click the Save for Later button for an item as the last event before moving on to the next section.

 

---

The Save for Later Button

The Save for Later button triggered a Webflow event that added the item to the Saved Items list in the summarycart portlet ("My Shopping Cart") on the refreshed page.

 

Technical Details for the Save for Later Button Event

The Save for Later button can be selected for a specific item when the user is browsing a category page, or an item's detail page, or a search results page. The event type, depending on the page, could be one of the following, as defined in the catalogportlet.wf Webflow file:

• button.category.save
• button.item.save
• button.search.save

When the Save for Later button is selected, the product item is moved into the user's Saved Items list. Several portlet pages set up the Save for Later link in the following way. This example is from the item.jsp file, which is included into the catalog.jsp portlet:

<a href="<a href="<portlet:createWebflowURL namespace="catalogportlet"
event="button.item.save" extraParams="<%= linkParams %>" />">
<img src="<webflow:createResourceURL resource='<%=imagesPath
+ "prod_step2_savelater.gif"%>'/>" width="72" height="18" alt="" border="0"></a>

In the HTML subset above, if the user clicks the Save for Later image, it will generate an event called button.item.save for the transition to the next page. The linkParams parameters contain the information about the specific item. This data was collected earlier in the item.jsp processing by a series of <catalog:getProperty...> JSP tags, followed by:

<% 
	String linkParams = 
		HttpRequestConstants.CATALOG_ITEM_SKU + "=" + itemKey.getIdentifier();
%>

Note that an inventory check is not done when you click Save for Later on a Products page. However, an inventory check is done on a shopping cart page if you click Add to Cart for an item that is currently in the Saved List.

Next Step

To continue the tour, click the Checkout button to proceed to the My Shopping Cart step1.jsp portlet.

 

---

The My Shopping Cart Portlet, Step1.jsp

Having clicked the Checkout button in the summarycart portlet on a Products page, the portal application's Webflow resulted in the display of the step1.jsp checkout portlet on this Shopping Cart page. A graphic, check_step1_header.gif, was loaded to help customers understand where they are in the order fulfillment process. If there are items in the cart, price and discount information for the order are shown. Shown are prices for the unit, a 10% unit discount (for AviPix Consumer Cameras only), a 15% total order discount for orders over $100, and a net total. If there are no items in the cart, the string "You do not have any item in your shopping cart" is displayed.

 

Technical Details for the Step1.jsp Portlet

This section provides details about the processing that occurs on this page.

Introduction

The shopping cart pages present a series of portlets that allow the customer to checkout and complete their order. At any time during the checkout process, an inventory check is done if the user's shopping cart changes; this inventory check uses a CheckInventoryPC pipeline component that works with a InventoryProvider SPI, which in turn uses the Application Integration (AI) component of WebLogic Integration to ensure that the order can be fulfilled.

On subsequent shopping cart pages, when the order is submitted, a pipeline component calls a Payment Web service to authorize the credit card purchase. We created the Web service in WebLogic Workshop.

After the confirmed order is persisted to the database, another pipeline component converts the order to an XML representation, and places it on a Java Message Service (JMS) queue. The WebLogic Integration Business Process Management (BPM) event processor dequeues the order and processes it.

The shopping cart or "checkout" portlets are in the following location:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal
\portlets\checkout\* 

• step1.jsp, the current portlet, provides the detailed My Shopping Cart data, presenting the current and saved items. It also computes and displays 10% line-item discounts for any AviPix Consumer Camera category items, and a 15% total order discount for orders over $100. Information about the step1.jsp processing is contained in this page's Technical Details section.
• step2.jsp provides the Checkout data, presenting pre-set billing and shipping information for logged-in user Rachel Adams. Information about the step2.jsp processing is contained in the section The Checkout Portlet, Step2.jsp.

Note: To keep the scope of this sample application simple, we did not include portlets that would allow the user to enter or modify their credit card or shipping information. However, WebLogic Portal supports this type of processing, and provides a separate sample to demonstrate it. Please refer to the Commerce and Campaign Features Tour in the WebLogic Portal documentation.

• step3.jsp provides the (pre-submit) Order Submission page, showing a summary of the order about to be submitted. When the user clicks the Submit Order, credit card authorization is performed via a Payment Web service that we created in WebLogic Workshop. Information about the step3.jsp processing is contained in the section The Order Submission Portlet, Step3.jsp.
• step4.jsp provides the Order Confirmation page. The confirmed order is converted by a pipeline component to an XML representation. The pipeline component places this copy of the order on a Java Message Service (JMS) queue. The WebLogic Integration BPM event processor dequeues the order and processes it. Information about the step4.jsp processing is contained in the section The Order Confirmation Portlet, Step4.jsp.

Step1.jsp Processing, Including Inventory Checks and Discounts

The step1.jsp My Shopping Cart portlet uses JSP tags to get the shopping cart, saved shopping cart, and inventory counts from the pipeline session:

<webflow:getProperty id="shoppingCart" property="<%=PipelineSessionConstants.SHOPPING_CART%>"
type="com.beasys.commerce.ebusiness.shoppingcart.ShoppingCart" scope="session" namespace="portal" />
<webflow:getProperty id="savedShoppingCart" property="<%=PipelineSessionConstants.SAVED_SHOPPING_CART%>"
type="com.beasys.commerce.ebusiness.shoppingcart.ShoppingCart" scope="session" namespace="portal" />
<webflow:getProperty id="inventoryCount" property="<%=B2CPortalConstants.INVENTORY_CHECK%>" type="int[]"
scope="session" namespace="portal" />

After iterating through all the shopping cart lines, we determine if a message is needed about low inventory. For example:

<% if ( (inventoryCount != null) && (inventoryCount[inventoryIndex]
<= shoppingCartLine.getQuantity() ) ) { outOfStock = true; %><%=
shoppingCartLine.getProductItem().getName() %> -
<i><i18n:getMessage bundleName="checkout"
messageName="over_inventory"/></i> - <% ;}
else { %><%= shoppingCartLine.getProductItem().getName() %> <% } %> 

The inventory check is implemented in the CheckInventoryPC pipeline component. You can find its source file in the following location:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\src
\examples\e2e\b2c\shoppingcart\pipeline\CheckInventoryPC.java 

This pipeline component checks the Inventory and places an additional value. In this sample application, it is invoked every time the shopping cart content is changed. For example, the step1.jsp page includes a Quantity field with an associated Recalculate button. If the user changes the quantity in this portlet, the inventory is checked again.

Note: In your production environment, you may want to do it differently for performance reason, based on your business logic. For example, you may want to check inventory only when the item is placed in the shopping cart the first time, by keeping the actual quantity in stock, and showing different messages based on the difference between what is in stock and what is in the shopping cart.

The CheckInventoryPC pipeline component works with an InventoryProvider SPI. Its source files are in the following location:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\src\examples\e2e\common\inventory\spi\*.java 

This SPI is a stateless session bean that includes the checkInventory remote method. This method:

• Uses the WebLogic Integration Application Integration (AI) component to make a call via a pre-configured AI service. This service is used to query the inventory table.
• Calls an XML Helper to parse the response from AI.
• Returns available inventory (int) based on the response.

In the inventory check, notice the over_inventory message name. To support internationalization (I18N) efforts, it is defined in a separate properties file, checkout.properties, as:

# If the inventory cannot fulfill the quantity requested
over_inventory=out of stock

The step1.jsp portlet also computes the amount of a line-item discount to offer. In this sample, we elected to give a 10% discount to any cameras in the AviPix Consumer Camera category. A total order discount is also computed for orders that exceed $100.

A number of events can occur on the step1.jsp page including:

• button.updateShoppingCartQuantities, if the user changes the quantity field and then clicks the RECALCULATE button.
• button.deleteItemFromShoppingCart, if the user clicks the DELETE button in the Current Items list.
• button.moveItemToSavedList, if the user clicks the Save for Later button in the Current Items list.
• button.deleteItemFromSavedList, if the user clicks the DELETE button in the Saved Items list.
• button.moveItemToShoppingCart, if the user clicks the Add to Cart button in the Saved Items list.
• link.next, if the user clicks the Checkout button.

Information about those events is presented in the technical details sections for those events after you click one of those buttons.

Note: If the user clicks the Continue Shopping button on the step1.jsp portlet, we use a JSP tag to take the user to the Products page:

<a href="<portal:createPortalPageChangeURL  pagename="Products"	/>">
<img src="<webflow:createResourceURL
resource='<%=imagesPath + "check_step1_continue.gif"%>'/>"
width="94" height="18" alt="" border="0"></a>

Next Step

To continue the tour, click the Add to Cart button next to an item on the Saved Items list.

The Add to Cart Button in Saved Items List

Having clicked the Add to Cart button in the Shopping Cart step1.jsp portlet's "Saved Items" list, the page was refreshed with updated data for the same portlet. The Current Items list now contains the product item you added to the cart. Prices are shown for the unit, a 10% unit discount for items over $100.00, a 15% total order discount for orders over $100, and a net total. The item you selected on the prior page is no longer in the Saved Items list.

The following sample screen may show items that are different from your cart.

 

Technical Details the Add to Cart Button in the Saved Items List

The step1.jsp My Shopping Cart page includes an event named button.moveItemToShoppingCart. It is triggered when the user clicks the Add to Cart button in the shopping cart's Saved Items list. On the refreshed page, the item is moved from the Saved Items list to the Current Items list.

You can find the step1.jsp portlet file in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal
\portlets\checkout\* 

An example from step1.jsp:

<a href="<portlet:createWebflowURL namespace="checkoutportlet"
event="button.moveItemToShoppingCart"
extraParams="<%= extraParams %>" />">
<img src="<webflow:createResourceURL
resource='<%=imagesPath + "check_step1_add.gif"%>'/>"
width="52" height="13" alt="" border="0"></a> 

The extraParams parameter contains data about the product item, collected already in step1.jsp:

<%
	extraParams = HttpRequestConstants.CATALOG_ITEM_SKU + "=" 
			shoppingCartLine.getProductItem().getKey().getIdentifier();
%>	  

The button.moveItemToShoppingCart event is defined in the checkoutportlet.wf Webflow file, which resides in the following directory:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project
\application-sync\webapps\b2cPortal 

The event is:

<event event-name="button.moveItemToShoppingCart">
	<destination namespace="checkoutportlet"
	node-name="shoppingcart_MoveProductItemToShoppingCartIP"
	node-type="inputprocessor"/>
</event>

The pipeline component is MoveProductItemToShoppingCartPC. You can view its Java source file in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\src
\examples\e2e\b2c\shoppingcart\pipeline 

MoveProductItemToShoppingCartPC removes a ProductItem from a customer's list of saved items and adds it to their shopping cart. The customer's login id is specified by the PipelineSessionConstants.USER_NAME attribute in the Pipeline Session. The SKU of the item to move is specified by the PipelineSessionConstants.CATALOG_ITEM_SKU pipeline session attribute. The PipelineSessionConstants.SAVED_SHOPPING_CART and PipelineSessionConstants.SHOPPING_CART pipeline session attributes, and the WLCS_SAVED_ITEM_LIST table are updated to reflect the change.

Next Step

To continue the tour, click the REMOVE button next to an item on the Saved Items list.

The REMOVE Button in the Saved Items List

Having clicked the REMOVE button in the shopping cart's step1.jsp portlet's Saved Items list, the page was refreshed with updated data for the same portlet. The product item you selected has been removed from the Saved Items list.

Technical Details for REMOVE Button in the Saved Items List

The step1.jsp My Shopping Cart page includes an event named button.deleteItemFromSavedList. It is triggered when the user clicks the DELETE button in their shopping cart's Saved Items list. On the refreshed page, the item no longer exists on the Saved Items list.

You can find the step1.jsp portlet file in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal
\portlets\checkout\* 

An example from step1.jsp:

<a href="<portlet:createWebflowURL namespace="checkoutportlet"
event="button.deleteItemFromSavedList"
extraParams="<%= extraParams %>" />">
<img src="<webflow:createResourceURL
resource='<%=imagesPath + "check_step1_remove.gif"%>'/>"
width="42" height="13" alt="" border="0"></a> 

The extraParams parameter contains data about the product item, collected already in step1.jsp:

<%
	extraParams = HttpRequestConstants.CATALOG_ITEM_SKU + "=" +
			shoppingCartLine.getProductItem().getKey().getIdentifier();
%>	  

The button.deleteItemFromSavedList event is defined in the checkoutportlet.wf Webflow file, which resides in the following directory:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project\application-sync\webapps\b2cPortal 

The event is:

<event event-name="button.deleteItemFromSavedList">
	<destination namespace="checkoutportlet"
	node-name="shoppingcart_DeleteProductItemFromSavedListIP"
	node-type="inputprocessor"/>
</event>

The pipeline component is DeleteProductItemFromSavedListPC. You can view its Java source file in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\src\examples\e2e\b2c\shoppingcart\pipeline 

DeleteProductItemFromSavedListPC removes a ProductItem from a customer's list of saved items. The customer's login id is specified by the PipelineSessionConstants.USER_NAME attribute in the Pipeline Session. The SKU of the item to delete is specified by the PipelineSessionConstants.CATALOG_ITEM_SKU pipeline session attribute. The PipelineSessionConstants.SAVED_SHOPPING_CART and PipelineSessionConstants.SHOPPING_CART pipeline session attributes, and the WLCS_SAVED_ITEM_LIST table are updated to reflect the change.

Next Step

To continue the tour, click the REMOVE button next to an item on the cart's Current Items list.

The REMOVE Button on the Current Items List

Having clicked the REMOVE button in the shopping cart step1.jsp portlet's Current Items list, the page was refreshed with updated data for the same portlet. The product item and its prices have been removed from the cart.

Technical Details for REMOVE Button on the Current Items List

The step1.jsp My Shopping Cart page includes an event named button.deleteItemFromShoppingCart. It is triggered when the user clicks the DELETE button in their shopping cart's Current Items list. On the refreshed page, the item no longer exists on the Current Items list.

You can find the step1.jsp portlet file in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal
\portlets\checkout\* 

An example from step1.jsp:

<a href="<portlet:createWebflowURL namespace="checkoutportlet"
event="button.deleteItemFromShoppingCart"
extraParams="<%= extraParams %>" />">
<img src="<webflow:createResourceURL
resource='<%=imagesPath + "check_step1_remove.gif"%>'/>"
width="42" height="13" alt="" border="0"></a> 

The extraParams parameter contains data about the product item, collected already in step1.jsp:

<%
	extraParams = HttpRequestConstants.CATALOG_ITEM_SKU + "="+
					shoppingCartLine.getProductItem().getKey().getIdentifier();
%>	  

The button.deleteItemFromShoppingCart event is defined in the checkoutportlet.wf Webflow file, which resides in the following directory:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project
\application-sync\webapps\b2cPortal 

The event is:

<event event-name="button.deleteItemFromShoppingCart">
	<destination namespace="checkoutportlet"
	node-name="shoppingcart_DeleteProductItemFromShoppingCartIP"
	node-type="inputprocessor"/>
</event>

The input processor is DeleteProductItemFromShoppingCartIP. You can view its Java source file in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal\WEB-INF\src\examples\e2e\b2c\shoppingcart\webflow 

DeleteProductItemFromShoppingCartIP deletes a specified item from the shopping cart. The SKU of the item to be deleted is specified as the HttpRequestConstants.CATALOG_ITEM_SKU parameter in the request object. The shopping cart is retrieved from the PipelineSessionConstants.SHOPPING_CART attribute in the pipeline session. The item is deleted and the pipeline session is updated with the modified shopping cart.

Next Step

To continue the tour, click the Save for Later button next to an item in the cart's Current Items list.

The Save for Later Button on Current Items List

Having clicked the Save for Later button in the "Current Items" portion of the step1.jsp Shopping Cart portlet, the page was refreshed with updated data for the same portlet. The item's status was changed and was moved to the Saved Items list on the cart.

 

Technical Details

The step1.jsp My Shopping Cart page includes an event named button.moveItemToSavedList. It is triggered when the user clicks the Save for Later button in the shopping cart's Current Items list. On the refreshed page, the item is moved from the Current Items list to the Saved Items list.

You can find the step1.jsp portlet file in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal
\portlets\checkout\* 

An example from step1.jsp:

<a href="<portlet:createWebflowURL namespace="checkoutportlet"
event="button.moveItemToSavedList" extraParams="<%= extraParams %>" />">
<img src="<webflow:createResourceURL
resource='<%=imagesPath + "check_step1_save.gif"%>'/>"
width="61" height="13" alt="" border="0"></a>

The extraParams parameter contains data about the product item, collected already in step1.jsp:

<%
	extraParams = HttpRequestConstants.CATALOG_ITEM_SKU + "=" +
		shoppingCartLine.getProductItem().getKey().getIdentifier();
%>	  

The button.moveItemToSavedList event is defined in the checkoutportlet.wf Webflow file, which resides in the following directory:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project\application-sync\webapps\b2cPortal 

The event is:

<event event-name="button.moveItemToSavedList">
	<destination namespace="checkoutportlet"
	node-name="shoppingcart_MoveProductItemToSavedListIP"
	node-type="inputprocessor"/>
</event>

The pipeline component is MoveProductItemToSavedListPC. You can view its Java source file in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\src\examples\e2e\b2c\shoppingcart\pipeline 

MoveProductItemToSavedListPC removes a ProductItem from a customer's shopping cart and adds it to their list of saved items. The customer's login id is specified by the PipelineSessionConstants.USER_NAME attribute in the Pipeline Session. The SKU of the item to move is specified by the PipelineSessionConstants.CATALOG_ITEM_SKU pipeline session attribute. The PipelineSessionConstants.SAVED_SHOPPING_CART and PipelineSessionConstants.SHOPPING_CART pipeline session attributes, and the WLCS_SAVED_ITEM_LIST table are updated to reflect the change.

Next Step

To continue the tour, click the Checkout button near the bottom of the shopping cart step1.jsp portlet.

 

---

The Checkout Portlet, Step2.jsp

Having clicked the Checkout button on the step1.jsp Shopping Cart, the portal application's Webflow resulted in the display of the step2.jsp checkout portlet on this Shopping Cart page. A graphic, check_step2_header.gif, was loaded to help the customer understand where they are in the order fulfillment process. To simplify this sample, data for the logged-in user has been provided on the page. Notice that for Steps 2 - 4 of the checkout process, the Secure Socket Layer (SSL) protocol is being used for security encryption of the order data (https://... in the application's URL).

The Checkout portlet is shown here in two parts for formatting purposes only:

 

Here is the lower portion of the same portlet:

 

Technical Details for the Checkout Portlet

The step2.jsp Checkout portlet presents pre-set billing and shipping information for logged-in user Rachel Adams. To keep the scope of this sample application simple, we did not include portlets that would allow the user to enter or modify their credit card or shipping information. However, WebLogic Portal supports this type of processing, and provides a separate sample to demonstrate it. Please refer to the Commerce and Campaign Features Tour in the WebLogic Portal documentation.

The step2.jsp Checkout portlet is in the following location:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\b2cPortal
\portlets\checkout\* 

Next Steps

To continue the tour, click the Continue Order button to proceed to the step3.jsp Order Submission page.

 

---

The Order Submission Portlet, Step3.jsp

Having clicked the Continue Order button in the Shopping Cart's step2.jsp Checkout portlet, the portal application's Webflow resulted in the display of this step3.jsp page. Summary information is presented. For example:

 

Technical Details for the Order Submission Portlet

This section provides details about the processing that occurs on this page.

Introduction

The step3.jsp checkout portlet provides the (pre-submit) Order Submission page, showing a summary of the order about to be submitted.

On this page, the interesting aspect is what happens after the user clicks the Submit Order button near the bottom of the page. The credit card authorization is performed via a pipeline component named CajunBasedPaymentPC. It calls a Payment Web service that we created in WebLogic Workshop.

After the order is confirmed (step 4), a pipeline component named ConvertOrderRepPC will convert the persisted order to an XML representation, and places it on a Java Message Server (JMS) queue. The WebLogic Integration Business Process Management (BPM) event processor dequeues the order and processes it. For information about that process, see the section The Order Confirmation Portlet, Step4.jsp.

Payment Authorization with a WebLogic Workshop Web Service

The Submit Order button on the step3.jsp portlet invokes a link.next event. The checkoutportlet.wf Webflow file includes the following:

<presentation-origin node-name="step3" node-type="jsp">
	<node-processor-infopage-name="step3.jsp"page-relative-path="/portlets
		/checkout"/>
	<event-list>
		<event event-name="link.next">
			<destination namespace="checkoutportlet"
				node-name="Commit" node-type="inputprocessor"/>

This Webflow file resides in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project
\application-sync\webapps\b2cPortal 

The b2c_order.pln pipeline file resides in:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp-project\application-sync\pipelines 

It includes the following:

<root-component component-name="CommitOrderPC"/>
	<component-branch-item>
		<source-component component-name="CommitOrderPC"/>
		<branch-success destination-component="CajunBasedPaymentPC"/>
	</component-branch-item>

The credit card payment authorization processing is handled by a pipeline component named CajunBasedPaymentPC. It calls a Java proxy that lets the pipeline component call the Payment Web service. We created the Web service in WebLogic Workshop.

You can view the source file for the CajunBasedPaymentPC.java file in the following location:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\src\examples\e2e\b2c\payment\pipeline 

The Payment Web service uses the conversational aspect of WebLogic Workshop framework. The first call is to authorize the credit card; we pass in the credit card number and the amount to be authorized as arguments. After the credit card authorization is complete, a call is made to capture an amount. Eventually a request is made to settle the amount.

The following screens show a portion of the WebLogic Workshop Integrated Development Environment (IDE) that we used to create the Payment Web service. This first screen is the Design View.

 

In WebLogic Workshop, you can easily switch between Design View and the following Source View.

 

The codes returned by the Payment Web service to the CajunBasedPaymentPC are as follows:

• -1 = Error (Bad argument passed)
• -2 = Error (When amount to capture is more than amount the credit is authorized for)
• -3 = Error (When amount to settle is more than amount for which the credit card was captured for)
• > 0 = Success

Note: The Payment Web service always sends payment information through without any errors, as if it were connected to and approved by a third-party payment service. The processing of payment via the Payment Web service is not designed for production use. You must integrate with your third-party vendor's payment service to process payment correctly. Note, however, that the code shown in the sample pipeline component is set up to appropriately handle error conditions.

For a complete description of the CajunBasedPaymentPC pipeline component and the Payment Web service, please see Web Services Tour. The description is also available from this sample's Introduction page.

A Note about the Cancel Button

If you click the Cancel button on the step2.jsp or step3.jsp Shopping Cart portlet, the application's Webflow will bring you back to step1.jsp in the cart. The current and any saved items that were in the cart still remain there. The cancellation simply ended step 2 or 3 of the checkout process for that order.

Next Step

To continue the tour, click the Submit Order button.

 

---

The Order Confirmation Portlet, Step4.jsp

Having clicked the Submit Order button in the Shopping Cart's step3.jsp Order Confirmation portlet, the portal application's Webflow resulted in the display of this step4.jsp portlet. It lists a confirmation message. The persisted order is now submitted by a pipeline component that enables asynchronous communication between the portlet and business process workflows, via a JMS queue. This interaction demonstrates application integration between WebLogic Portal and WebLogic Integration, which are running in a single WebLogic Server domain instance.

 

Technical Details for the Order Confirmation Portlet

When the commerce order is persisted to the database, an XML representation of the same order is queued for order management. The work starts in the ConvertOrderRepPC pipeline component. You can find its Java source file in the following location:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\src\examples\e2e\b2c\order\pipeline 

The ConvertOrderRepPC pipeline component works with a PurchaseManager SPI. Its source files are in the following location:

weblogic700\samples\platform\e2eDomain\beaApps\e2eApp\src\examples\e2e\common\purchase\spi\*.java 

This SPI is a stateless session bean that includes a queueOrder remote method.

WebLogic Integration has the following entry points available for communication with other systems:

• Application Integration (AI)—a system can call a J2EE Connection Architecture (J2EE CA) adapter directly using the AI entry point of WebLogic Integration. Typically, you use this for synchronous communication.
• Business-to-business integration (B2Bi)—a system can directly invoke business-to-business integration through a message API. This provides developers a way to write custom applications that communicate with a full instance of WebLogic Integration. B2Bi also provides a JavaServer Pages (JSP) tag library for building thin-client interfaces that can communicate with a hosted B2Bi enabler.
• WebLogic Integration process engine—a system can invoke the WebLogic Integration process engine synchronously using calls to a native API or asynchronously using JMS. These calls receive and send data, start processes, execute user-assigned tasks, and pass XML data among enterprise systems.

In this sample application, we are using asynchronous communication with a JMS queue. The following illustrates the process flow:

 

Again, ConvertOrderRepPC converts the order to a JMS XML message and sends it to a JMS queue (com.bea.wlpi.EventQueue) to which a BPM workflow is subscribed. Then the BPM event listener retrieves the message from the JMS queue and processes the message. The message either starts a workflow or triggers a workflow event listened to by a running workflow instance. WebLogic Integration retrieves the XML message from the JMS queue and forwards the data to a database, using the sample DBMS adapter provided by WebLogic Integration for use with its application integration component.

The XML message is used as the input document to the workflow. The workflow responds with two actions:

It parses the XML message using XPath and passes all the input data to the application integration service.

It calls an application integration service that is defined when the user deploys an application view for the DBMS adapter. The application view service updates the database.

Final Step for the BC2 Portal Tour

Now that the order has been placed successfully, if you wish you may continue shopping in the online tour by clicking the Continue Shopping button or Products tab. Or you can click the Logout button to return to the Introduction page for this sample. Note that if you logout, the Shopping Cart data is not retained for the next session.