Posted on 2007-12-11 09:41
疯狂 阅读(835)
评论(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一起配合完成一些任务。当然,只是一个简单的了解!但已经具备进一步深入学习的基础。