A Simple Example
第一个例子以一个登陆页面开始 如图 1-1
图 1-1
相关流程图 如图 1-2
如图 1-2
我用的开发工具是MyEclipse,先运行Eclipse。
1． 新建一个Web工程login。添加一个JSF应用。
2． 修改faces-config.xml，我用使用MyEclipse的图形化界面。相应代码如下：
< navigation-rule >
< from-view-id > /index.jsp </ from-view-id >
< navigation-case >
< from-outcome > login </ from-outcome >
< to-view-id > /welcome.jsp </ to-view-id >
</ navigation-case >
</ navigation-rule >
< navigation-rule >
< from-view-id > /welcome.jsp </ from-view-id >
</ navigation-rule >
3． 新建一个index.html目的为了让Tomcat可以解析JSF页面。添加代码如下：
< html >
< head >
< meta http-equiv = "Refresh" content = "0; URL=index.faces" />
< title > 启动Web应用 </ title >
</ head >
< body >
< p > 请等待Web应用启动..... </ p >
</ body >
</ html >
相应的修改web.xml如下：
< welcome-file-list >
< welcome-file > index.html </ welcome-file >
</ welcome-file-list >
4． 修改 index.jsp ， welcome.jsp 。代码如下：
index.jsp
<%@ page contentType = "text/html;charset=GB2312" %>
<%@ taglib uri = "http://java.sun.com/jsf/core" prefix = "f" %>
<%@ taglib uri = "http://java.sun.com/jsf/html" prefix = "h" %>
< html >
< head >
< title > 一个简单JSF应用 </ title >
</ head >
< body >
< f:view >
< h:form >
< h3 > 请输入姓名和密码 </ h3 >
< table >
< tr >
< td > 姓名 </ td >
< td >
< h:inputText value = " #{user.name}"/>
</ td >
</ tr >
< tr >
< td > 密码 </ td >
< td >
< h:inputSecret value = " #{user.password}"/>
</ td >
</ tr >
</ table >
< p >
< h:commandButton value = " 登陆" action = "login" />
</ p >
</ h:form >
</ f:view >
</ body >
</ html >
welcome.jsp
<%@ page contentType = "text/html;charset=GB2312" %>
<%@ taglib uri = "http://java.sun.com/jsf/core" prefix = "f" %>
<%@ taglib uri = "http://java.sun.com/jsf/html" prefix = "h" %>
< html >
< head >
< title > 一个简单JSF应用 </ title >
</ head >
< body >
< f:view >
< h:form >
< h3 >
欢迎来到JSF世界, < h:outputText value = " #{user.name}"/>!
</ h3 >
</ h:form >
</ f:view >
</ body >
</ html >
5． 添加一个 managed-bean ， UserBean.java 。代码如下：
package com;
public class UserBean {
private String name;
private String password;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
修改相应的 faces-config.xml ，代码如下：
< managed-bean >
< managed-bean-name > user </ managed-bean-name >
< managed-bean-class > com.UserBean </ managed-bean-class >
< managed-bean-scope > session </ managed-bean-scope >
</ managed-bean >
6． 完毕。启动 Tomcat ，地址栏输入 http://localhost:8080/login 测试一下。
注： JSF 标签的使用参考 tlddocs 。
€