Embed Size (px)
Citation preview
Introduction to Java Server Faces
Much like Struts and Spring, JSF is an MVC framework that can build HTML forms,
validate their values, invoke business logic, and display results.
JSF also provides many custom GUI controls, along with code for their events.
You can also easily manage beans using JSF; JSF has an expression language to
access bean properties and collection elements.
Unlike Hibernate and Spring, JDeveloper supports JSF. Since the version of
JDeveloper we’ve been using supports JSF1.x, that’s what we’ll use in this course.
Let’s create a new project that uses JSF.
Start by opening JDeveloper, and creating a new Application. It doesn’t matter
where you put it. Let’s name it FirstExample.
Then create a new Project. Calling it Project1 is fine.
Right-click on the Project1 icon and choose New.
Open the Web Tier, and choose JSF. Make sure that JSF JSP is highlighted.
Then click OK. This takes you to the Create JSF JSP Wizard.
Click Next.
Choose Servlet 2.4\JSP 2.0 and click Next.
Name the file index.jsp. It’ll be stored in public_html. Click Next.
Don’t worry about this page.
You’ll see that two tag libraries have already been selected. That’s all you’ll need.
Click Next.
Now you’ll set up the jsp page itself. Just click Next again, and then click Finish.
As is the case with frameworks, some files got set up automatically.
Inside your project’s public_html directory, you’ll see index.jsp and a WEB-INF
folder.
The default content of index.jsp is this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=windows-1252"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<f:view>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"/>
<title>index</title>
</head>
<body><h:form>
</h:form></body>
</html>
</f:view>
You’ll see that the two tag libraries (html and core) have been referenced.
An empty <h:form> has been created, and the html page is nested in a <f:view>.
More about these later.
Inside the WEB-INF folder you have a lib folder. This contains the necessary jar file
for JSF – jsf-impl.jar.
There’s also an empty temp directory, and two files – faces.config.xml and
web.xml.
The default content of faces.config.xml is
<?xml version="1.0" encoding="windows-1252"?>
<!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 xmlns="http://java.sun.com/JSF/Configuration">
</faces-config>
The root element, <faces-config> is empty for now.
The default content of web.xml is:
<?xml version = '1.0' encoding = 'windows-1252'?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee">
<description>Empty web.xml file for Web Application</description>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>35</session-timeout>
</session-config>
<mime-mapping>
<extension>html</extension>
<mime-type>text/html</mime-type>
</mime-mapping>
<mime-mapping>
<extension>txt</extension>
<mime-type>text/plain</mime-type>
</mime-mapping>
</web-app>
The <servlet-mapping> tags means that any requests made to any file with a url
pattern of /faces/* will call the Faces Servlet automatically (which is the class
FacesServlet.
You’ll need to actually change this a little. The servlet mapping tag should be:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
Now any reference to a file with extension .faces, no matter where it is, will cause
the Faces Servlet to be called.
We’ll now make a few minimal changes to have this example display a welcome
page.
Make a new css file named styles.css. It’ll go inside public_html.
Change the content of this file to:
BODY { background-color: #FDF5E6 }
A:hover { color: red }
H2 {
color: #440000;
text-align: center;
font-family: Arial, Helvetica, sans-serif
}
TH.TITLE { background-color: #EF8429;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
Create a new JSP page named welcome.jsp. It’ll go inside public_html.
Just use the defaults the wizard gives you, and then change the content to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Welcome to JSF</TITLE>
<LINK REL="STYLESHEET"
HREF="./css/styles.css"
TYPE="text/css">
</HEAD>
<BODY>
<TABLE BORDER=5 ALIGN="CENTER">
<TR><TH CLASS="TITLE">Welcome to JSF</TH></TR></TABLE>
<P>
This is the <I>welcome.faces</I> page
for the <CODE>ex1</CODE> application.
</BODY></HTML>
Finally, open index.jsp and change its content to this:
<% response.sendRedirect("welcome.faces"); %>
Run index.jsp. It’ll do a redirect to welcome.faces – meaning that an instance of
FacesServlet will take you to welcome.jsp, which you’ll see displayed.
The zip file jsf_ex1.zip will contain this working example.
