Skip to main content

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
Labels:
Reactions:

Comments

Post a Comment

Popular posts from this blog

Small Changes to Java 7 via Project Coin and Why They are Useful

Did you know how new features were added into Java 7? The following are functionalities that can be considered.
Source: [1] Project Coin is all about the changes in the range from syntactic sugar to new language feature. This is what we're talking about today.

Since Java 7 is the first version developed in an open source manner, there is an amount of actions that must be performed for any changes as follows:
Update the Java Language Specification (JSL)Implement a prototype in the source compilerAdd library support essential for the changeWrite tests and examplesUpdate documentEtc, ... Project Coin has submitted a lot of proposals (almost 70) but only some of them are chosen to Java 7. Why? Briefly, Java is a rich static type system and it has a lot of possible interaction points between different bits of it. Making changes to this type system is prone to creating unexpected surprises.

Wow! It is tough, right? Let's take a look what features Project Coin brought to Java 7.
Strings…
Post a Comment
Read more

Review - The Object-Oriented Thought Process, by Matt Weisfeld

In this post, I would like to point out what I understood after closing my eyes and thinking about what  exactly I have learned from this book. That means the layout of content does not follow the book.
From Procedural to Object Oriented Once upon a time, there is an issue that it is very hard to test and debug in Procedural programming because the data is sometimes global and can be modified by multiple functions.

Object-Oriented (OO) programming addresses these problems by combining both data and functions into an object. That means only functions belong to the object can access its own data.

Let us check the below two different approaches for a case that we want to transfer information between clients and servers across a network.

-    Procedural programming: a client (browser) transfers a JSON data to a server which needs to know how to process with this data. In order words, a handshaking agreement must be defined for the client and server in order to work together.
-    OO prog…
9 comments
Read more

Climbing Fansipan – Highest Peak of Indochina

Fansipan is a mountain in Vietnam, the highest in Indochina, at 3,143 metres. It is located in the Lào Cai Province of the Northwest region of Vietnam, 9 km southwest of Sa Pa Township in the Hoang Lien Son mountain range. Wikipedia
Currently you can get the peak by cable car; however, I loved to explore it by climbing.

Here are what I have learned from this exciting journey. 💪
Do not procrastinate I have had no experience of climbing a high mountain before. Then, I've sought advice from my friends, but they suggested that I should not make it at that time due to bad weather and lack of experience. I know it never come true unless I just make my decision. Can't wait! Prepare for your journey You firstly need getting to know about the journey, schedule, transportation, etc. Recommended sources: YouTube videos, blog posts and tour companies websites.
Tips - Quality hiking shoes helps a lot - Bring your stuffs as light as possible. Important stuffs: a light raincoat and water (t…
Post a Comment
Read more

Strategy Design Pattern

For example, I have an program with an Animal abstract class and two sub-classes Dog and Bird. I want to add a new behavior for the class Animal, this is "fly".  Now, I face to two approaches to solve this issue:

1. Adding an abstract method "fly" into the class Animal. Then, I force the sub-classes should be implemented this method, something like:

public abstract class Animal{ //bla bla public abstract void fly(); } public class Bird extends Animal{ //bla bla public void fly(){ System.out.println("Fly high"); } } public class Dog extends Animal{ //bla bla public void fly(){ System.out.println("Cant fly"); } }
2. Creating an interfaces with method "fly" inside. The same issue to abstract class, I force the classes these implement this interface should have a method "fly" inside:

public interface Flyable{ public void fly(); } public class Bird implements Flyable{ //bla bla public void fly(){ System.out.println…
Post a Comment
Read more

Java Core - Top 10 Questions Every Developer Should Know

#RandomlyPickedByMe

What is the difference between Javascript and Java?Difference between StringBuilder and StringBuffer?Why do I get "SomeType@a3fde" when I print my code?Why is String immutable?Why "equals" method when we have "==" operator?Is List<Dog> a subclass of List<Animal>?Why shouldn't we use raw type?Is Java “pass-by-reference” or “pass-by-value”?What's the advantage of a Java enum versus a class with public static final fields?Why "double x = 0.1 + 0.2" and result of print(x) is 0.30000000000000004?
 1. What is the difference between Javascript and Java? Holy crap! (Vietnamese: Thế quái nào lại có câu hỏi ngớ ngẩn vậy chứ?)

"Java and Javascript are similar like Car and Carpet are similar." - Greg Hewgill (on StackOverflow)
2. Difference between StringBuilder and StringBuffer String is immutable. StringBuilder and StringBuffer are mutable. StringBuffer is thread-safe. StringBuilder is modern than StringBuff…
Post a Comment
Read more