日期:2014-05-16  浏览次数:20389 次

JSF入门三(第一个JSF程序)

本文参考并转载:

http://www.javaworld.com.tw/confluence/pages/viewpage.action?pageId=2630

?

本人使用的JSF实现是mojarra-2.0.3-FCS,下载地址:http://javaserverfaces.java.net/download.html

?

我们将设计一个简单的登入程序,使用者提交名称,之后由程序显示使用者名称及欢迎信息。

?

一、导入jar包(jsf-impl.jar jsf-api.jar jstl.jar standard.jar)

解压mojarra-2.0.3-FCS-source.zip,将lib目录下面jsf-impl.jar jsf-api.jar取出放入Eclipse的/WEB-INF/lib,另外还需要自己另外下jstl.jar standard.jar,同样也放入Eclipse的/WEB-INF/lib

?

二、配置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">
	<description>
		JSF Demo
	</description>
	<display-name>JSF Demo</display-name>
	<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>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
	</welcome-file-list>
</web-app>

?在上面的定义中,我们将所有.faces的请求交由FaceServlet来处理,FaceServlet会唤起相对的.jsp网页,例如请求是/index.faces的话,则实际上会唤起/index.jsp网页,完成以上的配置,您就可以开始使用JSF了。

?

三、编写一个简单的java bean

package bruce.zhao.model;

public class UserBean {

	private String name;
	public void setName(String name) {
	this.name = name;
	}
	public String getName() {
	return name;
	}
}
?

四、设计页面流程

我们将先显示一个登入网页/pages/index.jsp,使用者填入名称并提交表单,之后在/pages/welcome.jsp中显示Bean中的使用者名称与欢迎信息。

1.index.jsp

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@page contentType="text/html;charset=GB2312"%>
<html>
<head>
<title>第一个JSF程序</title>
</head>
<body>
<f:view>
	<h:form>
		<h3>请输入您的名称</h3>
		名称: <h:inputText value="#{user.name}" />
		<p><h:commandButton value="送出" action="login" />
	</h:form>
</f:view>
</body>
</html>

我们使用了JSF的core与html标签库,core是有关于UI组件的处理,而html则是有关于HTML的进阶标签。
<f:view>与<html>有类似的作用,当您要开始使用JSF组件时,这些组件一定要在<f: view>与</f:view>之间,就如同使用HTML时,所有的标签一定要在<html>与< /html>之间。
html标签库中几乎都是与HTML标签相关的进阶标签,<h:form>会产生一个表单,我们使用<h: inputText>来显示user这个Bean对象的name属性,而<h:commandButton>会产生一个提交按钮,我们在action属性中指定将根据之前定义的login页面流程中前往welcome.jsp页面。
网页设计人员不必理会表单传送之后要作些什么,他只要设计好欢迎页面就好了:

2.welcome.jsp

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@page contentType="text/html;charset=GB2312"%>
<html>
<head>
	<title>第一个JSF程序</title>
</head>
<body>
<f:view>
	<h:outputText value="#{user.name}" /> 您好!
	<h3>欢迎使用 JavaServer Faces!</h3>
</f:view>
</body>
</html>

?五、为了让JSF知道我们所设计的Bean以及页面流程,我们定义一个/WEB-INF/faces-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<faces-config>
	<navigation-rule>
		<from-view-id>/pages/index.jsp</from-view-id>
		<navigation-case>
			<from-outcome>login</fr