Building a Wizard with Chain of Responsibility Pattern

What is the Idea?

We want to create a page that there are some steps and each step has its own business. Users are able to click on a step and its status could be changed. Primefaces owns a component "Wizard" but it it quite hard for us in order to apply our very specific and complicated business domain logic on each step; even we cannot click on a step of this component.

We somehow are able to use the component "TabView" works with a strong back-end mechanism. A backend mechanism! what do I mean? Yes, we need it because we want to abstract the behaviors of each step otherwise we will get trouble with many events handling. Obviously, each step has some behaviors such as "next", "back" and "switch' are the same and they are related to each other; but the business of these behaviors can be different totally. That is where the pattern "Chain of Responsibility" can be applied.

Step by Step Building It!

In this simple project, I only want to show you how we can apply the pattern "Chain of Responsibility" which each step has its own implementation different from others. That is when an event on GUI is performed on a step the corresponding business will be executed.

Here is the folder structure that I used in this project.

Create a JSF project

I am currently using the Eclipse Java EE IDE for Web Developers; version: Neon Release (4.6.0). It's now easy to import an existing JSF project created before on Github. Check my previous post here.

Enhance the Project by Using Primefaces

The current version of Primefaces is 6.0, we need to add a dependency into our "pom.xml" file.

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>6.0</version>
</dependency>

Create The GUI - Template and Wizard Page

I want to create a method that it has responsibility for initializing our data in managed bean when the page is loaded. I can use annotation "javax.annotation.@PostConstruct" to achieve it but I don't want to add more dependency to the project. The alternative is that I used "<f:viewAction action="#{logic.onStart}" />" on the page and this tag should be inside tag "ui:composite". Therefore, I need to create the template first and then use it in the wizard page.

commonLayout.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
</h:head>

<h:body>
 <div id="content">
  <ui:insert name="content">
   <h1>This is default content</h1>
  </ui:insert>
 </div>
</h:body>
</html>

index.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:p="http://primefaces.org/ui"
 xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
 <title>Primefaces Wizard with Chain of Responsibility Pattern</title>
</h:head>
<h:body>
<ui:composition template="/template/commonLayout.xhtml">
 <f:metadata>
     <f:viewAction action="#{logic.onStart}" />
 </f:metadata>
 
 <ui:define name="content">
  <h:form id="mainForm">
   <h3 style="margin-top:0">The Wizard</h3>
      <p:tabView activeIndex="#{data.currentIndex}">
       <p:ajax event="tabChange" listener="#{logic.onSwitchTab}" update="mainForm"/>
          <p:tab title="Address">
              <h:panelGrid columns="2" cellpadding="10">
                  <h:outputText value="#{data.content}" />
              </h:panelGrid>
          </p:tab>
          <p:tab title="Person">
              <h:panelGrid columns="2" cellpadding="10">
                  <h:outputText value="#{data.content}" />
              </h:panelGrid>
          </p:tab>
          <p:tab title="Confirm">
              <h:panelGrid columns="2" cellpadding="10">
                  <h:outputText value="#{data.content}" />
              </h:panelGrid>
          </p:tab>
      </p:tabView>
      
      <p:commandButton value="Back" actionListener="#{logic.onBack}" update="mainForm"
          rendered="#{data.currentIndex != 0}"></p:commandButton>
      <p:commandButton value="Next" actionListener="#{logic.onNext}" update="mainForm"
          rendered="#{data.currentIndex != 2}"></p:commandButton>
  </h:form>
 </ui:define>
</ui:composition>
</h:body>
</html>

Create Manage Beans - Controller and Model

As you saw on the index.xhtml, I want to separate the logic and data model of the page into two places. They looks like the following:

The managed bean for logic handling:

package vn.nvanhuong.jsf_myfaces.controller;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.ViewScoped;

import org.primefaces.event.TabChangeEvent;

import vn.nvanhuong.jsf_myfaces.model.MyData;
import vn.nvanhuong.jsf_myfaces.util.MyUtil;

@ManagedBean(name = "logic")
@ViewScoped
public class MyController {
 
 @ManagedProperty(value="#{data}")
 private MyData data;
 private MyUtil util;
 
 public void onStart(){
  util = MyUtil.forData(data);
  util.initView();
 }

 public void onBack(){
  util.updateActiveTabWhenBack();
  util.performActionListener();
 }
 
 public void onNext(){
  util.updateActiveTabWhenNext();
  util.performActionListener();
 }
 
 public void onSwitchTab(TabChangeEvent event){
  util.performActionListener();
 }
 
 public MyData getData() {
  return data;
 }

 public void setData(MyData data) {
  this.data = data;
 }
}

The class MyUtil is introduced at next step. Here is the managed bean for data hanlding:

package vn.nvanhuong.jsf_myfaces.model;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean(name = "data")
@ViewScoped
public class MyData implements Serializable{
 private static final long serialVersionUID = -654601189797846209L;
 
 private Integer currentIndex;
 private String content;

 public Integer getCurrentIndex() {
  return currentIndex;
 }

 public void setCurrentIndex(Integer currentIndex) {
  this.currentIndex = currentIndex;
 }

 public String getContent() {
  return content;
 }

 public void setContent(String content) {
  this.content = content;
 }
 
}

Create Backend for Wizard - Chain of Responsibility Pattern

The class AbstractStep defines the template method "performActionListerner" contains a abstract method "perform" that will be implemented in subclasses.

package vn.nvanhuong.jsf_myfaces.wizard;

public abstract class AbstractStep{
 protected StepIndicator stepIndicator;
 private AbstractStep nextStep;
 
 public void setNextStep(AbstractStep nextStep) {
  this.nextStep = nextStep;
 }
 
 public void performActionListerner(StepMessage message){
  if(stepIndicator == message.getStepIndicator()){
   perform(message);
  }
  
  if(nextStep != null){
   nextStep.performActionListerner(message);
  }
 }
 
 abstract protected void perform(StepMessage message);
}

StepIndicator

package vn.nvanhuong.jsf_myfaces.wizard;

public enum StepIndicator {
 ADDRESS(0),
 PERSON(1),
 CONFIRM(2),
 UNKNOWN(-1);
 
 private int index;

 private StepIndicator(int index) {
  this.index = index;
 }

 public int getIndex() {
  return index;
 }

 public static StepIndicator getIndicatorByIndex(Integer currentIndex) {
  for(StepIndicator indicator: StepIndicator.values()){
   if(indicator.getIndex() == currentIndex){
    return indicator;
   }
  }
  return UNKNOWN;
 }
}

The class StepMessage is as Value Object (VO) that is used for transferring values purpose.

package vn.nvanhuong.jsf_myfaces.wizard;

import vn.nvanhuong.jsf_myfaces.model.MyData;

public class StepMessage {
 private StepIndicator stepIndicator;
 private MyData data;
 
 private StepMessage(){}
 
 public StepIndicator getStepIndicator() {
  return stepIndicator;
 }

 private void setStepIndicator(StepIndicator stepIndicator) {
  this.stepIndicator = stepIndicator;
 }
 
 public MyData getData() {
  return data;
 }

 private void setData(MyData data) {
  this.data = data;
 }

 public static class Builder{
  private StepIndicator stepIndicator;
  private MyData data;
  
  private Builder(){}
  
  public static Builder createInstance(){
   return new Builder();
  }

  public Builder setStepIndicator(StepIndicator stepIndicator) {
   this.stepIndicator = stepIndicator;
   return this;
  }
  
  public Builder setData(MyData data) {
   this.data = data;
   return this;
  }

  public StepMessage build(){
   StepMessage result = new StepMessage();
   result.setStepIndicator(stepIndicator);
   result.setData(data);
   return result;
  }
  
 }
 
}

The following are the corresponding steps to step indicators these have their own implementation for method "perform".

AddressStep

package vn.nvanhuong.jsf_myfaces.wizard.step;


import vn.nvanhuong.jsf_myfaces.wizard.AbstractStep;
import vn.nvanhuong.jsf_myfaces.wizard.StepIndicator;
import vn.nvanhuong.jsf_myfaces.wizard.StepMessage;

public class AddressStep extends AbstractStep{
 
 public AddressStep(StepIndicator indicator){
  this.stepIndicator = indicator;
 }
 

 @Override
 protected void perform(StepMessage message) {
  message.getData().setContent("I am Address Step");
 }

}

PersonStep

package vn.nvanhuong.jsf_myfaces.wizard.step;

import vn.nvanhuong.jsf_myfaces.wizard.AbstractStep;
import vn.nvanhuong.jsf_myfaces.wizard.StepIndicator;
import vn.nvanhuong.jsf_myfaces.wizard.StepMessage;

public class PersonStep extends AbstractStep{

 public PersonStep(StepIndicator indicator) {
  this.stepIndicator = indicator;
 }
 
 @Override
 protected void perform(StepMessage message) {
  message.getData().setContent("I am PersonStep Step");
 }

}

ConfirmStep

package vn.nvanhuong.jsf_myfaces.wizard.step;

import vn.nvanhuong.jsf_myfaces.wizard.AbstractStep;
import vn.nvanhuong.jsf_myfaces.wizard.StepIndicator;
import vn.nvanhuong.jsf_myfaces.wizard.StepMessage;

public class ConfirmStep extends AbstractStep{
 
 public ConfirmStep(StepIndicator indicator) {
  this.stepIndicator = indicator;
 }
 
 @Override
 protected void perform(StepMessage message) {
  message.getData().setContent("I am ConfirmStep Step");
 }


}

Finally, we need a place to connect these steps together.

package vn.nvanhuong.jsf_myfaces.util;

import vn.nvanhuong.jsf_myfaces.model.MyData;
import vn.nvanhuong.jsf_myfaces.wizard.AbstractStep;
import vn.nvanhuong.jsf_myfaces.wizard.StepIndicator;
import vn.nvanhuong.jsf_myfaces.wizard.StepMessage;
import vn.nvanhuong.jsf_myfaces.wizard.step.AddressStep;
import vn.nvanhuong.jsf_myfaces.wizard.step.ConfirmStep;
import vn.nvanhuong.jsf_myfaces.wizard.step.PersonStep;

public class MyUtil {
 private MyData data;
 private AbstractStep stepChain;
 
 private MyUtil(MyData data){
  this.data = data;
 }
 
 public static MyUtil forData(MyData data){
  return new MyUtil(data);
 }
 
 public void initView(){
  stepChain = initStepChain();
  data.setCurrentIndex(StepIndicator.ADDRESS.getIndex());
  this.performActionListener();
 }
 
 private AbstractStep initStepChain() {
  AbstractStep addressStep = new AddressStep(StepIndicator.ADDRESS);
  AbstractStep personStep = new PersonStep(StepIndicator.PERSON);
  AbstractStep confirmStep = new ConfirmStep(StepIndicator.CONFIRM);
  
  addressStep.setNextStep(personStep);
  personStep.setNextStep(confirmStep);
  
  return addressStep;
 }
 
 public void performActionListener() {
  StepMessage message = StepMessage.Builder.createInstance()
      .setData(data)
      .setStepIndicator(StepIndicator.getIndicatorByIndex(data.getCurrentIndex()))
      .build();
  stepChain.performActionListerner(message);
 }

 public void updateActiveTabWhenNext() {
  data.setCurrentIndex(data.getCurrentIndex() + 1);
 }
 
 public void updateActiveTabWhenBack() {
  data.setCurrentIndex(data.getCurrentIndex() - 1);
 }
}

The result is...

You can download or check out the source code here.

Reference
[1]. https://www.tutorialspoint.com/design_pattern/chain_of_responsibility_pattern.htm

Latest news

Building a Wizard with Chain of Responsibility Pattern





What is the Idea?

Step by Step Building It!

Create a JSF project

Enhance the Project by Using Primefaces

Create The GUI - Template and Wizard Page

Create Manage Beans - Controller and Model

Create Backend for Wizard - Chain of Responsibility Pattern

Comments

Latest news

Building a Wizard with Chain of Responsibility Pattern





What is the Idea?

Step by Step Building It!

Create a JSF project

Enhance the Project by Using Primefaces

Create The GUI - Template and Wizard Page

Create Manage Beans - Controller and Model

Create Backend for Wizard - Chain of Responsibility Pattern

Watch alsoً

Comments