Создание приложений JavaServer Faces в Eclipse

In this article we will investigate how to create a simple application using JavaServer Faces (JSF) framework in the Eclipse IDE. First let us see what are the tools required to create our Hello World JSF application.

JDK 1.5 above (download)
Tomcat 5.x above or any other container (Glassfish, JBoss, Websphere, Weblogic etc) (download)
Eclipse 3.2.x above (download)
Sun Reference Implementation of JSF: (download). Following are the list of JAR files required for this application.
- jsf-impl.jar
- jsf-api.jar
- jstl.jar
- common-logging.jar
- common-beanutils.jar
- common-collections.jar
- common-chain.jar
- common-digester.jar

We will implement a JSF application with an Add User screen containing two fields, ID and User Name. Once the user has entered these values and pressed submit, she will be redirected to a welcome page displaying the user name.

Let us start with our first JSF based web application.

Step 1: Create Dynamic Web project

Open Eclipse and goto File -> New -> Project and select Dynamic Web Project in the New Project wizard screen.

Select Dynamic Web application and click Next.

Write the name of the project HelloWorldJSF. Once this is done, select the target runtime environment (e.g. Apache Tomcat v6.0). This is to run the project inside Eclipse environment. In configuration select JavaServer Faces v1.2 Project and press Next.

On Project Facets window, select Java 5 and JSF 1.2 and press Next.

Skip Web module window and press Next.

Select JSF component library. Click New in Component Libraries and add jstl.jar, jsf-api.jar and jsf-impl.jar. In URL Mapping Patterns add /faces/* and then click Finish.

Once the project is created, you can see its structure in Project Explorer.

Step 2: Create Package and Managed bean

Create a package net.viralpatel.jsf.helloworld in the source folder and create a Java file UserBean.java. Copy following content into UserBean.java.

package net.viralpatel.jsf.helloworld;

public class UserBean {
	private int id;
	private String name;

	//Action method to add user
	public String addUser() {

		return "success";
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

Above is the Java class for a User bean that we will use to store our user’s information. This class acts like a form bean and action class. The addUser() method will get called when we click Add button on our Add User page.

Step 3: Create JSP files

Create two JSP files: AddUser.jsp and ListUser.jsp in WebContent folder. Copy following content in each of these files.

AddUser.jsp

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

<html>
<head>
	<title>Add New User Form</title>
</head>
<body>
<f:view>
		<p>
			<h:message id="errors" for="User_ID" style="color:red"/>
		</p>
	<h:form>
		<h:panelGrid border="1" columns="2">
			<h:outputText value="ID"></h:outputText>
			<h:inputText id="User_ID" value="#{userBean.id}" required="true">
				<f:validateLongRange minimum="1" maximum="500"/>
			</h:inputText>
			<h:outputText value="Name"></h:outputText>
			<h:inputText value="#{userBean.name}"></h:inputText>
			<h:commandButton action="#{userBean.addUser}"
				value="Add Customer"></h:commandButton>
		</h:panelGrid>
	</h:form>
</f:view>
</body>
</html>

We have added a validation rule for ID using f:validateLongRange tag and required=”true” attribute. The ID must be between 1 and 500.

ListUser.jsp

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

<html>
<head>
	<title>List of Users</title>
</head>
<body>
<f:view>
	<h:form>
		<h:outputText value="User #{userBean.name} is added successfully.">
		</h:outputText>
	</h:form>
</f:view>
</body>
</html>

Step 4: Modify faces-config.xml file

Откройте файл face-config.xml из папки WebContent -> WEB-INF и скопируйте в него следующий контент.

<?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>userBean</managed-bean-name>
		<managed-bean-class>
			net.viralpatel.jsf.helloworld.UserBean
		</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>
	<navigation-rule>
		<display-name>AddUser</display-name>
		<from-view-id>/AddUser.jsp</from-view-id>
		<navigation-case>
			<from-outcome>success</from-outcome>
			<to-view-id>/ListUser.jsp</to-view-id>
		</navigation-case>
	</navigation-rule>
</faces-config>

В конфигурации Faces мы определили управляемый компонент UserBean с сеансом области действия и отображением из AddUser.jsp в ListUser.jsp.

Шаг 5: Выполнить и запустить проект

Последний шаг — выполнить проект и просмотреть его в браузере.
Для этого щелкните правой кнопкой мыши Имя проекта в Project Explorer -> Запуск от имени -> Запуск на сервере (сочетание клавиш Alt + Shift + X, R).

Как только вы введете ID и имя пользователя и нажмете «Добавить пользователя», появится следующий экран успеха.

Скачать полный файл WAR с источником

Скачать WAR с исходным кодом (1,48 МБ)

С http://viralpatel.net/blogs/

Создание приложений JavaServer Faces в Eclipse

Step 1: Create Dynamic Web project

Step 2: Create Package and Managed bean

Step 3: Create JSP files

ListUser.jsp

Step 4: Modify faces-config.xml file

Шаг 5: Выполнить и запустить проект

Скачать полный файл WAR с источником

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC