Posted on 2007-12-11 09:41
瘋狂 閱讀(837)
評論(0) 編輯 收藏
實例1
1、 創建一個JSP
2、 在相同的路徑下，用.jsf擴展名訪問.jsp文件。
Jsf使用同名的JSP來作為程序的展現，所以，可以通過JSF擴展名結尾的URL地址訪問JSP頁面。（為此，可能需要編寫一個過濾器，將所有對JSP的訪問全部重定向到同名的jsf擴展名結尾的URL地址）
實例2
我們創建一個表單，并提供一個按鈕，點擊按鈕之后轉向另外一個頁面，這就涉及到了JSF頁面編寫的基本規則，以及頁面導航。
l 首先創建一個JSP文件（jsf_01.jsp），并在JSP頁面添加JSF的TAG LIB
|
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
|
l 添加view和form標簽以及命令按鈕
JSF的頁面是由JSF的組件樹組成的。這叫view。 view標簽是視圖的根，其它所有的JSF標簽，必須被一個view標簽包含！
form標簽是頁面表單。其它一些組件，比如文本輸入框必須被包含在一個form標簽的內部。
如：
|
<f:view>
<h:form>
<h:commandButton action="success"/>
</h:form>
</f:view>
|
action 的值，是命令的結果，即點擊之后，導向success！
l 創建另外一個JSP文件（jsf_01_success.jsp）
|
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
轉向成功
</body>
</html>
|
l 現在，我們需要在第一個頁面和第二個頁面之間建立關聯，因為第一個頁面有一個命令，它的結果是success。我們需要在faces-config.xml中配置導航規則。
|
<faces-config >
<navigation-rule>
<from-view-id>/jsf/test/jsf_01.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/jsf/test/jsf_01_success.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
|
運行jsf_01.jsp之后，將出現一個命令按鈕，點擊之后，將轉向jsf_01_success.jsp。
實例3
實例2中，只有一個命令按鈕，我們在實例3中將多添加一個命令按鈕，并增加一個轉向：
Jsf_01.jsp改為：
|
<f:view>
<h:form>
<h:commandButton action="success" value="轉向成功頁面"/>
<h:commandButton action="error" value="轉向失敗頁面"/>
</h:form>
</f:view>
|
Value 是顯示的按鈕的值。
添加jsf_01_error.jsp：
|
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
轉向錯誤
</body>
</html>
|
修改faces-confi.xml文件：
|
<faces-config >
<navigation-rule>
<from-view-id>/jsf/test/jsf_01.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/jsf/test/jsf_01_success.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>error</from-outcome>
<to-view-id>/jsf/test/jsf_01_error.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
|
重新運行測試！
實例4
在實例2、3中，都是靜態轉向，也就是說，在命令按鈕中規定了轉向（成功或失敗）。現在，我們需要動態的轉向。也就是說，點擊按鈕之后，需要執行一個命令，根據命令的執行結果，決定轉向！
這時候，我們需要一個支持的Java Bean（Backing Bean）：
我們編寫一個 非常簡單的BackingBean01.java
|
package com. web.jsf.test;
public class BackingBean01 {
public String gogogo(){
if(Math.random() > 0.5 ){
return "success";
}
return "error";
}
}
|
然后，我們需要在faces-config.xml文件中注冊這個Bean：
|
<managed-bean>
<managed-bean-name>firstbean</managed-bean-name>
<managed-bean-class>com.web.jsf.test.BackingBean01</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
|
修改jsf_01.jsp文件為：
|
<f:view>
<h:form>
<h:commandButton action="success" value="轉向成功頁面"/>
<h:commandButton action="error" value="轉向失敗頁面"/>
<h:commandButton action="#{firstbean.gogogo}"value="動態轉向測試"/>
</h:form>
</f:view>
|
在這里，action是一個動態表達式。這是JSF的表達式。Firstbean是bean的名字，后面是命令方法，這個方法返回值為String，它將決定其轉向！
實例5
現在，該是傳遞一些數據的時候了！我們開發一個計算器，從頁面上輸入兩個int值，計算結果將顯示在另外一個頁面上。
考慮JavaBean模型：
1、 BackingBean現在必須能夠接收這兩個int類型的值，并且需要能夠輸出結果，在JSF中，通過在BackingBean上定義屬性做到這一點。
2、 BackingBean還應該負責計算這兩個輸入的值，這是一個命令方法。
我們添加number1、number2、result三個屬性以及一個命令方法：
|
package com.web.jsf.test;
public class BackingBean01 {
private int number1;
private int number2;
private int result;
public int getNumber1() {
return number1;
}
public void setNumber1(int number1) {
this.number1 = number1;
}
public int getNumber2() {
return number2;
}
public void setNumber2(int number2) {
this.number2 = number2;
}
public int getResult() {
return result;
}
public void setResult(int result) {
this.result = result;
}
public String compute(){
result = number1 + number2;
return "result";
}
public String gogogo(){
if(Math.random() > 0.5 ){
return "success";
}
return "error";
}
}
|
jsf_01.jsp 現在變為：
|
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
<f:view>
<h:form>
<h:inputText value="#{firstbean.number1}"/>
+
<h:inputText value="#{firstbean.number2}"/>
<h:commandButton action="#{firstbean.compute}" value="="/>
<p>
<h:commandButton action="success" value="轉向成功頁面"/>
<h:commandButton action="error" value="轉向失敗頁面"/>
<h:commandButton action="#{firstbean.gogogo}"value="動態轉向測試"/>
</h:form>
</f:view>
</body>
</html>
|
Faces-config.xml變為：
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config >
<managed-bean>
<managed-bean-name>firstbean</managed-bean-name>
<managed-bean-class>com.web.jsf.test.BackingBean01</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/jsf/test/jsf_01.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/jsf/test/jsf_01_success.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>error</from-outcome>
<to-view-id>/jsf/test/jsf_01_error.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>result</from-outcome>
<to-view-id>/jsf/test/jsf_01_result.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
|
添加jsf_01_result.jsp文件：
|
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
<f:view>
<h:outputText value="#{firstbean.number1}"/>
+
<h:outputText value="#{firstbean.number2}"/>
=
<h:outputText value="#{firstbean.result}"/>
</f:view>
</body>
</html>
|
在這個頁面上，多了outputText標簽，這個標簽可以用來輸出變量的值。
運行jsf_01.jsp，重新測試
現在我們已經了解了JSF如何在頁面之間導航，如何跟后臺的Java Bean一起配合完成一些任務。當然，只是一個簡單的了解！但已經具備進一步深入學習的基礎。