"RichFaces Greeter"—the simple application—is hello-world like application
but with one difference: the world of RichFaces will say "Hello!" to user
first.
Create standard JSF 1.2 project with all necessary libraries; name the
project "Greeter" and follow the decription.
1. Adding RichFaces libraries into the project
Copy
following "jars" from lib folder to
WEB-INF/lib folder of "Greeter" JSF application.
commons-beanutils.jar
commons-collections.jar
commons-digester.jar
commons-logging.jar
jhighlight-1.0.jar
richfaces-api-3.3.2.SR1.jar
richfaces-impl-3.3.2.SR1.jar
richfaces-ui-3.3.2.SR1.jar
2. Registering RichFaces in web.xml
After RichFaces libraries where added into the project it is necessary to
register them in project web.xml file. Add following
lines in web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>epmWeb</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>blueSky</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.CONTROL_SKINNING</param-name>
<param-value>enable</param-value>
</context-param>
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<!-- Faces Servlet -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Faces Servlet Mapping -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/* </url-pattern>
</servlet-mapping>
<login-config>
<auth-method>BASIC</auth-method>
</login-config>
</web-app>
3. Managed bean
The "RichFaces Greeter" application
needs a managed bean. In project JavaSource folder
create a new managed bean with name user in demo package and paste there the
following simple code:
package com.apj.epm.demo;
public class User {
private String name = "";
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
4. Registering bean in faces-cofig.xml
With the next
step the user bean should be registered in
faces-config.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<faces-config 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"
version="1.2">
<managed-bean>
<managed-bean-name>user</managed-bean-name>
<managed-bean-class>com.apj.epm.demo.User</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>name</property-name>
<property-class>java.lang.String</property-class>
<value></value>
</managed-property>
</managed-bean>
</faces-config>
5. RichFaces Greeter index.jsp
The "RichFaces Greeter"
application has only one JSP page. Create index.jsp
page in root of WEB CONTENT folder and add there
following code:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<!-- RichFaces tag library declaration -->
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>RichFaces Greeter</title>
</head>
<body>
<f:view>
<a4j:form>
<rich:panel header="RichFaces Greeter" style="width: 315px">
<h:outputText value="Your name: " />
<h:inputText value="#{user.name}">
<f:validateLength minimum="1" maximum="30" />
</h:inputText>
<a4j:commandButton value="Get greeting" reRender="greeting" />
<h:panelGroup id="greeting">
<h:outputText value="Hello, " rendered="#{not empty user.name}" />
<h:outputText value="#{user.name}" />
<h:outputText value="!" rendered="#{not empty user.name}" />
</h:panelGroup>
</rich:panel>
</a4j:form>
</f:view>
</body>
</html>
The application uses three RichFaces components:
<rich:panel> is used as visual container for
information;<a4j:commandButton> with built-in Ajax
support allows rendering a greeting dynamically after a response comes back and
<a4j:form> helps the button to perform the action.
Note, that the RichFaces tag library should be declared on each JSP page.
6. Welcome Page - index.html
<!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">
<meta http-equiv="Refresh" content="0;url=index.jsf" >
<title>Enterprise Project Management System</title>
</head>
<body>
</body>
</html>
7. Deploy and show result
Subscribe