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 。

€