3 min read

The introductory page of the order process

The first view in our page flow is an introductory page that simply navigates to the first step in our ordering process. Notice that we use the Seam tag to render a hyperlink that includes the conversation ID as a query string parameter. This is called conversation propagation.

Seam conversation propagation using hyperlinks Seam automatically propagates the conversation during JSF form submissions using the HTTP POST method. For any GET requests (for instance, clicking on a hyperlink), we are responsible for including the current conversation ID as a request parameter to ensure that the request is handled properly. Seam provides a hyperlink control rendered by the tag that automatically includes the current conversation ID on the query string. We can also include the conversation ID as a query string parameter by nesting the Seam tag inside the standard JSF tag. Conversation ID propagation is automatic when a JSF form is submitted using POST.

The markup for the introductory screen in our order process is as follows:

<h1>Product Order Form</h1>
<a4j:form>
<rich:panel>
<f:facet name="header">
 <h:outputText value="Welcome to our Store" />
</f:facet>
<p>Welcome to our store. Our step-by-step forms will guide you through 
the ordering process.</p>
<s:link view="/order/step1.jsf" value="Place an order" />
</rich:panel>
</a4j:form>
}

The following screenshot shows the introductory screen of our ordering process. Notice in the status bar of the browser window that the URL generated by the Seam JSF hyperlink control contains a query string parameter named cid with a value of one. As long as we pass this parameter from page to page, all the requests will be handled as a part of the same conversation. The conversation ID is automatically  submitted during JSF postback requests. When a new conversation is started, Seam will increment the conversation ID automatically.

The customer registration screen (Step 1)

The first screen, our page flow, requires the user to provide customer information before placing an order. This view is basically identical to the example used in the Seam validation section of this article. Therefore, much of the JSF markup has been removed for simplification purposes.

Notice that the action has been hardcoded in the <a4j:commandButton> tag and corresponds to a navigation rule declaration in faces-config.xml. No additional work is required for the Seam conversation ID to be propagated to the server when the form is submitted; this happens automatically.

<h1>Step 1. Customer Registration</h1>
<a4j:form id="customerForm" styleClass="customer-form">
 ...
 <a4j:commandButton value="Next Step" action="next"
 reRender="customerForm" />
 ...
</a4j:form>

The following screenshot shows the customer registration step in the online ordering page flow of our application.

The shipping information screen (Step 2)

The following screen requires the user to select a product and a shipping destination before clicking on the Next Step button. Once again, Seam conversation propagation happens automatically when the form is submitted.

The order details confirmation screen (Step 3)

The next screen requires the user to confirm the order details before submitting the order for processing. Once again, the JSF markup has been omitted for brevity. Notice that the command button invokes the submitOrder backing bean method to submit the order.

As noted earlier, this method is annotated with the Seam framework @End annotation, indicating that the long-running conversation ends after the method is invoked. When the method returns, Seam demotes the long-running conversation to a temporary conversation and destroys it after the view is rendered. Any references to conversation-scoped beans are released when the Seam conversation is destroyed, efficiently freeing up server resources in a more fine-grained way than by invalidating the session.

<h:form>
 ...
 <a4j:commandButton action="#{orderBean.submitOrder}"
 value="Submit Order" />
 ...
</h:form>

The following screenshot shows the order details confirmation screen.

LEAVE A REPLY

Please enter your comment!
Please enter your name here