Ajax4jsf User Guide 中文翻译 -- 在JSF中使用AJAX

icess

浏览: 251290 次
性别:
来自: 北京

最近访客更多访客>>

csevan

hnqq

qqtxt

ljjjjkkll

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

BlogJava

Ajax JSF Bean Servlet Web

Ajax4jsf User Guide 中文翻译
翻译专贴: http://bbs.hexiao.cn/read.php?fid=3&tid=13&fpage=1

序言

Ajax4JSF是一个很容易使用的框架, 在其User Guide中详细介绍了如何使用其功能,找时间学习一下,并翻译出来以加深理解和方便更多的Java爱好者使用Ajax4jsf 框架.

翻译进度和问题可以在论坛讨论. http://bbs.hexiao.cn/

第二章是一个简单的入门程序,看完这一章你就可以建立基本的Ajax程序了.
Chapter 2. Getting Started with Ajax4jsf

环境要求
要使用Ajax4JSF 框架你仅仅需要JDK1.4或者更高,任何JSF实现,和你最喜欢的Servlet容器.在下一章我们将给你提供详细的环境信息.
Ajax4jsf 被设计为一个容易使用的框架.仅仅有一点简单的设置步骤就可以在你的JSF程序中使用Ajax功能了.

下载 Ajax4jsf
最新的Ajax4jsf 发布版在这里

https://ajax4jsf.dev.java.net/nonav/ajax/ajax-jsf/download.html

下载.
安装
解压 ajax4jsf.zip 文件.
复制 ajax4jsf.jar and oscache-2.2.jar 到程序的 WEB-INF/lib 文件夹下.
把下面的内容添加到你的程序的 WEB-INF/web.xml 文件中:

 <filter>
          <display-name>Ajax4jsf Filter</display-name>
          <filter-name>ajax4jsf</filter-name>
          <filter-class>org.ajax4jsf.Filter</filter-class>
          </filter>
          <filter-mapping>
          <filter-name>ajax4jsf</filter-name>
          <servlet-name>Faces Servlet</servlet-name>
          <dispatcher>REQUEST</dispatcher>
          <dispatcher>FORWARD</dispatcher>
          <dispatcher>INCLUDE</dispatcher>
          </filter-mapping>

注意. 你可以复制和粘贴上面的内容在 README.txt 文件中.

添加下面的内容:

  <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>

到你每个使用Ajax功能的JSP页面中.

简单的 AJAX Echo 项目

让我们来看一个简单的JSF项目. 我们仅仅需要一个JSP页面,里面包含一个Form和一些JSF标签: <h:inputText> 和 <h:outputText>.

我们这个简单的程序应该可以让我们输入一些文字到<h:inputText>中, 然后发送数据到Server,并在 <h:outputText>中显示Server的响应(给我们一个Echo信息).

JSP 页面

下面是一个我们需要的页面代码 (echo.jsp) :

    <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
    <%@ 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>
            <h:inputText size="50" value="#{bean.text}" > 
              <a4j:support event="onkeyup" reRender="rep"/>
            </h:inputText>
            <h:outputText value="#{bean.text}" id="rep"/>
          </h:form>
        </f:view>
      </body>
    </html>

就如你看到的,唯一一行于常给JSF页面代码不同的就是下面的一行

    <a4j:support event="onkeyup" reRender="rep"/>

在这里我们在父标签(<h:inputText>)中添加了一个AJAX 支持. 该支持绑定了JavaScript事件“onkeyup” .因此, 每一次该事件发布给父标签时,我们的程序将发送一个AJAX请求到Server.这意味着我们的受管理的bean将包含该“text” 域中我们输入的最新数据.

<a4j:support> 标签的“reRender” 属性(attribute)定义我们的页面的哪一部分被更新. 在这里,该页面唯一被更新的部位是 <h:outputText> 标签,因为他的ID值和“reRender” 的属性值向匹配. 在一个页面中更新多个元素(elements)也是很简单的:仅仅把他们的IDs放在 “reRender” 属性中就可以了.

数据 Bean

当然了,为了运行这个程序我们还需要一个受管理的bean

        package demo;
        public class Bean {
        private String text;
        
        public Bean() {
        }
        
        public String getText() {
        return text;
        }
        
        public void setText(String text) {
        this.text = text;
        }
        }

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>

注意:这里没有任何东西直接和Ajax4jsf 有关联.

Web.xml

最后,不要忘了添加jar文件和更改 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>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>server</param-value>
      </context-param>
      <filter>
        <display-name>Ajax4jsf Filter</display-name>
        <filter-name>ajax4jsf</filter-name>
        <filter-class>org.ajax4jsf.Filter</filter-class>
      </filter>
      <filter-mapping>
        <filter-name>ajax4jsf</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>

就这样了, 现在你的程序应该可以工作了.

部署

最终,你可以在Servlet容器中部署你的程序了. 在你喜欢的容器中部署,然后在你的浏览器中输入: http://localhost:8080/a4jEchoText/echo.jsf

第三章 under way................

分享到：

使用netbeans来监控Http 通讯 | Wicket 教程4:如何使用Form 和form组件 2

2006-08-11 21:31
浏览 979
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论