AK 5 JSF 21 july 2008

JavaServer Faces (JSF)

Atul Kahate

([email protected])

1JavaServer Faces (JSF) |

Atul Kahate

What is JSF?

� JSF is a standard Java framework for building user interfaces for Web applications

� Created as a Java Community Process (JCP) –and hence has higher chances of being a

JavaServer Faces (JSF) | Atul Kahate 2

and hence has higher chances of being a success

� Attempts to make client-side development browser-independent and also includes features such as state management, etc

JSF Characteristics

� Server-side

� User-interface related

� Component framework� Component framework

� Components are UI-related, Validations-related, Error handling-related, etc


JSF Application Features

� Similar to JSP-servlet application

� Has a deployment descriptor (web.xml), JSP files, tag libraries, static resources, JSP files, tag libraries, static resources, etc

� See next slide


JSF Features Elaborated

� JSP pages: Form the UI

� Deployment descriptor: Indicates use of JSFJSF

� Swing-like enhanced UI

� Managed backing beans: Used to hold data entered by the user

� Superior validation


JSF and MVC

� Similar to Swing and other GUI frameworks:

� Model = Properties of an application (e.g. user name in an user object)

View = UI components that specify what events � View = UI components that specify what events occurred (e.g. value changed or button clicked)

� Controller = External event listeners that are attached to the UI to handle events


JSF Advantages

� Based on MVC

� Well-defined programming model and tag libraries

� Sun Standard

Helps reusability� Helps reusability

� UI development is easier, faster

� Event handling is easier

� Separates behavior and presentation of information


JSF Drawbacks

� Complex without the use of an IDE

� Still growing

� Applications without using MVC are tough to � Applications without using MVC are tough to build

� Confusion in file naming (pages are saved with .jsp but accessed as .jsf or .faces)

� Absence of regular expressions in validations

� Does not support GET method


JSF Parts

� JSF has three parts:

� Set of pre-fabricated User Interface componentscomponents

� Event-driven programming model

� Component model with the facility for allowing third-party components


JSF Application Lifecycle

� There are six phases

1. Restore view

2. Apply request values

3. Process validations3. Process validations

4. Update model values

5. Invoke application

6. Render response

� There are two types of requests

1. Initial request

2. Postback requests


JSF Request Types

1. Initial request

� Very first request for a page

� First time, so no UI processing/validations� First time, so no UI processing/validations

� Deals with Restore view and Render response phases

2. Postback request

� User has submitted a form

� All the six phases are dealt with hereJavaServer Faces (JSF) |

Atul Kahate 11

JSF Configuration

� A JSF application is a standard Java EE application, with the need for the following configuration files

Entry in the web.xml file Enables the Faces controller servlet when a URL pattern such as /faces/* is received


received

JSF configuration file faces-config.xml Allows for the configuration of the JSF application – at par with web.xml file, and is located in the WEB-INF/ folder

WEB-INF directory containing Actual JSF libraries jsf-api.jar and jsf-impl.jar

Apache commons libraries, such as commons-beanutils.jar, commns-collections.jar, commons-digester.jar, commons-logging.jar

JSTL jar files: jstl.jar and standard.jar

Converting a JSP to a JSF

� The first thing to do in order to convert a JSP page into a JSF page for better view is to add the following two taglibs:<%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f” %><%@ taglib uri=“http://java.sun.com/jsf/html” prefix=“h” %>

Then add a <f:view> tag in the body of the JSP


� Then add a <f:view> tag in the body of the JSP� This tag becomes the base UI component of the component

tree in memory of the server when the page is requested for viewing

� If the page also takes user input, we also need to add a <h:form> tag as a child element of the above tag� Subsequent HTML form element tags would be <h:inputText>, <h:commandButton>, etc

Example

<%@ page contentType="text/html" %><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<f:view><html>


<html><body>

<h:form><h2>A simple JSF Page</h2>

<h:inputText value="#{modelBean.username}" /><h:commandButton value="Click here" />

</h:form></body>

</html></f:view>

JSF UI Component Tree – 1

� A JSF page like the above causes a UI component tree on the server, exactly matching with the components specified in the page

HtmlInputText HtmlCommandButton


HtmlInputText HtmlCommandButton

HtmlForm

UIViewRoot

JSF UI Component Tree – 2

� Once a tree like the above is created and loaded in the server’s memory, it is possible to interact with the server-side


possible to interact with the server-side UI components, and manipulate them directly

JSF Request Processing Lifecycle

� Sequence of events when a request is sent to a JSF page is called as the JSF request processing lifecycle, or simply JSF lifecycle

� Example:


� Example:<h:inputText value=“#{modelBean.username}” />

� This specifies that when the form is submitted, the value entered by the user in the input text box should be passed on to the corresponding property in the server-side JavaBean named modelBean

JSF Navigation Model – 1

View

(JSF pages)


Controller

(Faces servlet)

Model

(Managed beans)


� Like Struts, JSF design is also based on an MVC approach

� Model is bound to methods and properties in the managed beans as specified in the faces-config.xml file


config.xml file� Controller is a servlet, that responds to all requests

that have a certain URL pattern, such as /faces/*, as defined in web.xml file� The controller prepares an object, called as JSF context,

which contains all accessible application data and routes the client to the appropriate view component (page)

� View is the set of JSF pages


� The navigation model is based on a set of navigation rules

� Example


� Example� If something is a success then pass control

to something-1; else to something-2

� Achieved by specifying appropriate rules in the faces-config.xml file (See next slide)


<navigation-rule><from-view-id>/page1.jsp</from-view-id><navigation-case>

<from-outcome>success</from-outcome>


<from-outcome>success</from-outcome><to-view-id>/page2.jsp</to-view-id>

</navigation-case><navigation-case>

<from-outcome>failure</from-outcome><to-view-id>/page3.jsp</to-view-id>

</navigation-case></navigation-rule>

JSF Case Study – Login

D:\Atul-personal\Lectures\SICSR\Web Technologies\WT-2\JSF\JSF-SimpleLogin (in NetBeans)


Atul Kahate

Application Logic

� The application should accept the user ID and password from the user and display a welcome page


display a welcome page

� The actual user ID and password logic would not be built in initially

index.jsp� <%@page contentType="text/html"%>� <%@page pageEncoding="UTF-8"%>

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

� <html>� <f:view>�

� <head>� <title>JSF Login Page Example</title>� </head>�

� <body bgcolor="pink">� <h:form>�

� <h1 align="center">The Login Page</h1>�

� <table border="1" bordecolor="maroon" cellspacing="1" cellpadding="1" align="center">


� <table border="1" bordecolor="maroon" cellspacing="1" cellpadding="1" align="center">�

� <tr>� <td>� <h:outputLabel for="txtName">� <h:outputText value="Name" />� </h:outputLabel>� </td>� <td><h:inputText id="txtName" value="#{UserBean.name}" /></td>� </tr>�

� <tr>� <td>� <h:outputLabel for="txtPassword">� <h:outputText value="Password" />� </h:outputLabel>� </td>� <td><h:inputSecret id="txtPassword" value="#{UserBean.password}" /></td>� </tr>�

� <tr align="center">� <td colspan="2">� <h:commandButton id="cmdLogin" value="Login" action="login" />� </td>� </tr>� </table>�

� </h:form>� </body>� </html>

� </f:view>

Understanding the JSP – 1

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

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

� These taglib directives refer to the JSTL tags


� These taglib directives refer to the JSTL tags

� jsf/core – Core library, contains custom action elements that represent JSF objects (which are independent of the page markup language)

� Jsf/html – HTML library, contains custom action elements that represent JSF objects (which are to be rendered as HTML elements)


<f:view>

� This is an action element� A view in JSF is the grouping of components

that make a specific UI screen


� A view in JSF is the grouping of components that make a specific UI screen

� The view contains an instance of the javax.faces.component.UIViewRoot class

� It does not display anything, but it is a container for other view components (e.g. input fields, buttons, etc)


<h:form>

� Represents a form component


Represents a form component

� Acts as a container for all input components that hold values that needs to be processed together

� Examples: <h:inputText>, <h:inputSecret>, <h:commandButton>


<h:outputLabel for="txtName">

<h:outputText value="Name" />

</h:outputLabel>


� Identifies a component that generates an HTML label


<h:inputText id="txtName" value="#{UserBean.name}" />

� Generates a text box with id txtName


� Generates a text box with id txtName

� The value that user enters here would populate an attribute called as name of a server-side JavaBean titled UserBean


<h:commandButton id="cmdLogin" value="Login" action="login" />

� Generates a command button with type


� Generates a command button with type as submit or reset

� The action attribute here has relevance, as explained later

How is this linked to the next page (welcome.jsp)?

index.jsp

…

<h:commandButton id … action = “login” />

…

faces-config.xml


faces-config.xml

…

<navigation-rule>

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

<navigation-case>

<from-outcome>login</from-outcome>

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

…

welcome.jsp

…

<h:commandButton id … action = “login” />

…

1

2

3

UserBean.java� /*� * UserBean.java� *� * Created on September 25, 2007, 4:34 PM� *� * To change this template, choose Tools | Template Manager� * and open the template in the editor.� */

� package com.jsf.login;

� /**


� /**� *� * @author AtulK� */� public class UserBean {�

� private String name;� private String password;�

� public String getName() {� return name;� }�

� public void setName(String userName) {� name = userName;� }�

� public String getPassword() {� return password;� }�

� public void setPassword(String userPassword) {� password = userPassword;� }�

� }

Role of UserBean.javaindex.jsp

<html>

…

<td><h:inputText id = “txtName” value = “#{UserBean.name}” /></td>

…

Whatever the user enters on the

screen in the text box is passed to

the JavaBean’s set method


UserBean.java

public class UserBean {

private String name;

…

public String get.ame () {

return name;

}

public void set.ame (String userName) {

name = username;

}

…

}

welcome.jsp

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

� <html>� <f:view> � <head>� <title>Welcome to JSF!</title>


� <title>Welcome to JSF!</title>� </head>�

� <body>� <h:form>� <h1 align="center">� <h:outputText id="txtUserName" value="Welcome #{UserBean.name}!" />� </h1> � </h:form>�

� </body>� </f:view>� </html>

Managed Beans and Navigation


Managed Beans

� We know that the model in MVC is many times made up of JavaBeans

� A JavaBean in JSF is called as a � A JavaBean in JSF is called as a managed bean


Temperature Conversion


Atul Kahate

Requirement

� Accept temperature in Celsius and convert it into Fahrenheit


� D:\Atul-personal\Lectures\SICSR\Web Technologies\WT-2\JSF\TemperatureConversion (or in NetBeans 6.0 JSF-Temperature-Conversion)

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>Celsius converter</title>� </head>� <body>� <f:view>� <h:form>� <table width="30%" height="30%" border="2" cellspacing="0" cellpadding="5">� <tr>� <td colspan="2">� <h:message for="celsiusEdit" />� </td>� </tr>

<tr>


� <tr>� <td>� <h:inputText id="celsiusEdit" value="#{pageBean.celsius}"/>� </td>� <td><b>� <h:outputText value="Celsius"/>� </b></td>� </tr>� <tr>� <td colspan="2">� <h:commandButton action="#{pageBean.convertToFahrenheit}" value="Convert"/>� </td>� </tr>� <tr>� <td>� <h:outputText value="#{pageBean.fahrenheit}"/>� </td>� <td><b>� <h:outputText value="Fahrenheit"/>� </b></td>� </tr>� </table>� </h:form>� </f:view>� </body>� </html>�

Understanding index.jsp – 1

<td colspan="2">

<h:message for="celsiusEdit" />

</td>


� Space reserved for possible error messages


<td>

<h:inputText id="celsiusEdit“ value="#{pageBean.celsius}"/>

</td>


� Text box called as celsiusEdit would be created, which maps to the celsius property of the pageBean


<td><b>

<h:outputText value="Celsius"/>

</b></td>


� HTML label would get created


<td colspan="2">

<h:commandButtonaction="#{pageBean.convertToFahrenheit}" value="Convert"/>

</td>


</td>

� An HTML button would created, which would call the convertToFahrenheitmethod of the pageBean


<td>

<h:outputText value="#{pageBean.fahrenheit}"/>

</td>


� Would display the value of the property fahrenheit of the pageBean


<td><b>

<h:outputText value="Fahrenheit"/>

</b></td>


� Would create a label

faces-config.xml

� <?xml version="1.0"?>� <!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>


� <faces-config>� <managed-bean>� <description> � Simple backing bean.� </description> � <managed-bean-name>pageBean</managed-bean-name> � <managed-bean-class>com.iflex.PageBean</managed-bean-

class> � <managed-bean-scope>request</managed-bean-scope> � </managed-bean>� </faces-config>

pageBean.java� /*� * PageBean.java� *� * Created on September 20, 2007, 5:28 PM� *� * To change this template, choose Tools | Template Manager� * and open the template in the editor.� */

� package com.iflex;

� public class PageBean {� private Double celsius = null;� private Double fahrenheit = null;

� public PageBean(){System.out.println("PageBean()");


� System.out.println("PageBean()");� }

� public void setCelsius(Double celsius){� System.out.println("setCelsius");� this.celsius = celsius;� }

� public Double getCelsius(){� System.out.println("getCelsius");� return celsius;� }

� public void setFahrenheit(Double fahrenheit){� System.out.println("setFahrenheit");� this.fahrenheit = fahrenheit;� }

� public Double getFahrenheit(){� System.out.println("getFahrenheit");� return fahrenheit;� }

� public void convertToFahrenheit(){� System.out.println("convertToFahrenheit");� setFahrenheit(new Double(getCelsius().doubleValue() * 1.8 + 32));� }� }

Exercises

� Modify the temperature conversion example by reversing the logic (accept temperature in F, convert to C)

� Accept the number of dollars the user has got, and � Accept the number of dollars the user has got, and convert that into the equivalent Indian Rupees (USD 1 = INR 43.10)

� NetBeans USDToINR

� Accept two numbers from the user and tell the user which is greater among the two

� NetBeans USDToINR


Message Bundles

D:\Atul\Lectures\SICSR\Web Technologies\WT-2\JSF\JSF-More-

Examples


Atul Kahate

What are Message Bundles?

� When we implement a Web application, it is a good idea to collect all message strings in a central location

� Helps keeping messages consistent and also makes � Helps keeping messages consistent and also makes in application localization/internationalization easier

� Example

� indexWindowTitle=Hi there!

� thankYouWindowTitle=Thank you for submitting your information


Using Message Bundle – Step 1

� Add a properties file to your application (e.g. messages.properties file in Source packages -> com.corejsf)packages -> com.corejsf)

� indexWindowTitle=Using Textfields and Textareas

� thankYouWindowTitle=Thank you for submitting your information

� thankYouPageTitle=Thank You!

� indexPageTitle=Please enter the following personal information

� namePrompt=Name:

� submitPrompt=Submit your information



� Make references to properties defined earlier in your JSP as needed (index.jsp)(index.jsp)

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

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

� <%--

� This file is an entry point for JavaServer Faces application.

� --%>

� <html>

� <f:view>

� <head>

� <title>

� <h:outputText value = "#{msgs.indexWindowTitle}" />

� </title>

� </head>

� <body>

� <h1><h:outputText value="#{msgs.indexPageTitle}" /></h1>

�

� <h:form>

� <table>

� <tr>

� <td>

� <h:outputText value = "#{msgs.namePrompt}" />

� </td>

� <td>

� <h:inputText value = "#{user.name}" />

� </td>

� </tr>

� </table>

� <h:commandButton value="#{msgs.submitPrompt}" action="thankYou" />

� </h:form>

� </f:view>

� </body>

� </html>



� The other JSP (thankYou.jsp)� <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>


� <html>

� <f:view>� <f:view>

� <head>

� <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

� <title>

� <h:outputText value = "#{msgs.thankYouWindowTitle}" />

� </title>

� </head>

� <body>

�

� <h1><h:outputText value="#{msgs.namePrompt}" />

� <h:outputText value="#{user.name}" /></h1>

�

� </f:view>

� </body>

� </html>



� Code the Bean (UserBean.java)� /*� * To change this template, choose Tools | Templates� * and open the template in the editor.� */

� package com.corejsf;

/**� /**� *� * @author atulk� */� public class UserBean {�

� private String name;

� public String getName() {� return name;� }

� public void setName(String name) {� this.name = name;� }

� }



� Add references to the config file (faces-config.xml)� <?xml version='1.0' encoding='UTF-8'?>

� 

� <faces-config version="1.2" � xmlns="http://java.sun.com/xml/ns/javaee" � xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" � xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">��

� <navigation-rule>� <from-view-id>/index.jsp</from-view-id>� <navigation-case>� <from-outcome>thankYou</from-outcome>� <to-view-id>/thankYou.jsp</to-view-id>� </navigation-case>� </navigation-rule>�

� <managed-bean>� <managed-bean-name>user</managed-bean-name>� <managed-bean-class>com.corejsf.UserBean</managed-bean-class>� <managed-bean-scope>session</managed-bean-scope> � </managed-bean>�

� <application>� <resource-bundle>� <base-name>com.corejsf.messages</base-name>� <var>msgs</var>� </resource-bundle>� </application>� </faces-config>


Various JSF UI-related Tags

D:\Atul\Lectures\SICSR\Web Technologies\WT-2\JSF\JSF-More-

Examples


index-UIExample.jsp� <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>


� <html>

� <f:view>

� <head>

� <link href="styles.css" rel="stylesheet" type="text/css" />

� <title>

� <h:outputText value="#{msgs.indexWindowTitle}" />

� </title>

� </head>

�

� <body>

� <h:outputText value="#{msgs.indexPageTitle}" styleClass="emphasis" />

� <h:form>

� <table>

� <tr>

� <td>

� <h:outputText value="#{msgs.namePrompt}" />

� </td>

� <td>

� <h:inputText value="#{form.name}" />

� </td>

� </tr>

�

� <tr>

� <td>

� <h:outputText value="#{msgs.contactMePrompt}" />

� </td>

� <td>

� <h:selectBooleanCheckbox value="#{form.contactMe}" />

� </td>

� </tr>

�

� <tr>

� <td>

� <h:outputText value="#{msgs.bestDayPrompt}" />

</td>� </td>

� <td>

� <h:selectManyMenu value="#{form.bestDaysToContact}">

� <f:selectItems value="#{form.daysOfTheWeekItems}" />

� </h:selectManyMenu>

� </td>

� </tr>

�

� <tr>

� <td>

� <h:outputText value="#{msgs.yearOfBirthPrompt}" />

� </td>

� <td>

� <h:selectOneListbox size="5" value="#{form.yearOfBirth}">

� <f:selectItems value="#{form.yearItems}" />

� </h:selectOneListbox>

� </td>

� </tr>

�

� <tr>

� <td>

� <h:outputText value="#{msgs.colorPrompt}" />

� </td>

� <td>

� <h:selectManyCheckbox value="#{form.colors}">

� <f:selectItems value="#{form.colorItems}" />

� </h:selectManyCheckbox>

� </td>

� </tr>

�

� <tr>

� <td>

� <h:outputText value="#{msgs.languagePrompt}" />

� </td>

�

� <td>

� <h:selectManyListbox value="#{form.languages}">

� <f:selectItems value="#{form.languageItems}" />

� </h:selectManyListbox>

� </td>

� </tr>

�

� <tr>

� <td>

� <h:outputText value="#{msgs.educationPrompt}" />

� </td>

� <td>

� <h:selectOneRadio value="#{form.education}" layout="pageDirection">

� <f:selectItems value="#{form.educationItems}" />

� </h:selectOneRadio>

� </td>

� </tr>

� </table>

�

� <h:commandButton value="#{msgs.buttonPrompt}" action="showInformation" />

�

� </h:form>

� </body>

� </f:view>

� </html>


showMoreInformation-UIExample.jsp



� <html>

� <f:view>

� <head>


� <title>

� <h:outputText value="#{msgs.indexWindowTitle}" />

� </title>

� </head>

�

�

� <body>

� <h:outputFormat value="#{msgs.thankYouLabel}">

� <f:param value="#{form.name}" />

� </h:outputFormat>

�

� <p>� <p>

�

� <table>

�

� <tr>

� <td><h:outputText value="#{msgs.contactMeLabel}" /></td>

� <td><h:outputText value="#{form.contactMe}" /></td>

� </tr>

�

� <tr>

� <td><h:outputText value="#{msgs.bestDayLabel}" /></td>

� <td><h:outputText value="#{form.bestDaysConcatenated}" /></td>

� </tr>

�

� <tr>

� <td><h:outputText value="#{msgs.yearOfBirthLabel}" /></td>

� <td><h:outputText value="#{form.yearOfBirth}" /></td>

� </tr>

�

� <tr>

� <td><h:outputText value="#{msgs.languageLabel}" /></td>

� <td><h:outputText value="#{form.languagesConcatenated}" /></td>

� </tr>

�

� <tr>

� <td><h:outputText value="#{msgs.colorLabel}" /></td>

� <td><h:outputText value="#{form.colorsConcatenated}" /></td>

� </tr>

�

� <tr>

� <td><h:outputText value="#{msgs.educationLabel}" /></td>

� <td><h:outputText value="#{form.education}" /></td>

� </tr>

�

� </table>

� </body>

� </f:view>

� </html>


faces-config.xml� <?xml version='1.0' encoding='UTF-8'?>


� <faces-config version="1.2"

� xmlns="http://java.sun.com/xml/ns/javaee"

� xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

� xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">

�

� <navigation-rule>

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

� <navigation-case>

� <from-outcome>thankYou</from-outcome>

� <to-view-id>/thankYou.jsp</to-view-id>

� </navigation-case>

� </navigation-rule>

�


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


� <from-outcome>showInformation</from-outcome>

� <to-view-id>/showMoreInformation-UIExample.jsp</to-view-id>



�

� <managed-bean>

� <managed-bean-name>user</managed-bean-name>

� <managed-bean-class>com.corejsf.UserBean</managed-bean-class>

� <managed-bean-scope>session</managed-bean-scope>

� </managed-bean>

�

� <managed-bean>

� <managed-bean-name>form</managed-bean-name>

� <managed-bean-class>com.corejsf.RegisterForm</managed-bean-class>


� </managed-bean>

�

� <application>

� <resource-bundle>

� <base-name>com.corejsf.messages</base-name>

� <var>msgs</var>

� </resource-bundle>

� </application>

� </faces-config>


RegisterForm.java� /*

� * To change this template, choose Tools | Templates

� * and open the template in the editor.

� */


� import java.text.DateFormatSymbols;

� import java.util.*;

� import javax.faces.model.SelectItem;

� /**

� *

� * @author atulk

� */

� public class RegisterForm {

� enum Education {

� HIGH_SCHOOL, BACHELOR, MASTER, DOCTOR

� };

�


� private boolean contactMe;

� private Integer [] bestDaysToContact;

� private Integer yearOfBirth;

� private String [] colors;

� private String [] languages;

� private Education education;

�

� public Integer [] getBestDaysToContact () {

� return bestDaysToContact;

� }

� public void setBestDaysToContact(Integer[] bestDaysToContact) {

� this.bestDaysToContact = bestDaysToContact;

� }

� public String[] getColors() {

� return colors;

� }

� public void setColors(String[] colors) {

� this.colors = colors;

� }

� public boolean isContactMe() {

� return contactMe;

� }

� public void setContactMe(boolean contactMe) {

� this.contactMe = contactMe;

� }

� public Education getEducation() {

� return education;

� }

� public void setEducation(Education education) {

� this.education = education;

� }

� public String[] getLanguages() {

� return languages;

� }

� public void setLanguages(String[] languages) {

� this.languages = languages;

� }

� public String getName() {

� return name;

� }

� public void setName(String name) {

� this.name = name;� this.name = name;

� }

� public Integer getYearOfBirth() {

� return yearOfBirth;

� }

� public void setYearOfBirth(Integer yearOfBirth) {

� this.yearOfBirth = yearOfBirth;

� }

�

� public Collection <SelectItem> getYearItems () {

� return birthYears;

� }

�

� public SelectItem [] getDaysOfTheWeekItems () {

� return daysOfTheWeek;

� }

�

� public Map <String, Object> getLanguageItems () {

� return languageItems;

� }

�

� public SelectItem [] getColorItems () {

� return colorItems;

� }

�

� public SelectItem [] getEducationItems () {

� return educationItems;

� }

�

� public String getBestDaysConcatenated () {

� return concatenate (bestDaysToContact);

� }

�

� public String getLanguagesConcatenated () {

� return concatenate (languages);

� }

�

� public String getColorsConcatenated () {

� return concatenate (colors);

� }

�

� private static String concatenate (Object [] values) {

� if (values == null) {

� return "";

� }

� StringBuilder r = new StringBuilder();

� for (Object value : values) {

� if (r.length () > 0) {

� r.append(',');

� }

� r.append(value.toString());

� }

�

� return r.toString();

� }

�

� private static SelectItem [] colorItems = {

� new SelectItem ("Red"),

� new SelectItem ("Blue"),

� new SelectItem ("Yellow"),

� new SelectItem ("Green"),

� new SelectItem ("Orange"),

� new SelectItem ("White"),

� new SelectItem ("Black"),

� new SelectItem ("Grey")

� };

�

� private static SelectItem [] educationItems = {

� new SelectItem (Education.HIGH_SCHOOL, "High School"),

� new SelectItem (Education.BACHELOR, "Bachelor's"),

� new SelectItem (Education.MASTER, "Master's"),

� new SelectItem (Education.DOCTOR, "Doctorate")

� };

�

� private static Map <String, Object> languageItems;

�

� static {

� languageItems = new LinkedHashMap <String, Object> ();

�

� languageItems.put ("English", "en");

� languageItems.put ("French", "fr");

� languageItems.put ("Russian", "ru");

� languageItems.put ("Italian", "it");

� languageItems.put ("Spanis", "es");

� }

�

� private static Collection <SelectItem> birthYears;

�

� static {

� birthYears = new ArrayList <SelectItem> ();

� for (int i = 1900; i < 2000; i++) {

� birthYears.add (new SelectItem (i));

� }

� }

�

� private static SelectItem [] daysOfTheWeek;

�

� static {

� DateFormatSymbols symbols = new DateFormatSymbols ();

� String [] weekdays = symbols.getWeekdays ();

� daysOfTheWeek = new SelectItem [7];

� for (int i = Calendar.SUNDAY; i <= Calendar.SATURDAY; i++) {

� daysOfTheWeek [i - 1] = new SelectItem (new Integer (i), weekdays [i]);

� }

� }

� }


messages.properties� # To change this template, choose Tools | Templates� # and open the template in the editor.� indexWindowTitle=Using JSF UI Features� indexPageTitle=Please enter the following information

� namePrompt=Name:� contactMePrompt=Contact me� bestDayPrompt=What is the best day to contact you?� yearOfBirthPrompt=What year were you born?

buttonPrompt=Submit information� buttonPrompt=Submit information� languagePrompt=Select the languages you speak:� educationPrompt=Select your highest education level:� emailAppPrompt=Select your email application:� colorPrompt=Select your favourite colors:

� thankYouLabel=Thank you {0}, for your information� contactMeLabel=Contact me:� bestDayLabel=Best day to contact you:� yearOfBirthLabel=Your year of birth:� colorLabel=Colors:� languageLabel=Languages:� educationLabel=Education:


Messages


JSF Messages

� During the JSF life cycle, any object can create a message and add it to a queue of messages maintained by the faces context

At the end of the life cycle (i.e. in the Render � At the end of the life cycle (i.e. in the Render Response phase), we can display those messages in a view

� Usually, messages are associated with a UI component and are used to show validation errors


Message Types

� Information

� Warning

� Error� Error

� Fatal


Message Details

� All messages can contain a summary and a detail

� Example: summary could be Invalid entry and detail could be Age > 100 is not accepted

� Two JSF tags are used for message handling:� Two JSF tags are used for message handling:

� h:messages (Multiple messages for a component)

� h:message (Only a single message for a component)

� They have many attributes, such as errorClass, errorStyle, fatalClass, tooltip, etc


index-messageExample.jsp� <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>


� <%--


� --%>

� <html>

� <f:view>

� <head>


� <title>


� </title>

� </head>

� <body>


�

� <h:form>

� <h:outputText value="#{msgs.greeting}" styleClass="emphasis" />

� <br />

� <h:messages errorClass="errors" layout="table" />

� <br />

�

� <table>

� <tr>

� <td>


� </td>

� <td>

� <h:inputText value = "#{ageCheck.name}"

� required="true" label="#{msgs.namePrompt}" />

� </td>

� <td>

� <h:message for="name" errorClass="errors" />

� </td>

� </tr>

�

� <tr>

� <td>

� <h:outputText value = "#{msgs.agePrompt}" />

� </td>

� <td>

� <h:inputText value = "#{ageCheck.age}"

� required="true" size="3"

� label="#{msgs.agePrompt}" />

� </td>

� <td>

� <h:message for="age" errorClass="errors" />

� </td>

� </tr>

� </table>


� </h:form>

� </f:view>

� </body>

� </html>


thankYou-messageExample.jsp

� <%--

� Document : thankYou-messageExample

� Created on : May 5, 2008, 3:26:50 PM

� Author : atulk

� --%>

� <%@page contentType="text/html" pageEncoding="UTF-8"%><%@page contentType="text/html" pageEncoding="UTF-8"%>

� <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

� "http://www.w3.org/TR/html4/loose.dtd">

� <html>

� <head>


� <title>Thank You</title>

� </head>

� <body>

� <h2>Thanks for entering the required information!</h2>

� </body>

� </html>


AgeCheckBean.java� /*



� */


� /**

� *

� * @author atulk

� */� */

� public class AgeCheckBean {

�


� private int age;

� public String getName() {

� return name;

� }

� public void setName(String name) {

� this.name = name;

� }

�

� public int getAge() {

� return age;

� }

� public void setAge(int age) {

� this.age = age;

� }

� }


messages.properties� # To change this template, choose Tools | Templates

� # and open the template in the editor.

� greeting=Please fill out the following details

� indexWindowTitle=Using JSF UI Features

� indexPageTitle=Please enter the following information


� contactMePrompt=Contact me� contactMePrompt=Contact me

� bestDayPrompt=What is the best day to contact you?

� yearOfBirthPrompt=What year were you born?

� buttonPrompt=Submit information

� languagePrompt=Select the languages you speak:

� educationPrompt=Select your highest education level:

� emailAppPrompt=Select your email application:

� colorPrompt=Select your favourite colors:

� agePrompt=Age:

� submitPrompt=Submit form

� thankYouLabel=Thank you {0}, for your information

� contactMeLabel=Contact me:

� bestDayLabel=Best day to contact you:

� yearOfBirthLabel=Your year of birth:

� colorLabel=Colors:

� languageLabel=Languages:

� educationLabel=Education:








�








�








�


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



� <to-view-id>/thankYou-messageExample.jsp</to-view-id>



�

�

� <managed-bean>




� </managed-bean>

�

� <managed-bean>

� <managed-bean-name>ageCheck</managed-bean-name>

� <managed-bean-class>com.corejsf.AgeCheckBean</managed-bean-class>


� </managed-bean>

�

� <managed-bean>




� </managed-bean>

�

� <application>



� <var>msgs</var>


� </application>

� </faces-config>


Panels


What are Panels?

� Normally we use HTML tables to align form prompts and messages

� It is error-prone and tedious� It is error-prone and tedious

� Hence, JSF introduces h:panelGrid, which generates a table element

<h:panelGrid columns=“3”>

…

</h:panelGrid>JavaServer Faces (JSF) |

Atul Kahate 72

Note about columns

� The columns attribute is optional – defaults to 1

� If specified, UI components are placed from left to right and top to bottomleft to right and top to bottom

� Example: If we specify columns as 3 and we have 9 components, we will get a panel grid with 3 rows and 3 columns – instead, if we have 10 components, we will have 4 rows and 3 columns (last two columns in the fourth row would be empty)


index-panelGrid.jsp� <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>


� <%--


� --%>

� <html>

� <f:view>

� <head>


� <title>


� </title>

� </head>

� <body>


�

� <h:form>

� <h:panelGrid columns="2" rowClasses="oddRows, evenRows" border="2">


� <h:panelGroup>

� <h:inputText id="name" value="#{ageCheck.name}"

� required="true" label="#{msgs.namePrompt}" />

� <h:message for="name" errorClass="errors" />

� </h:panelGroup>

�

� <h:outputText value = "#{msgs.agePrompt}" />

� <h:inputText id="age" value="#{ageCheck.age}"

� size="3" label="#{msgs.agePrompt}" required= "true"/>

� <h:message for="age" errorClass="errors" />

�

�

� </h:panelGrid>


� </h:form>

� </f:view>

� </body>

� </html>








�








�








�


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






�


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






�

�

�

� <managed-bean>




� </managed-bean>

�

� <managed-bean>

� <managed-bean-name>ageCheck</managed-bean-name>

� <managed-bean-class>com.corejsf.AgeCheckBean</managed-bean-class>


� </managed-bean>

�

� <managed-bean>




� </managed-bean>

�

� <application>



� <var>msgs</var>


� </application>

� </faces-config>


Data Tables


Data Table

� <h:dataTable> tag is used to deal with tabular data

� Iterates over data to create an HTML table

<h:dataTable value’#{items}’ var=‘item’>

<h:column>

<h:output_text value=‘#{item.propertyName}’>

</h:column>

<h:column>

<h:output_text value=‘#{item.propertyName}’>

</h:column>

…

</h:dataTable>

Only <h:column> is allowed inside the body of <h:dataTable>


Allowed sources of data

� Java object

� Array

� An instance of java.util.List� An instance of java.util.List

� An instance of java.sql.ResultSet

� An instance of javax.servlet.jsp.jstl.sql.Result

� An instance of javax.faces.model.DataModel


index-dataTable-1.jsp� <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>


� <%--


� --%>

� <html>

� <f:view>

� <head>

� <title>

� <h:outputText value = "#{msgs.indexMessageTitle}" />

� </title>

� </head>

�

� <body>

� <h1><h:outputText value="#{msgs.indexMessageTitle}" /></h1>

�

� <p />

�

� <h:form>

�

� <h:dataTable value="#{tableData.names}" var="name">

�

� <h:column>

� <h:outputText value="#{name.last}" />

� </h:column>

�

� <h:column>

� <h:outputText value="#{name.first}" />

� </h:column>

�

� </h:dataTable>

�

� </h:form>

� </f:view>

� </body>

� </html>


TableData.java� /*



� */


� /**

*� *

� * @author atulk

� */

� public class TableData {

�

� private static final Name [] names = new Name [] {

� new Name ("Atul", "Kahate"),

� new Name ("Dinesh", "Samant"),

� new Name ("Umesh", "Aherwadikar"),

� new Name ("Parag", "Chincholkar")

� };

�

� public Name [] getNames () {

� return names;

� }

� }


Name.java� /*



� */


� /**

� *

� * @author atulk

� */

� public class Name {

��

� private String first;

� private String last;

� public Name(String first, String last) {

� this.first = first;

� this.last = last;

� }

�

� public void setFirst (String first) {


� }

�

� public String getFirst () {

� return first;

� }

�

� public void setLast (String last) {


� }

�

� public String getLast () {

� return last;

� }

� }


dataTable with Headers and Footers




� <%--


� --%>

� <html>

� <f:view>

� <head>


� <title>

� <h:outputText value = "#{msgs.windowTitle1}" />

� </title>

� </head>

�

� <body>

� <h:form>

�

� <h:dataTable value="#{tableData.names}" var="name"

� captionStyle="font-size: 0.95em; font-style: italic"

� style="width: 250px;">

�

� <f:facet name="caption">

� <h:outputText value="An array of names: "/>

� </f:facet>

�

� <h:column headerClass="columnHeader"

� footerClass="columnFooter">

� <f:facet name="header">

� <h:outputText value="#{msgs.lastnameColumn}" />

� </f:facet>

�

� <h:outputText value="#{name.last}" />

�

� <f:facet name="footer">

� <h:outputText value="#{msgs.alphanumeric}" />

� </f:facet>

�

� </h:column>

�

� <h:column headerClass="columnHeader"

� footerClass="columnFooter">


� <h:outputText value="#{msgs.firstnameColumn}" />

� </f:facet>

�

� <h:outputText value="#{name.first}" />

�

� <f:facet name="footer">

� <h:outputText value="#{msgs.alphanumeric}" />

� </f:facet>

�

� </h:column>

�

� </h:dataTable>

�

� </h:form>

� </body>

� </f:view>

� </html>


messages.properties� # To change this template, choose Tools | Templates

� # and open the template in the editor.

� greeting=Please fill out the following details

� indexWindowTitle=Using JSF UI Features

� indexPageTitle=Please enter the following information

� indexMessageTitle=This is for your information

� windowTitle1=Headers, Footers, and Captions


� contactMePrompt=Contact me� contactMePrompt=Contact me

� bestDayPrompt=What is the best day to contact you?

� yearOfBirthPrompt=What year were you born?

� buttonPrompt=Submit information

� languagePrompt=Select the languages you speak:

� educationPrompt=Select your highest education level:

� emailAppPrompt=Select your email application:

� colorPrompt=Select your favourite colors:

� agePrompt=Age:

� submitPrompt=Submit form

� thankYouLabel=Thank you {0}, for your information

� contactMeLabel=Contact me:

� bestDayLabel=Best day to contact you:

� yearOfBirthLabel=Your year of birth:

� colorLabel=Colors:

� languageLabel=Languages:

� educationLabel=Education:

� lastnameColumn=Last Name

� firstnameColumn=First Name

� editColumn=edit

� alphanumeric=[alpha]


dataTable – Allow Edits




� <%--


� --%>

� <html>

� <f:view>

� <head>


� <title>


� </title>

� </head>

�

� <body>

� <h:form>

�

� <h:dataTable value="#{tableData.names}" var="name"

� captionStyle="font-size: 0.95em; font-style: italic"

� style="width: 250px;">

� <h:column>

�


� <h:outputText value="#{msgs.editColumn}"

� style="font-weight:bold" />

� </f:facet>

�

� <h:selectBooleanCheckbox value="#{name.editable}"

� onclick="submit()" />

� </h:column>

�

� <h:column>


� <h:outputText value="#{msgs.lastnameColumn}"

� style="font-weight: bold" />

� </f:facet>

�

� <h:inputText value="#{name.last}" rendered="#{name.editable}"

� size="10" />

�

� <h:outputText value="#{name.last}"

� rendered="#{not name.editable}" />

� </h:column>

�

� <h:column>

�


� <h:outputText value="#{msgs.firstnameColumn}"

� style="font-weight:bold" />

� </f:facet>

�

� <h:inputText value="#{name.first}" rendered="#{name.editable}" size="10" />

� <h:outputText value="#{name.first}" rendered="#{not name.editable}" />

�

� </h:column>

�

� </h:dataTable>

�

� <h:commandButton value="#{msgs.saveChangesButtonText}" />

�

� </h:form>

� </body>

� </f:view>

� </html>


Name.java� /*



� */


� /**

� *

� * @author atulk

� */

� public class Name {

�

� private String first;

� private String last;

� private boolean editable = false;

� public Name(String first, String last) {



� }

�

� public void setFirst (String first) {


� }

�

� public String getFirst () {

� return first;

� }

�

� public void setLast (String last) {


� }

�

� public String getLast () {

� return last;

� }

�

� public boolean getEditable () {

� return editable;

� }

� }


Database Tables


Database Tables – Usage

� The JDF data table component is a good fit for showing data stored in a databasedatabase

� For this purpose, we need to write a managed bean, which will perform the JDBC operations to bring the data of interest


CustomerBean.java� /*



� */


� import java.sql.*;

� import javax.servlet.jsp.jstl.sql.Result;

� import javax.servlet.jsp.jstl.sql.ResultSupport;

� import javax.sql.DataSource;

� /**

� *

� * @author atulk

� */

� public class CustomerBean {

�

� private Connection con;� private Connection con;

�

� public void open () throws SQLException {

� if (con != null) {

� return;

� }

� con = DriverManager.getConnection ("jdbc:derby://localhost:1527/customer");

� }

�

� public Result getAll () throws SQLException {

� try {

� open ();

� Statement stmt = con.createStatement();

� ResultSet rs = stmt.executeQuery ("SELECT * FROM customers");

� return ResultSupport.toResult(rs);

� } finally {

� close ();

� }

� }

�

� public void close () throws SQLException {

� if (con != null) {

� con.close();

� con = null;

� }

� }

� }




� <%--


� --%>

� <html>

� <f:view>

� <head>


� <title>


� </title>

� </head>

�

� <body>

� <h:form>

� <h:dataTable value="#{customer.all}" var="customer"

� styleClass="customers"

� headerClass="customersHeader"

� rowClasses="oddRow,evenRow"

� columnClasses="custid,name">

� 

� <h:column>


� <h:outputText value="#{msgs.customerIdHeader}" />

� </f:facet>

� <h:outputText value="#{customer.cust_ID}" />

� </h:column>

�

� <h:column>


� <h:outputText value="#{msgs.nameHeader}" />

� </f:facet>

� <h:outputText value="#{customer.name}" />

� </h:column>

�

� <h:column>


� <h:outputText value="#{msgs.phoneHeader}" />

� </f:facet>

� <h:outputText value="#{customer.phone_number}" />

� </h:column>

�

� <h:column>


� <h:outputText value="#{msgs.addressHeader}" />

� </f:facet>

� <h:outputText value="#{customer.street_address}" />

� </h:column>

�

� <h:column>


� <h:outputText value="#{msgs.cityHeader}" />

� </f:facet>

� <h:outputText value="#{customer.city}" />

� </h:column>

�

� <h:column>


� <h:outputText value="#{msgs.stateHeader}" />

� </f:facet>

� <h:outputText value="#{customer.state}" />

� </h:column>

�

� </h:dataTable>

� </h:form>

� </body>

� </f:view>

� </html>


styles.css� /*

� Document : styles

� Created on : May 5, 2008, 4:02:56 PM

� Author : atulk

� Description:

� Purpose of the stylesheet follows.

� */

� /*

� TODO customize this sample style

� Syntax recommendation http://www.w3.org/TR/REC-CSS2/

� */

� body {

� background: #eee;

� }

� .emphasis {

� font-size: 1.3em;

� }

� .errors {

� font-style: italic;

� }

� .evenRows {

� background: PowderBlue;

� }

� .oddRows {

� background: MediumTurquoise;

� }

� .customers {

� border: thin solid black;

� }

� .customersHeader {

� text-align: center;

� font-style:italic;

� color: Snow;

� background: Teal;

� }

� .custid {

� height: 25px;



� }

� .name {



� }

� .evenRow {


� }

� .oddRow {


� }


Conversion and Validation


Overview of Conversion and Validation

� Two-step process

� Convert into local value (i.e. from request object’s string to whatever data type the object’s string to whatever data type the model expects) and then validate

� If ok, update model (i.e. set the bean properties with the request values)


Using Standard Convertors

(JSF-Convertors-and-Validators in NetBeans)


Numbers and Dates

� Suppose we want to accept the amount, card number, and card expiry date for a paymentdate for a payment

� What would happen if we code our JSP, bean etc as follows?

� Try running it


convertor-example-1-original.jsp� <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>


� <%--


� --%>

� <html>

� <f:view>

� <head>


� <title>

� <h:outputText value = "#{msgs.indexTitle1}" />

� </title>

� </head>

�

� <body>

� <h:form>

�

� <h1><h:outputText value="#{msgs.bodyTitle1}" /></h1>

�

� <h:panelGrid columns="2" border="2" cellpadding="5" rowClasses="oddRows,evenRows">

�

� <h:outputLabel value="#{msgs.amountPrompt}: " />

� <h:inputText id="amount" value="#{payment.amount}“ />

�

� <h:outputLabel value="#{msgs.cardNumberPrompt}: " />

� <h:inputText id="cardNumber" value="#{payment.cardNumber}" />

�

�

� <h:outputLabel value="#{msgs.expiryDatePrompt}: " />

� <h:inputText id="expiryDate" value="#{payment.expiryDate}“ />

�

� </h:panelGrid>

�

� <br />

�

� <h:commandButton value="#{msgs.submitPrompt}" action = "submit" />

�

�

� </h:form>

� </body>

� </f:view>

� </html>


PaymentBean.java� /*



� */


� import java.util.Date;

� /**

� *

� * @author atulk

� */

� public class PaymentBean {

�

� private float amount;

� private String cardNumber;

� private Date expiryDate;

� public float getAmount() {

� return amount;

� }

� public void setAmount(float amount) {

� this.amount = amount;

� }

� public String getCardNumber() {

� return cardNumber;

� }

� public void setCardNumber(String cardNumber) {

� this.cardNumber = cardNumber;

� }

� public Date getExpiryDate() {

� return expiryDate;

� }

� public void setExpiryDate(Date expiryDate) {

� this.expiryDate = expiryDate;

� }

�

�

� }








�


� <from-view-id>/convertor-example-1.jsp</from-view-id>� <from-view-id>/convertor-example-1.jsp</from-view-id>


� <from-outcome>submit</from-outcome>

� <to-view-id>/convertor-example-1-output.jsp</to-view-id>



�

� <managed-bean>

� <managed-bean-name>payment</managed-bean-name>

� <managed-bean-class>com.corejsf.PaymentBean</managed-bean-class>


� </managed-bean>

�

� <application>



� <var>msgs</var>


� </application>

�

� </faces-config>


messages.properties

� indexTitle1=Payment Information Processing

� bodyTitle1=Enter payment information

� amountPrompt=Amount

� cardNumberPrompt=Card Number

� expiryDatePrompt=Expiry Date

� submitPrompt=Submit


styles.css� /*

� Document : styles

� Created on : May 12, 2008, 11:37:01 AM

� Author : atulk

� Description:

� Purpose of the stylesheet follows.

� */

/* � /*

� TODO customize this sample style

� Syntax recommendation http://www.w3.org/TR/REC-CSS2/

� */

� body {

� background: #eee;

� }

� .evenRows {

� background-color: silver;

� }

� .oddRows {


� }


convertor-example-1-output.jsp

� <%--

� Document : convertor-example-1-output

� Created on : May 12, 2008, 11:03:02 AM

� Author : atulk

� --%>

� <%@page contentType="text/html" pageEncoding="UTF-8"%><%@page contentType="text/html" pageEncoding="UTF-8"%>

� <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

� "http://www.w3.org/TR/html4/loose.dtd">

� <html>

� <head>


� <title>JSP Page</title>

� </head>

� <body>

� <h2>Hello World!</h2>

� </body>

� </html>


What is the result?

� In the Glassfish output, we would notice conversion errors

� The screen would not move to the next � The screen would not move to the next page

� How do we fix this?

� Use convertors (see modified JSP on the next slide)


convertor-example-1.jsp� <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>


� <%--


� --%>

� <html>

� <f:view>

� <head>


� <title>


� </title>

� </head>

�

� <body>

� <h:form>

��


�


�


� <h:inputText id="amount" value="#{payment.amount}">

� <f:convertNumber minFractionDigits="2" />

� </h:inputText>

�


� <h:inputText id="cardNumber" value="#{payment.cardNumber}" />

�

�


� <h:inputText id="expiryDate" value="#{payment.expiryDate}">

� <f:convertDateTime pattern="MM/yyyy" />

� </h:inputText>

�

� </h:panelGrid>

�

� <br />

�


�

�

� </h:form>

� </body>

� </f:view>

� </html>


Result now?

� We have added convertors as follows:

� <h:inputText value=“#{payment.amount}”>

� <f:convertNumber minFractionDigits=“2” />

</h:inputText>� </h:inputText>

� AND

� <h:inputText value=“#{payment.date}”>

� <f:convertDateTime pattern=“MM/yyyy” />

� </h:inputText>

� They ensure correct inputJavaServer Faces (JSF) |

Atul Kahate 105

Conversion even in the output!

� convertor-example-1-output.jsp



� <%--


� --%>

� <html>

� <f:view>

� <head>


� <title>


� </title>

� </head>

�

� <body>

� <h:form>� <h:form>

�


�


�


� <h:outputText value="#{payment.amount}">

� <f:convertNumber type="currency"/>

� </h:outputText>

�


� <h:outputText id="cardNumber" value="#{payment.cardNumber}" />

�

�


� <h:outputText id="expiryDate" value="#{payment.expiryDate}">

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

� </h:outputText>

�

� </h:panelGrid>

�

� <br />

�


�

�

� </h:form>

� </body>

� </f:view>

� </html>


Thank You!


Atul Kahate

Date post:	16-May-2015
Category:	Education
Upload:	gauravashq
View:	256 times
Download:	0 times