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

Comments

Popular posts from this blog

Coders are NERDS | Learning English with Podcast

Let's learn three English vocabulary words based on real-life context through a humorous video about the life of software coders, especially at big tech companies when they work from home. Credit to Joma Tech. 🤓

The HelloWorld example of JSF 2.2 with Myfaces

I just did by myself create a very simple app "HelloWorld" of JSF 2.2 with a concrete implementation Myfaces that we can use it later on for our further JSF trying out. I attached the source code link at the end part. Just follow these steps below: 1. Create a Maven project in Eclipse (Kepler) with a simple Java web application archetype "maven-archetype-webapp". Maven should be the best choice for managing the dependencies , so far. JSF is a web framework that is the reason why I chose the mentioned archetype for my example. 2. Import dependencies for JSF implementation - Myfaces (v2.2.10) into file pom.xml . The following code that is easy to find from  http://mvnrepository.com/  with key words "myfaces". <dependency> <groupId>org.apache.myfaces.core</groupId> <artifactId>myfaces-api</artifactId> <version>2.2.10</version> </dependency> <dependency> <groupId>org.apache.myfaces.core<...

Generating PDF/A From HTML in Meteor

My live-chat app was a folk of project Rocket.Chat which was built with Meteor. The app had a feature that administrative users were able to export the conversations into PDF files. And, they wanted to archive these files for a long time. I happened to know that PDF/A documents were good for this purpose. It was really frustrated to find a solution with free libraries. Actually, it took me more than two weeks to find a possible approach. TL, DR; Using Puppeteer to generate a normal PDF and using PDFBox to load and converting the generated PDF into PDF/A compliance. What is PDF/A? Here is a definition from Wikipedia: PDF/A  is an  ISO -standardized version of the  Portable Document Format  (PDF) specialized for use in the  archiving  and long-term  preservation  of  electronic documents . PDF/A differs from PDF by prohibiting features unsuitable for long-term archiving, such as  font  linking (as opposed to  font em...

Why Functional Programming Matter

What issues do we concern when implementing and maintaining systems? One of the most concern is debugging during maintenance: "this code crashed because it observed some unexpected value." Then, it turns out that the ideas of  no side effects  and  immutability , which functional programming promotes, can help. Shared mutable data is the root cause Shared mutable data are read and updated by more than one of the methods. Share mutable data structures make it harder to track changes in different parts of your program. An immutable object is an object that can't change its state after it's instantiated so it can't be affected by the actions of a function. It would be a dream to maintain because we wouldn't have any bad surprises about some object somewhere that unexpectedly modifies a data structure. A new thinking: Declarative programming There are two ways thinking about implementing a system by writing a program. - Imperative programming: has...

Junit - Test fails on French or German string assertion

In my previous post about building a regex to check a text without special characters but allow German and French . I met a problem that the unit test works fine on my machine using Eclipse, but it was fail when running on Jenkins' build job. Here is my test: @Test public void shouldAllowFrenchAndGermanCharacters(){ String source = "ÄäÖöÜüß áÁàÀâÂéÉèÈêÊîÎçÇ"; assertFalse(SpecialCharactersUtils.isExistSpecialCharater(source)); } Production code: public static boolean isExistNotAllowedCharacters(String source){ Pattern regex = Pattern.compile("^[a-zA-Z_0-9_ÄäÖöÜüß áÁàÀâÂéÉèÈêÊîÎçÇ]*$"); Matcher matcher = regex.matcher(source); return !matcher.matches(); } The result likes the following: Failed tests: SpecialCharactersUtilsTest.shouldAllowFrenchAndGermanCharacters:32 null A guy from stackoverflow.com says: "This is probably due to the default encoding used for your Java source files. The ö in the string literal in the J...