Using Date Time Converters in JSF

 

The following application asks a user to enter a date which is then displayed in different styles and formats. For this application, we are going to develop two pages index.jsp and response.jsp. The index.jsp prompts the user to enter a date in the specific format (converter acting as a validator). The date entered in the page is binded with UserBean (javabean) attribute: dateField. The date fed by the user is then displayed after converting in different formats through response.jsp page.

Let’s make a new application by name : trial10 i.e. we need to make a folder trial10 in tomcat’s webapps folder and make a file index.jsp with following contents :

 

index.jsp

 

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>

    <head>

       <title> </title>

    </head>

    <body>

       <f:view>

           <h:form id="Converter">

              <h:outputText value="Enter date in dd.MM.yyyy

                  pattern "/>

              <h:inputText value="#{UserBean.dateField}"

                  id="dateField" required="true">

                  <f:convertDateTime pattern="dd.MM.yyyy" />

              </h:inputText>

              </p>

              <h:commandButton action="response" value="Submit" />

           </h:form>

       </f:view>

    </body>

</html> 

 

As we can see in the above jsp program, that the date entered by the user is binded with dateField attribute of the javabean : UserBean. The statement : <f:convertDateTime pattern="dd.MM.yyyy" /> means that the user is supposed to enter date in the given pattern only else it won’t be accepted and exception will be thrown. That is, a converter acts as a form of validator if used with input control.

 

Also make another file response.jsp with the below given contents in  "webapps\trial10" directory. The response.jsp file is to display the date entered in index.jsp file in different formats.

 

response.jsp

 

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

 

<html>

    <head>

       <title></title>

    </head>   

    <body>

       <f:view>

           <h2>

           <h:outputText value="Dates in different format"/></h2></br>

           <h:outputText value="The date in long style is  " />

           <h:outputText value="#{UserBean.dateField}" >

              <f:convertDateTime type="date" dateStyle="long"/>

           </h:outputText> </br>

           <h:outputText value="The date in medium style is  " />

           <h:outputText value="#{UserBean.dateField}" >

              <f:convertDateTime type="date" dateStyle="medium"/>

           </h:outputText> </br>

           <h:outputText value="The date in short style is  " />

           <h:outputText value="#{UserBean.dateField}" >

              <f:convertDateTime type="date" dateStyle="short"/>

           </h:outputText> </br>

           <h:outputText value="The time in full style is  " />

           <h:outputText value="#{UserBean.dateField}" >

              <f:convertDateTime type="time" timeStyle="full"/>

           </h:outputText> </br>

           <h:outputText value="The date and time in full style in

              French locale is  " />

           <h:outputText value="#{UserBean.dateField}" >

              <f:convertDateTime type="both" dateStyle="full"

                  locale="fr" />

           </h:outputText> </br>

           <h:outputText value="The date and time in full style in

                  Russian locale is  " />

           <h:outputText value="#{UserBean.dateField}" >

              <f:convertDateTime type="both" dateStyle="full"

                  locale="ru" />

           </h:outputText> </br>

           <h:outputText value="The date in dd.MM.yyyy HH:mm pattern

              is  " />

           <h:outputText value="#{UserBean.dateField}" >

              <f:convertDateTime pattern="dd.MM.yyyy HH:mm" />

           </h:outputText> </br>

       </f:view>

     </body>  

</html>

 

As we can see in the above jsp program, that the date binded with dateField attribute of the javabean : UserBean is displayed after converting in different styles like : long, medium and short formats. Also the time is displayed in full style. Beside this, the date and time are also displayed in French and Russian locale too. In the last, the date and time are displayed in the specified pattern also.

 

The language code, a lowercase two-letter combination is defined by ISO 639 standard.

 

ISO-639 language codes

af          Afrikaans

da         Danish

de         German

el          Greek

en         English

es         Spanish

fr          French

ja          japanese

pl          Polish

ru         Russian

sv         Swedish

zh         Chinese

 

Now we will create a bean that will hold the date entered by the user. Javabean is a class file having attributes and their respective setter and getter methods. Let’s make a file User.java in "webapps\trial10\WEB-INF\classes directory with following contents :

 

User.java

 

import java.util.Date;

public class User {

    private Date dateField;

    public Date getDateField() {

       return dateField;

    }

    public void setDateField(Date d) {

       dateField = d;

    }

}

 

Compiling the java bean application

Open the command prompt and go to the classes folder of our application (trial10) and give following command :

 

C:\apache-tomcat-6.0.14\webapps\trial10\WEB-INF\classes> javac User.java

 

Lets create an application configuration file: faces-config.xml in WEB-INF folder of our application to specify the name of our javabean and also the condition of navigating to response.jsp page from index.jsp page. The contents of the faces-config.xml file are as follows :

 

faces-config.xml

 

<?xml version='1.0' encoding='UTF-8'?>

<!DOCTYPE faces-config PUBLIC

"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"

"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config>

    <navigation-rule>

       <from-view-id>/index.jsp</from-view-id>

       <navigation-case>

       <from-outcome>response</from-outcome>

       <to-view-id>/response.jsp</to-view-id>

       </navigation-case>

    </navigation-rule>

    <managed-bean>

       <managed-bean-name>UserBean</managed-bean-name>

       <managed-bean-class>User</managed-bean-class>

       <managed-bean-scope>request</managed-bean-scope>

    </managed-bean>

</faces-config>

 

Above code specifies that the class name of the managed bean is User.class and is referred to in the application as UserBean. It also specifies that if in index.jsp file, the outcome of an event fired by the UICommand component is “response”, then navigate to the response.jsp page

 

Also make a deployment descriptor file web.xml in WEB-INF folder of our application to register the Faces servlet which is the engine of all JSF applications. Through the web.xml file, we need to state that any request containing the pattern /faces/ in the URL must be passed to the Faces servlet. The contents of web.xml file are same as above applications:

 

To run the application, run tomcat and in the browser type : http://localhost:8080/trial10/faces/index.jsp. The application asks the user to enter date in a particular format. After feeding the date in the given format, press Submit button.

 

 

We get the date after being converted in different formats as shown below: