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

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

 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值