Rich faces入门

lin23871

浏览: 278166 次
性别:
来自: 福建

最近访客更多访客>>

wangxiaoxu

richand730

ychaaazy

flyjava

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

richfaces Ajax JSF Bean 应用服务器

     第一章：简介

    Rich Faces 是一个在现有的JSF技术基础上不依靠javascript方式就能实现Ajax技术的开源框架

    Rich Faces 利用了JSF框架的验证机制、生命周期管理机制、管理动态与静态资源机制并把Ajax支持及高度的外观和风格的可定制化与JSF框架很好的结合在一起。

    Rich Faces 允许：

             Rich Faces 整合了JSF框架与Ajax技术，并且完全融入JSF整个生命周期，其它的框架仅仅提供访问后台Bean的方法，但Rich Faces 提供了事件响应及值改变监听器以及在Ajax请求响应周期调用服务器端的验证及转换的功能。

             对现有的JSF应用提供了Ajax支持它提供了二个组件库（核心Ajax组件和UI组件）核心Ajax组件在可以在不用写任何Javascript代码的的前提下实现Ajax功能。Rich Faces 提供了对整个页面的Ajax支持而不是传统的基于组件的Ajax支持，当在页面触发一个Ajax请求以后，页面会在服务器端对应后台Bean的值改变后自动刷新JSF组件树中的值。

             基于组件库，可以快速地创建复杂的用户界面，UI组件库对JSF应用增加了丰富的用户界面功能，它扩展了Rich Faces 框架所包含的巨大（并且不断增长）的Ajax组件和广范的界面支持。此外， Rich Faces组件可使用与其它第三方框架在同一页面上无缝结合，这样你可以有更多的选择来开发您的应用程序。

             用户可以自定义植入Ajax支持的组件我们一直在努力改善用于创建Rich Faces UI组件的组件开发工具包（CDK），这个工具包包括基于类似JSP语法的代码生成器和一个模版，这样就可以节省开发组件时很多例行式的过程。这个组件生成器应该就像一台工作良好的柴油机，它可以创建基于Ajax支持的一流的UI组件，比通过用原始的方法创建简单组件更容易。

            方便的即时生成二进制资源这些资源可以是图像，声音，Excel电子表格等等，例如使用大家熟悉的Java Graphics2D类库来画图然后即时显示在页面上就变成了可能。

            风格与外观的高度可定制化你可以使用Rich Faces 默认提供的组件风格，也可以自己修改风格。比如字体大小，颜色，背景色，样式等等。Rich Faces 使用这些工作更加轻松，你可以用更多的时间专注于业务的实现和Java代码上。

            创建组件的同时测试其事件，监听，页面   在不久的将来，自动测试器将是我们的发展方向。当你创建组件的同时，它就会产生测试用例，这个测试器不仅仅只测试你开发的组件而是任何服务器端及客户端的功能，包括javascript代码。甚至不需要部暑到servlet容器中就可以完成这些测试。

     Rich Faces UI组件今后会越来越简单易用，那么开发人员就可以节省更多的时间，入门门槛会越来越低，经验的积累也会越来越快，越来越简单。

    第二章技术要求

    使用RichFaces 3.2.0 需要以下技术：

Java

JavaServer Faces

Java application server or servlet container

Browser (on client side)

Richfaces framework

2.1 JDK 版本

       JDK 1.5 以上

2.2 支持的JSF实现框架

Sun JSF-RI - 1.2

MyFaces 1.2

Facelets 1.1.1 - 1.2

Seam 1.2. - 2.0

2.3 支持的服务器

Apache Tomcat 5.5 - 6.0

BEA WebLogic 9.1 - 10.0

Resin 3.1

Jetty 6.1.x

Sun Application Server 9 (J2EE 1.5)

Glassfish (J2EE 5)

JBoss 4.2.x - 5

    2.4   支持的浏览器

Internet Explorer 6.0 - 7.0

Firefox 1.5 - 2.0

Opera 8.5 - 9.2

Safari 2.0-3.1

   备注：

         不支持 Safari 3.0 Beta.

    以上所列项目是根据用户反馈信息做成，我们并不保证所列项目的完整性，如果你的环境未列出，并不说明你的环境与RichFaces 3.2.0不兼容。

    如果您的环境不在上面所列但能支持RichFaces 3.2.0 我们非常欢迎您能反馈给我们。

    第三章：开始使用 RichFaces

    3.1 下载RichFaces 3.2.0

          最新发布的RichFaces可供下载，网址是：http://labs.jboss.com/jbossrichfaces/downloads

在JBOSS下的RichFaces 项目区

    3.2 安装

解压 "richfaces-ui-3.2.0-bin.zip" 到指定文件夹.

拷贝 "richfaces-api-3.2.0.jar" , "richfaces-impl-3.2.0.jar" , "richfaces-ui-3.2.0.jar" 到你项目的"WEB-INF/lib" 文件夹下。

在你项目的"WEB-INF/web.xml" 文件中加入以下内容：

...

    <context-param>

        <param-name>org.richfaces.SKIN</param-name>

        <param-value>blueSky</param-value>

    </context-param>

    <filter> 

        <display-name>RichFaces Filter</display-name> 

        <filter-name>richfaces</filter-name> 

        <filter-class>org.ajax4jsf.Filter</filter-class> 

    </filter> 

    <filter-mapping> 

        <filter-name>richfaces</filter-name> 

        <servlet-name>Faces Servlet</servlet-name>

        <dispatcher>REQUEST</dispatcher>

        <dispatcher>FORWARD</dispatcher>

        <dispatcher>INCLUDE</dispatcher>

    </filter-mapping>

在JSP页面上加入以下内容：

       <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>

       <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

XHTML 页面加入:

     <xmlns:a4j="http://richfaces.org/a4j">
     <xmlns:rich="http://richfaces.org/rich">

3.3简单的Ajax实例       在这个实例中，我们仅仅使用一个带有一个FORM 和一对<h:inputText>和</h:inputText>标签的JSP页面。这个简单的例子仅仅是要求你在<h:inputText>中输入一些文字，并发送到服务器，然后服务器会取到这个值并做出响应。

3.3.1 JSP页面（echo.jsp）

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>    <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
    <html>
      <head>
        <title>repeater </title> 
      </head>
      <body>
        <f:view>
          <h:form>
              <rich:panel header="Simple Echo">
                <h:inputText size="50" value="#{bean.text}" > 
                  <a4j:support event="onkeyup" reRender="rep"/>
                </h:inputText>
                <h:outputText value="#{bean.text}" id="rep"/>
              </rich:panel>
          </h:form>
        </f:view>




      </body>
    </html>

   JSP页面上仅使用了<rich:panel>和<a4j:suport>二个标签，

   <rich:panel>标签允许将页面中的无素放在其中。

   <a4j:support>给相应的页面元素<h:inputText>增加了Ajax支持，引发该Ajax请求的事件为“onkyup”事件。所以，当<h:inputText>触发了这个事件，应用程序就会向服务器端发送一个Ajax请求，那么，我们在<h:inputText>中输入的值就可以在后台Bean与此无素对应的属性中得到我们输入的值。

   <a4j:support>标签中reRender属性值就是用来定义我们将要刷新的对象，在此例中，我们要刷新的对象ID为：rep，也就是一个<h:outputText>,它的“value”值与<h:inputText>的value值都是绑定到后台BEAN bean.text属性，所以此例的最终效果是在<h:inutText>中输入的值会在<h:outputText>中显示出来。当然，如果我们需要刷新的是多个对象的话，我们只需要将它们的ID值列在reRender后面就可以了。

    3.3.2 后台Bean

        package demo;

        

        public class Bean {

        private String text;

        public Bean() {

        }

        public String getText() {

        return text;

        }

        public void setText(String text) {

        this.text = text;

        }

        }

    3.3.3 Faces-config.xml

         下一步，你必须在faces-config.xml中注册你的后台Bean

<?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>bean</managed-bean-name>

        <managed-bean-class>demo.Bean</managed-bean-class>

        <managed-bean-scope>request</managed-bean-scope>

        <managed-property>

          <property-name>text</property-name>

          <value/>

        </managed-property>

      </managed-bean>

    </faces-config>

3.3.4 Web.xml

按以下方式修改web.xml文件：

            
<?xml version="1.0"?>

    <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"

      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

      xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee  http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

    <display-name>a4jEchoText</display-name>

    <context-param>

        <param-name>org.richfaces.SKIN</param-name>

        <param-value>blueSky</param-value>

    </context-param>

    <context-param>

        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>

        <param-value>server</param-value>

    </context-param>

    <filter> 

        <display-name>RichFaces Filter</display-name> 

        <filter-name>richfaces</filter-name> 

        <filter-class>org.ajax4jsf.Filter</filter-class> 

    </filter> 

    <filter-mapping> 

        <filter-name>richfaces</filter-name> 

        <servlet-name>Faces Servlet</servlet-name>

        <dispatcher>REQUEST</dispatcher>

        <dispatcher>FORWARD</dispatcher>

        <dispatcher>INCLUDE</dispatcher>

    </filter-mapping>

    <listener>

        <listener-class>com.sun.faces.config.ConfigureListener</listener-class>

    </listener>

      

    <!-- Faces Servlet -->

    <servlet>

        <servlet-name>Faces Servlet</servlet-name>

        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

        <load-on-startup>1</load-on-startup>

    </servlet>

      

    <!-- Faces Servlet Mapping -->

    <servlet-mapping>

        <servlet-name>Faces Servlet</servlet-name>

        <url-pattern>*.jsf</url-pattern>

    </servlet-mapping>

    <login-config>

        <auth-method>BASIC</auth-method>

    </login-config>

    </web-app>

    现在，你的程序就可以运行了。

    3.3.5 部署运行

       部署到Tomcat 下，打开浏览器，输入：http://localhost:8080/a4jEchoText/echo.jsf 就可以了。

分享到：