疯狂

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

JSF学习及应用二-（用例）

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


只有注册用户登录后才能发表评论。
网站导航: