AK 5 JSF 21 july 2008
-
Upload
gauravashq -
Category
Education
-
view
256 -
download
0
description
Transcript of AK 5 JSF 21 july 2008
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
JavaServer Faces (JSF) | Atul Kahate 3
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
JavaServer Faces (JSF) | Atul Kahate 4
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
JavaServer Faces (JSF) | Atul Kahate 5
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
JavaServer Faces (JSF) | Atul Kahate 6
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
JavaServer Faces (JSF) | Atul Kahate 7
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
JavaServer Faces (JSF) | Atul Kahate 8
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
JavaServer Faces (JSF) | Atul Kahate 9
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
JavaServer Faces (JSF) | Atul Kahate 10
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
JavaServer Faces (JSF) | Atul Kahate 12
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
JavaServer Faces (JSF) | Atul Kahate 13
� 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>
JavaServer Faces (JSF) | Atul Kahate 14
<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
JavaServer Faces (JSF) | Atul Kahate 15
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
JavaServer Faces (JSF) | Atul Kahate 16
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:
JavaServer Faces (JSF) | Atul Kahate 17
� 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)
JavaServer Faces (JSF) | Atul Kahate 18
Controller
(Faces servlet)
Model
(Managed beans)
JSF Navigation Model – 2
� 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
JavaServer Faces (JSF) | Atul Kahate 19
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
JSF Navigation Model – 3
� The navigation model is based on a set of navigation rules
� Example
JavaServer Faces (JSF) | Atul Kahate 20
� 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)
JSF Navigation Model – 3
<navigation-rule><from-view-id>/page1.jsp</from-view-id><navigation-case>
<from-outcome>success</from-outcome>
JavaServer Faces (JSF) | Atul Kahate 21
<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)
22JavaServer Faces (JSF) |
Atul Kahate
Application Logic
� The application should accept the user ID and password from the user and display a welcome page
JavaServer Faces (JSF) | Atul Kahate 23
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">
JavaServer Faces (JSF) | Atul Kahate 24
� <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
JavaServer Faces (JSF) | Atul Kahate 25
� 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)
Understanding the JSP – 2
<f:view>
� This is an action element� A view in JSF is the grouping of components
that make a specific UI screen
JavaServer Faces (JSF) | Atul Kahate 26
� 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)
Understanding the JSP – 3
<h:form>
� Represents a form component
JavaServer Faces (JSF) | Atul Kahate 27
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>
Understanding the JSP – 4
<h:outputLabel for="txtName">
<h:outputText value="Name" />
</h:outputLabel>
JavaServer Faces (JSF) | Atul Kahate 28
� Identifies a component that generates an HTML label
Understanding the JSP – 5
<h:inputText id="txtName" value="#{UserBean.name}" />
� Generates a text box with id txtName
JavaServer Faces (JSF) | Atul Kahate 29
� 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
Understanding the JSP – 6
<h:commandButton id="cmdLogin" value="Login" action="login" />
� Generates a command button with type
JavaServer Faces (JSF) | Atul Kahate 30
� 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
JavaServer Faces (JSF) | Atul Kahate 31
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;
� /**
JavaServer Faces (JSF) | Atul Kahate 32
� /**� *� * @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
JavaServer Faces (JSF) | Atul Kahate 33
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>
JavaServer Faces (JSF) | Atul Kahate 34
� <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
JavaServer Faces (JSF) | Atul Kahate 35
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
JavaServer Faces (JSF) | Atul Kahate 36
Temperature Conversion
37JavaServer Faces (JSF) |
Atul Kahate
Requirement
� Accept temperature in Celsius and convert it into Fahrenheit
JavaServer Faces (JSF) | Atul Kahate 38
� 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>
JavaServer Faces (JSF) | Atul Kahate 39
� <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>
JavaServer Faces (JSF) | Atul Kahate 40
� Space reserved for possible error messages
Understanding index.jsp – 2
<td>
<h:inputText id="celsiusEdit“ value="#{pageBean.celsius}"/>
</td>
JavaServer Faces (JSF) | Atul Kahate 41
� Text box called as celsiusEdit would be created, which maps to the celsius property of the pageBean
Understanding index.jsp – 3
<td><b>
<h:outputText value="Celsius"/>
</b></td>
JavaServer Faces (JSF) | Atul Kahate 42
� HTML label would get created
Understanding index.jsp – 4
<td colspan="2">
<h:commandButtonaction="#{pageBean.convertToFahrenheit}" value="Convert"/>
</td>
JavaServer Faces (JSF) | Atul Kahate 43
</td>
� An HTML button would created, which would call the convertToFahrenheitmethod of the pageBean
Understanding index.jsp – 5
<td>
<h:outputText value="#{pageBean.fahrenheit}"/>
</td>
JavaServer Faces (JSF) | Atul Kahate 44
� Would display the value of the property fahrenheit of the pageBean
Understanding index.jsp – 6
<td><b>
<h:outputText value="Fahrenheit"/>
</b></td>
JavaServer Faces (JSF) | Atul Kahate 45
� 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>
JavaServer Faces (JSF) | Atul Kahate 46
� <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()");
JavaServer Faces (JSF) | Atul Kahate 47
� 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
JavaServer Faces (JSF) | Atul Kahate 48
Message Bundles
D:\Atul\Lectures\SICSR\Web Technologies\WT-2\JSF\JSF-More-
Examples
49JavaServer Faces (JSF) |
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
JavaServer Faces (JSF) | Atul Kahate 50
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
JavaServer Faces (JSF) | Atul Kahate 51
Using Message Bundle – Step 2
� 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>
JavaServer Faces (JSF) | Atul Kahate 52
Using Message Bundle – Step 3
� The other JSP (thankYou.jsp)� <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
� <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
� <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>
JavaServer Faces (JSF) | Atul Kahate 53
Using Message Bundle – Step 4
� 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;� }
� }
JavaServer Faces (JSF) | Atul Kahate 54
Using Message Bundle – Step 5
� Add references to the config file (faces-config.xml)� <?xml version='1.0' encoding='UTF-8'?>
� <!-- =========== FULL CONFIGURATION FILE ================================== -->
� <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>
JavaServer Faces (JSF) | Atul Kahate 55
Various JSF UI-related Tags
D:\Atul\Lectures\SICSR\Web Technologies\WT-2\JSF\JSF-More-
Examples
JavaServer Faces (JSF) | Atul Kahate 56
index-UIExample.jsp� <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
� <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
� <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>
JavaServer Faces (JSF) | Atul Kahate 57
showMoreInformation-UIExample.jsp
� <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
� <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
� <html>
� <f:view>
� <head>
� <link href="styles.css" rel="stylesheet" type="text/css" />
� <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>
JavaServer Faces (JSF) | Atul Kahate 58
faces-config.xml� <?xml version='1.0' encoding='UTF-8'?>
� <!-- =========== FULL CONFIGURATION FILE ================================== -->
� <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>
�
� <navigation-rule>
� <from-view-id>/index-UIExample.jsp</from-view-id>
� <navigation-case>
� <from-outcome>showInformation</from-outcome>
� <to-view-id>/showMoreInformation-UIExample.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>
�
� <managed-bean>
� <managed-bean-name>form</managed-bean-name>
� <managed-bean-class>com.corejsf.RegisterForm</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>
JavaServer Faces (JSF) | Atul Kahate 59
RegisterForm.java� /*
� * To change this template, choose Tools | Templates
� * and open the template in the editor.
� */
� package com.corejsf;
� 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 String name;
� 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]);
� }
� }
� }
JavaServer Faces (JSF) | Atul Kahate 60
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:
JavaServer Faces (JSF) | Atul Kahate 61
Messages
JavaServer Faces (JSF) | Atul Kahate 62
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
JavaServer Faces (JSF) | Atul Kahate 63
Message Types
� Information
� Warning
� Error� Error
� Fatal
JavaServer Faces (JSF) | Atul Kahate 64
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
JavaServer Faces (JSF) | Atul Kahate 65
index-messageExample.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>
� <link href="styles.css" rel="stylesheet" type="text/css" />
� <title>
� <h:outputText value = "#{msgs.indexWindowTitle}" />
� </title>
� </head>
� <body>
� <h1><h:outputText value="#{msgs.indexPageTitle}" /></h1>
�
� <h:form>
� <h:outputText value="#{msgs.greeting}" styleClass="emphasis" />
� <br />
� <h:messages errorClass="errors" layout="table" />
� <br />
�
� <table>
� <tr>
� <td>
� <h:outputText value = "#{msgs.namePrompt}" />
� </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:commandButton value="#{msgs.submitPrompt}" action="thankYou" />
� </h:form>
� </f:view>
� </body>
� </html>
JavaServer Faces (JSF) | Atul Kahate 66
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>
� <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
� <title>Thank You</title>
� </head>
� <body>
� <h2>Thanks for entering the required information!</h2>
� </body>
� </html>
JavaServer Faces (JSF) | Atul Kahate 67
AgeCheckBean.java� /*
� * To change this template, choose Tools | Templates
� * and open the template in the editor.
� */
� package com.corejsf;
� /**
� *
� * @author atulk
� */� */
� public class AgeCheckBean {
�
� private String name;
� 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;
� }
� }
JavaServer Faces (JSF) | Atul Kahate 68
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
� namePrompt=Name:
� 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:
JavaServer Faces (JSF) | Atul Kahate 69
faces-config.xml� <?xml version='1.0' encoding='UTF-8'?>
� <!-- =========== FULL CONFIGURATION FILE ================================== -->
� <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>
�
� <navigation-rule>
� <from-view-id>/index-UIExample.jsp</from-view-id>
� <navigation-case>
� <from-outcome>showInformation</from-outcome>
� <to-view-id>/showMoreInformation-UIExample.jsp</to-view-id>
� </navigation-case>
� </navigation-rule>
�
� <navigation-rule>
� <from-view-id>/index-messageExample.jsp</from-view-id>
� <navigation-case>
� <from-outcome>thankYou</from-outcome>
� <to-view-id>/thankYou-messageExample.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>
�
� <managed-bean>
� <managed-bean-name>ageCheck</managed-bean-name>
� <managed-bean-class>com.corejsf.AgeCheckBean</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-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>
JavaServer Faces (JSF) | Atul Kahate 70
Panels
JavaServer Faces (JSF) | Atul Kahate 71
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)
JavaServer Faces (JSF) | Atul Kahate 73
index-panelGrid.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>
� <link href="styles.css" rel="stylesheet" type="text/css" />
� <title>
� <h:outputText value = "#{msgs.indexWindowTitle}" />
� </title>
� </head>
� <body>
� <h1><h:outputText value="#{msgs.indexPageTitle}" /></h1>
�
� <h:form>
� <h:panelGrid columns="2" rowClasses="oddRows, evenRows" border="2">
� <h:outputText value = "#{msgs.namePrompt}" />
� <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:commandButton value="#{msgs.submitPrompt}" action="thankYou" />
� </h:form>
� </f:view>
� </body>
� </html>
JavaServer Faces (JSF) | Atul Kahate 74
faces-config.xml� <?xml version='1.0' encoding='UTF-8'?>
� <!-- =========== FULL CONFIGURATION FILE ================================== -->
� <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>
�
� <navigation-rule>
� <from-view-id>/index-UIExample.jsp</from-view-id>
� <navigation-case>
� <from-outcome>showInformation</from-outcome>
� <to-view-id>/showMoreInformation-UIExample.jsp</to-view-id>
� </navigation-case>
� </navigation-rule>
�
� <navigation-rule>
� <from-view-id>/index-messageExample.jsp</from-view-id>
� <navigation-case>
� <from-outcome>thankYou</from-outcome>
� <to-view-id>/thankYou-messageExample.jsp</to-view-id>
� </navigation-case>
� </navigation-rule>
�
� <navigation-rule>
� <from-view-id>/index-panelGrid.jsp</from-view-id>
� <navigation-case>
� <from-outcome>thankYou</from-outcome>
� <to-view-id>/thankYou-messageExample.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>
�
� <managed-bean>
� <managed-bean-name>ageCheck</managed-bean-name>
� <managed-bean-class>com.corejsf.AgeCheckBean</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-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>
JavaServer Faces (JSF) | Atul Kahate 75
Data Tables
JavaServer Faces (JSF) | Atul Kahate 76
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>
JavaServer Faces (JSF) | Atul Kahate 77
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
JavaServer Faces (JSF) | Atul Kahate 78
index-dataTable-1.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.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>
JavaServer Faces (JSF) | Atul Kahate 79
TableData.java� /*
� * To change this template, choose Tools | Templates
� * and open the template in the editor.
� */
� package com.corejsf;
� /**
*� *
� * @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;
� }
� }
JavaServer Faces (JSF) | Atul Kahate 80
Name.java� /*
� * To change this template, choose Tools | Templates
� * and open the template in the editor.
� */
� package com.corejsf;
� /**
� *
� * @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) {
� this.first = first;
� }
�
� public String getFirst () {
� return first;
� }
�
� public void setLast (String last) {
� this.last = last;
� }
�
� public String getLast () {
� return last;
� }
� }
JavaServer Faces (JSF) | Atul Kahate 81
dataTable with Headers and Footers
JavaServer Faces (JSF) | Atul Kahate 82
index-dataTable-2.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>
� <link href="styles.css" rel="stylesheet" type="text/css" />
� <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">
� <f:facet name="header">
� <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>
JavaServer Faces (JSF) | Atul Kahate 83
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
� namePrompt=Name:
� 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]
JavaServer Faces (JSF) | Atul Kahate 84
dataTable – Allow Edits
JavaServer Faces (JSF) | Atul Kahate 85
index-dataTable-3.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>
� <link href="styles.css" rel="stylesheet" type="text/css" />
� <title>
� <h:outputText value = "#{msgs.windowTitle2}" />
� </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>
�
� <f:facet name="header">
� <h:outputText value="#{msgs.editColumn}"
� style="font-weight:bold" />
� </f:facet>
�
� <h:selectBooleanCheckbox value="#{name.editable}"
� onclick="submit()" />
� </h:column>
�
� <h:column>
� <f:facet name="header">
� <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>
�
� <f:facet name="header">
� <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>
JavaServer Faces (JSF) | Atul Kahate 86
Name.java� /*
� * To change this template, choose Tools | Templates
� * and open the template in the editor.
� */
� package com.corejsf;
� /**
� *
� * @author atulk
� */
� public class Name {
�
� private String first;
� private String last;
� private boolean editable = false;
� public Name(String first, String last) {
� this.first = first;
� this.last = last;
� }
�
� public void setFirst (String first) {
� this.first = first;
� }
�
� public String getFirst () {
� return first;
� }
�
� public void setLast (String last) {
� this.last = last;
� }
�
� public String getLast () {
� return last;
� }
�
� public boolean getEditable () {
� return editable;
� }
� }
JavaServer Faces (JSF) | Atul Kahate 87
Database Tables
JavaServer Faces (JSF) | Atul Kahate 88
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
JavaServer Faces (JSF) | Atul Kahate 89
CustomerBean.java� /*
� * To change this template, choose Tools | Templates
� * and open the template in the editor.
� */
� package com.corejsf;
� 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;
� }
� }
� }
JavaServer Faces (JSF) | Atul Kahate 90
index-dataTable-4.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>
� <link href="styles.css" rel="stylesheet" type="text/css" />
� <title>
� <h:outputText value = "#{msgs.windowTitle2}" />
� </title>
� </head>
�
� <body>
� <h:form>
� <h:dataTable value="#{customer.all}" var="customer"
� styleClass="customers"
� headerClass="customersHeader"
� rowClasses="oddRow,evenRow"
� columnClasses="custid,name">
� <!-- Only one of the row/column classes would work -->
� <h:column>
� <f:facet name="header">
� <h:outputText value="#{msgs.customerIdHeader}" />
� </f:facet>
� <h:outputText value="#{customer.cust_ID}" />
� </h:column>
�
� <h:column>
� <f:facet name="header">
� <h:outputText value="#{msgs.nameHeader}" />
� </f:facet>
� <h:outputText value="#{customer.name}" />
� </h:column>
�
� <h:column>
� <f:facet name="header">
� <h:outputText value="#{msgs.phoneHeader}" />
� </f:facet>
� <h:outputText value="#{customer.phone_number}" />
� </h:column>
�
� <h:column>
� <f:facet name="header">
� <h:outputText value="#{msgs.addressHeader}" />
� </f:facet>
� <h:outputText value="#{customer.street_address}" />
� </h:column>
�
� <h:column>
� <f:facet name="header">
� <h:outputText value="#{msgs.cityHeader}" />
� </f:facet>
� <h:outputText value="#{customer.city}" />
� </h:column>
�
� <h:column>
� <f:facet name="header">
� <h:outputText value="#{msgs.stateHeader}" />
� </f:facet>
� <h:outputText value="#{customer.state}" />
� </h:column>
�
� </h:dataTable>
� </h:form>
� </body>
� </f:view>
� </html>
JavaServer Faces (JSF) | Atul Kahate 91
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;
� text-align: center;
� background: MediumTurquoise;
� }
� .name {
� text-align: center;
� background: PowderBlue;
� }
� .evenRow {
� background: PowderBlue;
� }
� .oddRow {
� background: MediumTurquoise;
� }
JavaServer Faces (JSF) | Atul Kahate 92
Conversion and Validation
JavaServer Faces (JSF) | Atul Kahate 93
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)
JavaServer Faces (JSF) | Atul Kahate 94
Using Standard Convertors
(JSF-Convertors-and-Validators in NetBeans)
JavaServer Faces (JSF) | Atul Kahate 95
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
JavaServer Faces (JSF) | Atul Kahate 96
convertor-example-1-original.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>
� <link href="styles.css" rel="stylesheet" type="text/css" />
� <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>
JavaServer Faces (JSF) | Atul Kahate 97
PaymentBean.java� /*
� * To change this template, choose Tools | Templates
� * and open the template in the editor.
� */
� package com.corejsf;
� 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;
� }
�
�
� }
JavaServer Faces (JSF) | Atul Kahate 98
faces-config.xml� <?xml version='1.0' encoding='UTF-8'?>
� <!-- =========== FULL CONFIGURATION FILE ================================== -->
� <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>/convertor-example-1.jsp</from-view-id>� <from-view-id>/convertor-example-1.jsp</from-view-id>
� <navigation-case>
� <from-outcome>submit</from-outcome>
� <to-view-id>/convertor-example-1-output.jsp</to-view-id>
� </navigation-case>
� </navigation-rule>
�
� <managed-bean>
� <managed-bean-name>payment</managed-bean-name>
� <managed-bean-class>com.corejsf.PaymentBean</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>
JavaServer Faces (JSF) | Atul Kahate 99
messages.properties
� indexTitle1=Payment Information Processing
� bodyTitle1=Enter payment information
� amountPrompt=Amount
� cardNumberPrompt=Card Number
� expiryDatePrompt=Expiry Date
� submitPrompt=Submit
JavaServer Faces (JSF) | Atul Kahate 100
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 {
� background: MediumTurquoise;
� }
JavaServer Faces (JSF) | Atul Kahate 101
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>
� <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
� <title>JSP Page</title>
� </head>
� <body>
� <h2>Hello World!</h2>
� </body>
� </html>
JavaServer Faces (JSF) | Atul Kahate 102
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)
JavaServer Faces (JSF) | Atul Kahate 103
convertor-example-1.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>
� <link href="styles.css" rel="stylesheet" type="text/css" />
� <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}">
� <f:convertNumber minFractionDigits="2" />
� </h:inputText>
�
� <h:outputLabel value="#{msgs.cardNumberPrompt}: " />
� <h:inputText id="cardNumber" value="#{payment.cardNumber}" />
�
�
� <h:outputLabel value="#{msgs.expiryDatePrompt}: " />
� <h:inputText id="expiryDate" value="#{payment.expiryDate}">
� <f:convertDateTime pattern="MM/yyyy" />
� </h:inputText>
�
� </h:panelGrid>
�
� <br />
�
� <h:commandButton value="#{msgs.submitPrompt}" action = "submit" />
�
�
� </h:form>
� </body>
� </f:view>
� </html>
JavaServer Faces (JSF) | Atul Kahate 104
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
� <%@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>
� <link href="styles.css" rel="stylesheet" type="text/css" />
� <title>
� <h:outputText value = "#{msgs.indexTitle2}" />
� </title>
� </head>
�
� <body>
� <h:form>� <h:form>
�
� <h1><h:outputText value="#{msgs.bodyTitle2}" /></h1>
�
� <h:panelGrid columns="2" border="2" cellpadding="5" rowClasses="oddRows,evenRows">
�
� <h:outputLabel value="#{msgs.amountPrompt}: " />
� <h:outputText value="#{payment.amount}">
� <f:convertNumber type="currency"/>
� </h:outputText>
�
� <h:outputLabel value="#{msgs.cardNumberPrompt}: " />
� <h:outputText id="cardNumber" value="#{payment.cardNumber}" />
�
�
� <h:outputLabel value="#{msgs.expiryDatePrompt}: " />
� <h:outputText id="expiryDate" value="#{payment.expiryDate}">
� <f:convertDateTime pattern="MM/dd/yyyy"/>
� </h:outputText>
�
� </h:panelGrid>
�
� <br />
�
� <h:commandButton value="#{msgs.submitPrompt}" action = "submit" />
�
�
� </h:form>
� </body>
� </f:view>
� </html>
JavaServer Faces (JSF) | Atul Kahate 106
Thank You!
107JavaServer Faces (JSF) |
Atul Kahate