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

The 2017 Scrum Guide, and My Notes

https://www.scrum.org Scrum is not only designed for software development Scrum can be used for addressing any complex issues:
1. Research and identify viable markets, technologies, and product capabilities;
2. Develop products and enhancements;
3. Release products and enhancements, as frequently as many times per day;
4. Develop and sustain Cloud (online, secure, on-demand) and other operational environments for product use; and,
5. Sustain and renew products.
Scrum Values is a key factor for building trust and respect among team members The five values are:
1. Commitment
2. Courage
3. Focus
4. Openness
5. Respect
Daily Scrum's questions are more focused on inspection and adaption rather than the status 1. What did I do yesterday that helped the Development Team meet the Sprint Goal?
2. What will I do today to help the Development Team meet the Sprint Goal?
3. Do I see any impediment that prevents me or the Development Team from meeting the Sprint Goal?
Why Scrum still needs Scru…

Git Feature Branch Workflow

Motivator It's important for a team to have an agreement on how the changes of source code should be applied.
According to projects and teams size, we will define a workflow or select one from recommended workflows; the "Feature Branch Workflow" is a candidate.
What is it? - One branch "master" for main codebase
- Several separated branches for features development
Why should we care? - Be super simple and allow each developer works on a particular feature.
- A stable codebase (master) benefits for continuous integration (CI) environment
- Leverage "Pull request" for Code review
How it works? A lifecyle of a feature branch (usually created by a story)
1. Creator creates a new branch from a story.  For example: "ABC-1-setup-projects"
2. Creator checkouts the created branch and works on the branch (commits, pushes)
3. Creator has done the feature, he uses "pull request" to merge his branch into branch "master"
4. Reviewers…

How did I start practising BDD?

At the beginning days I has practised TDD (Test Driven Development) with using JUnit, I approached that I should test methods belong to a class. For example:

I have a class with some methods:

public class A{ public void method1(){ } public void method2(){ } }
And then, I wrote some test methods to check the corresponding ones, for example:

public class ATest{ @Test public void testMethod1(){ .... assertTrue(...); ..... assertEquals(...); } @Test public void testMethod2(){ } }
After that, I know that a test method (ex: testMethod1) should just only tests one thing, so I decided to write more methods for each cases. It looks like the following:

@Test public void testMethod1_When_Case1(){ .... assertTrue(...); } @Test public void testMethod1_When_Case2(){ .... assertEquals(...); }
However, it was not a really good approach because it seems that I just focused on test the functionality of the method of the class. With TDD approach, I knew that I should test the …

Styling Sort Icons Using Font Awesome for Primefaces' Data Table

So far, Primefaces has used image sprites for displaying the sort icons. This leads a problem if we want to make a different style for these icons; for example, I would make the icon "arrow up" more blurry at the first time table loading because I want to highlight the icon "arrow down". I found a way that I can replace these icons to Font Awesome icons.


We will use "CSS Pseudo-classes" to archive it. The hardest thing here is that we should handle displaying icons in different cases. There is a case both "arrow up" and "arrow down" showing and other case is only one of these icons is shown.

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s { background-image: none; margin-left: 5px; font-size: 1.1666em; position: relative; } .ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s:not(.ui-icon-triangle-1-s)::before { content: "\f106"; font-family: "FontAwesome"; position: absolute; t…

Coding Exercise, Episode 1

I have received the following exercise from an interviewer, he didn't give the name of the problem. Honestly, I have no idea how to solve this problem even I have tried to read it three times before. Since I used to be a person who always tells myself "I am not the one good at algorithms", but giving up something too soon which I feel that I didn't spend enough effort to overcome is not my way. Then, I have sticked on it for 24 hours.

According to the given image on the problem, I tried to get more clues by searching. Thanks to Google, I found a similar problem on Hackerrank (attached link below). My target here was trying my best to just understand the problem and was trying to solve it accordingly by the Editorial on Hackerrank. Due to this circumstance, it turns me to love solving algorithms from now on (laugh). Check it out!
Problem You are given a very organized square of size N (1-based index) and a list of S commands
The ith command will follow the format (a[…