Skip to main content

A Case Study of Custom JSF Converters - Automatically Converting Years With 2 Digits Into 4 Digits


You can find the demonstrated code of this post on my Github repo here.

The user story

" As a banker, I want to enter a client's birthday like 01.01.80 or 01.01.1980,
So that the birthday can be displayed as 01.01.1980 "

Implementation

Firstly, I thought about how to use a built-in converter likes the following.

<h:inputText id="birthdate" 
 value="#{data.birthdate}" 
 type="date" >
 <f:convertDateTime/> 
 <f:ajax event="change" 
   listener="#{data.onCalculate}" 
   execute="@this"
   render="@this" />
</h:inputText>

However, without defining a pattern, JSF used its default one which was not my desire. It threw an exception when I tried to enter a date like "01.01.90".

> myform:birthdate: '01.01.90' could not be understood as a date. Example: Mar 4, 2018 

Actually, I even could not define either pattern "dd.MM.yyyy" or "dd.MM.yy" for "f:convertDateTime":
- "dd.MM.yyyy" --> 01.01.80 becomes 01.01.0080
- "dd.MM.yy" --> 01.01.1980 becomes 01.01.80

Well, this was a case for us to define our own custom converter.
- XHTML code
<h:inputText id="birthdate" 
 value="#{data.birthdate}" 
 type="date">
 <f:converter converterId="myDateTimeConverter" /> 
 <f:ajax event="change" 
   listener="#{data.onCalculate}" 
   execute="@this"
   render="@this" />
</h:inputText>

- Java code
package vn.nvanhuong.javalab.jsf.dateformat;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.ConverterException;
import javax.faces.convert.FacesConverter;

import org.apache.commons.lang3.StringUtils;

@FacesConverter("myDateTimeConverter")
public class DateTimeConverter implements Converter {

 private static final String DD_MM_YY = "dd.MM.yy";
 private static final String DD_MM_YYYY = "dd.MM.yyyy";
 
 public Object getAsObject(FacesContext context, UIComponent component, String value) throws ConverterException {
  if (StringUtils.isEmpty(value)) {
   return null;
  }

  SimpleDateFormat formatter = new SimpleDateFormat(DD_MM_YY);
  Date parsedObject = null;
  try {
   parsedObject = formatter.parse(value);
  } catch (ParseException e) {
   throw new ConverterException(e);
  }
  return parsedObject;
 }
 
 public String getAsString(FacesContext context, UIComponent component, Object value) throws ConverterException {
  if (value == null) {
   return null;
  }

  SimpleDateFormat formatter = new SimpleDateFormat(DD_MM_YYYY);
  return formatter.format(value);
 }

}

The idea was that I allowed users to enter the year with 4 or 2 digits. Then, I used SimpleDateFormatter to convert the entered value into a value with type Date at JSF's phase "Apply Request" which calls method "getAsObject".

The cool thing here was with pattern "dd.MM.yy" the formatter allowed us to do that! Then, we always displayed the date with format "dd.MM.yyyy" at JSF's phase "Render Response" which calls method "getAsString".

Comments

Popular posts from this blog

[Snippet] CSS - Child element overlap parent

I searched from somewhere and found that a lot of people says a basic concept for implementing this feature looks like below: HTML code: <div id="parent">  <div id="child">  </div> </div> And, CSS: #parent{   position: relative;   overflow:hidden; } #child{   position: absolute;   top: -1;   right: -1px; } However, I had a lot of grand-parents in my case and the above code didn't work. Therefore, I needed an alternative. I presumed that my app uses Boostrap and AngularJs, maybe some CSS from them affects mine. I didn't know exactly the problem, but I believed when all CSS is loaded into my browser, I could completely handle it. www.tom-collinson.com I tried to create an example to investigated this problem by Fiddle . Accidentally, I just changed: position: parent; to position: static; for one of parents -> the problem is solved. Look at my code: <div class="modal-body dn-placeholder-parent-positi...

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...

What the heck is Meteor DDP?

I was using Meteor for my messenger project. I was so curious about the real time connection. I wanted to know how exactly this mechanism works. In this post, I will go through the DDP Specification, an overview of WebSocket, and a simple demo about how to subscribe a publication of Rocket.Chat (containing a DDP server) from an external webpage. At a glance, I knew that Meteor invented a protocol called DDP which uses for handling real time connection. So then, what is DDP? "DDP (Distributed Data Protocol) is the stateful WebSocket protocol that Meteor uses to communicate between the client and the server." [1] All right! Why does DDP matter? "DDP is a standard way to solve the biggest problem facing client-side JavaScript developers: querying a server-side database, sending the results down to the client, and then pushing changes to the client whenever anything changes in the database" . [2] In order to understand deeply the protocol, I decided ...

MS SQL Server Views

"Creates a virtual table whose contents (columns and rows) are defined by a query. Use this statement to create a view of the data in one or more tables in the database. For example, a view can be used for the following purposes: - To focus, simplify, and customize the perception each user has of the database. - As a security mechanism by allowing users to access data through the view, without granting the users permissions to directly access the underlying base tables. - To provide a backward compatible interface to emulate a table whose schema has changed." [1] Beside that, our team used view in order to improve the performance of our web apps when a database has a very complicated relationship between its tables by using ORM Frameworks such as Hibernate. Example code: --create CREATE VIEW placeholders AS SELECT EMPKEY AS empkey, CONNUMB AS connumb, EMPNBR AS empNbr, ACEEMPN AS empFirstName, ACEEMPFN AS empLastName, EMPNAM AS empFullName, ...

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...