疯狂

STANDING ON THE SHOULDERS OF GIANTS
posts - 481, comments - 486, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

JSF学习及应用二-(用例)

Posted on 2007-12-11 09:41 疯狂 阅读(829) 评论(0)  编辑  收藏
 

实例1

1、 创建一个JSP

2、 在相同的路径下,用.jsf扩展名访问.jsp文件。

Jsf使用同名的JSP来作为程序的展现,所以,可以通过JSF扩展名结尾的URL地址访问JSP页面。(为此,可能需要编写一个过滤器,将所有对JSP的访问全部重定向到同名的jsf扩展名结尾的URL地址)

实例2

我们创建一个表单,并提供一个按钮,点击按钮之后转向另外一个页面,这就涉及到了JSF页面编写的基本规则,以及页面导航。

l         首先创建一个JSP文件(jsf_01.jsp),并在JSP页面添加JSFTAG LIB

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

l         添加viewform标签以及命令按钮

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

在实例23中,都是静态转向,也就是说,在命令按钮中规定了转向(成功或失败)。现在,我们需要动态的转向。也就是说,点击按钮之后,需要执行一个命令,根据命令的执行结果,决定转向!

这时候,我们需要一个支持的Java BeanBacking 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的表达式。Firstbeanbean的名字,后面是命令方法,这个方法返回值为String,它将决定其转向!

实例5

现在,该是传递一些数据的时候了!我们开发一个计算器,从页面上输入两个int值,计算结果将显示在另外一个页面上。

考虑JavaBean模型:

1、 BackingBean现在必须能够接收这两个int类型的值,并且需要能够输出结果,在JSF中,通过在BackingBean上定义属性做到这一点。

2、 BackingBean还应该负责计算这两个输入的值,这是一个命令方法。

我们添加number1number2result三个属性以及一个命令方法:

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一起配合完成一些任务。当然,只是一个简单的了解!但已经具备进一步深入学习的基础。


只有注册用户登录后才能发表评论。


网站导航: