Jsf lab

JSF Lab
Here is one JSF application with the concepts:
• facelet
• resource
• named bean
• validation
• grouping components
• form submission

Environment
 Java EE 7
◦ Java EE 7 uses JSF 2.2
 GlassFish 4

Facelets
 JSF 1.x
◦ JSP as their default view technology
◦ Mismatch of lifecycle between JSP &
JSFs
 JSF 2.x
◦ Facelets became a de facto standard for
JSF
◦ in Version 2.0 of the JSF specification

Resource Location (1/2)
 resource directory
◦ at the root of WAR
◦ under META-INF
 my war file example:

Resource Location (2/2)
 my war file example:
 In JSF, I retrieve these files:
◦ <h:outputStylesheet library="css" name="styles.css"/>
◦ <h:outputScript library="scripts" name="somescript.js"/>
◦ <h:graphicImage library="images" name="logo.png"/>

LAB
• Demo the first version of JSF application

Deploy and Run (1/3)
http://localhost:8080/jsf/faces/customer_data_entry.xhtml
Save invalid inputs

http://localhost:8080/jsf/faces/customer_data_entry.xhtml
Save valid inputs

HTML code
 <?xml version='1.0' encoding='UTF-8' ?>
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head id="j_idt2">
 <title>Enter Customer Data</title>
 <link type="text/css" rel="stylesheet"
href="/jsf/faces/javax.faces.resource/styles.css;jsessionid=
f6a6a03cf586f6537c2c236ae198?ln=css" />
 </head>
 <body>
 <form id="customerForm" name="customerForm"
method="post"
action="/jsf/faces/customer_data_entry.xhtml;jsessionid=f6
a6a03cf586f6537c2c236ae198" enctype="application/x-
www-form-urlencoded">
 <input type="hidden" name="customerForm"
value="customerForm" />
 <table>
 <tbody>
 <tr>
 <td class="rightAlign">
 <label for="customerForm:firstName">First
Name:</label>
 </td>
 <td class="leftAlign">
 <input id="customerForm:firstName"
type="text" name="customerForm:firstName" />
 </td>
 </tr>
 
 <tr>
 <td class="rightAlign"></td>
 <td class="leftAlign">
 <input type="submit"
name="customerForm:j_idt12" value="Save" />
 </td>
 </tr>
 </tbody>
 </table>
 <input type="hidden" name="javax.faces.ViewState"
id="j_id1:javax.faces.ViewState:0"
value="7091375556898980807:-6127233417766167060"
autocomplete="off" />
 </form>
 </body>
 </html>

OBSERVE FACELET
We should focus on how to transfer from facelet to
HTML

customer_data_entry.xhtml
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core">
 <h:head>
 </h:head>
 <h:body>
 <h:outputStylesheet library="css" name="styles.css"/>
 <h:form id="customerForm">
 <h:messages/>
 <h:panelGrid columns="2"
 columnClasses="rightAlign,leftAlign">
 <h:outputLabel for="firstName" value="First Name:">
 </h:outputLabel>
 <h:inputText id="firstName"
 label="First Name"
 value="#{customer.firstName}"
 required="true">
 <f:validateLength minimum="2" maximum="30">
 </f:validateLength>
 </h:inputText>
 <h:outputLabel for="lastName" value="Last Name:">
 <h:inputText id="lastName"
 label="Last Name"
 value="#{customer.lastName}"
 </h:inputText>
 <h:outputLabel for="email" value="Email:">
 <h:inputText id="email"
 label="Email"
 value="#{customer.email}">
 </h:inputText>
 <h:panelGroup></h:panelGroup>
 <h:commandButton action="confirmation" value="Save">
 </h:commandButton>
 </h:panelGrid>
 </h:form>
 </h:body>
 </html>

confirmation.xhtml
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 xmlns:h="http://java.sun.com/jsf/html">
 <h:head>
 <title>Customer Data Entered</title>
 </h:head>
 <h:body>
 <h:panelGrid columns="2" columnClasses="rightAlign,leftAlign">
 <h:outputText value="First Name:"></h:outputText>
 <h:outputText value="#{customer.firstName}"></h:outputText>
 <h:outputText value="Last Name:"></h:outputText>
 <h:outputText value="#{customer.lastName}"></h:outputText>
 <h:outputText value="Email:"></h:outputText>
 <h:outputText value="#{customer.email}"></h:outputText>
 </h:panelGrid>
 </h:body>
 </html>

Overview the JSF page (1/2)
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core">
 <h:head>
 </h:head>
 <h:body>
 <h:outputStylesheet library="css" name="styles.css"/>
 
 </h:form>
 </h:body>
 </html>

Overview the JSF page (2/2)
 Two namespaces:
◦ h: for HTML components
◦ f: for faces
 Analogous to standard HTML
 Load CSS (explained)

Look inside the form (1/3)
 <h:messages/>
 <h:panelGrid columns="2"
 columnClasses="rightAlign,leftAlign">
 <h:outputLabel for="firstName" value="First Name:"></h:outputLabel>
 <h:inputText id="firstName"
 label="First Name"
 value="#{customer.firstName}"
 </h:inputText>
 
 <h:panelGroup></h:panelGroup>
 <h:commandButton action="confirmation" value="Save"></h:commandButton>
 </h:panelGrid>
 </h:form>

 form does NOT need action and
method
◦ action: generated automatically
◦ method: always post
 messages is used to display any
messages
◦ explain latter
 panelGrid is like HTML table
◦ NOT declaring rows and columns
◦ declare the number of columns for each

 Observe the table and the facelet
◦ In panelGrid, one cell for one tag
◦ Use panelGroup to combine tags into 1 cell
 Observe the HTML file and the facelet
◦ columnClasses set the CSS class
 Invalid data is submitted
◦ required, validateLength chekcs the
inputs
◦ Error message is displayed at messages
 Click the label in page
◦ for (outputLabel) <-> id (inputText)

Value-binding expression
value="#{customer.firstName}”
value="#{customer.lastName}”
value="#{customer.email}”
 customer is the named
bean
 one customer object for
each request
Source code:
@Named
@RequestScoped
public class Customer {
private String firstName;
private String lastName;
private String email;
//public getter and setter
}

Navigation
 Valid inputs is submit
1. customer named bean’s is bound
2. To facelet confirmation.xhtml
3. This page also use value binding
expression
 Invalid inputs is submit
1. Navigate the same page
2. Show message

Reference
 Java EE 7 with GlassFish 4
Application Server

Jsf lab

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (12)

Similar to Jsf lab

Similar to Jsf lab (20)

Recently uploaded

Recently uploaded (20)

Jsf lab