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:

Comments

Post a Comment

Popular posts from this blog

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<...
Post a Comment
Read more

How to apply Lean - Kanban for your business

This is the topic of Scrum Breakfast meetup this time, speaker: Ms. Phuong Bui - Technical Project Manager of YOOSE Pte. Ltd. http://www.meetup.com/Scrum-Breakfast-Vietnam-Agile-and-Scrum-Meetup/events/230313727/ Lean comes from Lean manufacturing is a method that focuses on elimination of wastes. In other words, this is a set of principles for archiving the quality, speed and customer alignment. The first time I knew about the term "Lean" is  from the book Software Craftsmanship . Sandro recommends if we want to transform our pet projects into a real business, we should get familiar with Lean Startup concepts. In this talk, Ms. Phuong pointed out some major wastes includes information (ex: unclear requirements), processes (ex: waiting), physical environment and people. Knowing what the problems should be the best way to eliminate them. The difference between  Single item flow and Batch processing is the second main point; and it is the Lean's idea. Batch pr...
Post a Comment
Read more

Why Business Rules Engine Matter

"A good DSL minimizes the 'communication gap' between a domain concept and the code that implements it" - Robert C. Martin A Use Case It looks like adopting a new technology is always driven by a business need. The organizations, such as banks, have their own business processes (such as data gathering and document management). These processes are different from others but usually the differences are not big. How do we build a product which can be reused the similar features but still be adaptable with the specific requirements of each bank? Then, the answer is we should have a library/framework. There is an idea that we can implement this library/framework by using a business rules engine. Which has the following benefits: Be able to modify implementation of business domain at runtime (such as XML, CSV) S ource code is more readable for both developers and domain experts. Therefore, source code can be consider it as a document Since Business Rules Engine...
Post a Comment
Read more

A User Guide To Working With Huong

  Introduction I write this user guide to help us (you and me) have a good collaboration at work. I hope you also share yours. How I view success We all feel passionate and happy at work. We all enjoy discussing transparently. We take it easy to give and receive feedback. After all, we together develop and bring valuable applications to users. How I communicate I mostly prefer a face-to-face conversation. Just leave me a message on Slack if you don't want to come to my desk. For a big topic which takes more than 30 minutes, we should have a meeting. Only send me emails only if stuff is very formal or out-of-office hours Things I do that may annoy you I do practice the Pomodoro technique so that sometimes you see me in the "do not disturb" mode. Often to make things clear, I am at ease talking   frankly   with you. What gains and loses my trust It is easy to gain my trust when you commit to what you say. You show your passion and endeavors to achieve that. It is easy to lo...
Post a Comment
Read more

Building Axon.ivy Projects on Bitbucket Pipelines

Read me  if you don't know what Axon.ivy (Ivy) is. Motivation -  Ivy projects are designed to be built on a continuous integration (CI) server like Jenkins - Today, Bitbucket supports for CI with Bitbucket Pipelines - We're using Bitbucket. Then, why not? It must be very cool and convenient for us if we can centralize our CI and VCS (version control system) tools in one place. Here is an approach We have to use a maven plugin called project-build-plugin  to build ivy projects. This plugin requires an instance of Ivy engine during building time. Bitbucket Pipelines allows us to specify our own docker image as a build environment. What we need to do  is to prepare our docker image with needed stuffs such as JDK, Maven, Ivy engine, etc. Step 1. Prepare Docker images For testing purpose, I already created two docker images: Maven and Axon.ivy engine. They are now available on Docker Hub This image for Maven using Oracle JDK 8 This image for Axon.iv...
Post a Comment
Read more