⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 a4j+user+guide.htm

📁 程序包
💻 HTM
📖 第 1 页 / 共 5 页
字号:
🔍
12345 
<DIV>
<H2 class=title style="CLEAR: both"><A name=d0e75></A>安装</H2></DIV></DIV></DIV>
<DIV class=itemizedlist>
<UL type=disc>
  <LI>
  <P>解压 ajax4jsf.zip 文件. </P>
  <LI>
  <P>复制 ajax4jsf.jar and oscache-2.2.jar 到程序的 WEB-INF/lib 文件夹下. </P>
  <LI>
  <P>把下面的内容添加到你的程序的 WEB-INF/web.xml 文件中: </P><PRE class=programlisting>          &lt;filter&gt;
          &lt;display-name&gt;Ajax4jsf Filter&lt;/display-name&gt;
          &lt;filter-name&gt;ajax4jsf&lt;/filter-name&gt;
          &lt;filter-class&gt;org.ajax4jsf.Filter&lt;/filter-class&gt;
          &lt;/filter&gt;
          &lt;filter-mapping&gt;
          &lt;filter-name&gt;ajax4jsf&lt;/filter-name&gt;
          &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
          &lt;dispatcher&gt;REQUEST&lt;/dispatcher&gt;
          &lt;dispatcher&gt;FORWARD&lt;/dispatcher&gt;
          &lt;dispatcher&gt;INCLUDE&lt;/dispatcher&gt;
          &lt;/filter-mapping&gt;
        </PRE>
  <P>注意. 你可以复制和粘贴上面的内容在 README.txt 文件中.</P>
  <LI>
  <P>添加下面的内容:</P><PRE class=programlisting>  &lt;%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="<B style="COLOR: black; BACKGROUND-COLOR: #ffff66">a4j</B>"%&gt;
        </PRE>
  <P>到你每个使用Ajax功能的JSP页面中.</P></LI></UL></DIV></DIV>
<DIV class=section lang=en>
<DIV class=titlepage>
<DIV>
<DIV>
<H2 class=title style="CLEAR: both"><A name=d0e99></A>简单的 AJAX Echo 项目 
</H2></DIV></DIV></DIV>
<P>让我们来看一个简单的JSF项目. 我们仅仅需要一个JSP页面,里面包含一个Form和一些JSF标签: &lt;h:inputText&gt; 和 
&lt;h:outputText&gt;. </P>
<P>我们这个简单的程序应该可以让我们输入一些文字到&lt;h:inputText&gt;中, 然后发送数据到Server,并在 
&lt;h:outputText&gt;中显示Server的响应(给我们一个Echo信息). </P>
<DIV class=section lang=en>
<DIV class=titlepage>
<DIV>
<DIV>
<H3 class=title><A name=d0e106></A>JSP 页面</H3></DIV></DIV></DIV>
<P>下面是一个我们需要的页面代码 (echo.jsp) :</P><PRE class=programlisting>    &lt;%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="<B style="COLOR: black; BACKGROUND-COLOR: #ffff66">a4j</B>"%&gt;
    &lt;%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%&gt;
    &lt;%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;repeater &lt;/title&gt; 
      &lt;/head&gt;
      &lt;body&gt;
        &lt;f:view&gt;
          &lt;h:form&gt;
            &lt;h:inputText size="50" value="#{bean.text}" &gt; 
              &lt;<B style="COLOR: black; BACKGROUND-COLOR: #ffff66">a4j</B>:support event="onkeyup" reRender="rep"/&gt;
            &lt;/h:inputText&gt;
            &lt;h:outputText value="#{bean.text}" id="rep"/&gt;
          &lt;/h:form&gt;
        &lt;/f:view&gt;
      &lt;/body&gt;
    &lt;/html&gt;
      </PRE>
<P>就如你看到的,唯一一行于常给JSF页面代码不同的就是下面的一行</P><PRE class=programlisting>    &lt;<B style="COLOR: black; BACKGROUND-COLOR: #ffff66">a4j</B>:support event="onkeyup" reRender="rep"/&gt;
      </PRE>
<P>在这里我们在父标签(&lt;h:inputText&gt;)中添加了一个AJAX 支持. 该支持绑定了JavaScript事件“onkeyup” .因此, 
每一次该事件发布给父标签时,我们的程序将发送一个AJAX请求到Server.这意味着我们的受管理的bean将包含该“text” 域中我们输入的最新数据. 
</P>
<P>&lt;<B style="COLOR: black; BACKGROUND-COLOR: #ffff66">a4j</B>:support&gt; 
标签的“reRender” 属性(attribute)定义我们的页面的哪一部分被更新. 在这里,该页面唯一被更新的部位是 
&lt;h:outputText&gt; 标签,因为他的ID值和“reRender” 的属性值向匹配. 
在一个页面中更新多个元素(elements)也是很简单的:仅仅把他们的IDs放在 “reRender” 属性中就可以了. </P></DIV>
<DIV class=section lang=en>
<DIV class=titlepage>
<DIV>
<DIV>
<H3 class=title><A name=d0e121></A>数据 Bean</H3></DIV></DIV></DIV>
<P>当然了,为了运行这个程序我们还需要一个受管理的bean</P><PRE class=programlisting>        package demo;
        public class Bean {
        private String text;
        
        public Bean() {
        }
        
        public String getText() {
        return text;
        }
        
        public void setText(String text) {
        this.text = text;
        }
        }       
      </PRE></DIV>
<DIV class=section lang=en>
<DIV class=titlepage>
<DIV>
<DIV>
<H3 class=title><A name=d0e128></A>faces-config.xml</H3></DIV></DIV></DIV>
<P>下一步, 我们需要在faces-config.xml 中注册上面的bean:</P><PRE class=programlisting>    &lt;?xml version="1.0" encoding="UTF-8"?&gt;
    &lt;!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD 	JavaServer Faces Config 1.1//EN"
    "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"&gt;
    &lt;faces-config&gt;
      &lt;managed-bean&gt;
        &lt;managed-bean-name&gt;bean&lt;/managed-bean-name&gt;
        &lt;managed-bean-class&gt;demo.Bean&lt;/managed-bean-class&gt;
        &lt;managed-bean-scope&gt;request&lt;/managed-bean-scope&gt;
        &lt;managed-property&gt;
          &lt;property-name&gt;text&lt;/property-name&gt;
          &lt;value/&gt;
        &lt;/managed-property&gt;
      &lt;/managed-bean&gt;
    &lt;/faces-config&gt;
      </PRE>
<P>注意:这里没有任何东西直接和Ajax4jsf 有关联.</P></DIV>
<DIV class=section lang=en>
<DIV class=titlepage>
<DIV>
<DIV>
<H3 class=title><A name=d0e137></A>Web.xml</H3></DIV></DIV></DIV>
<P>最后,不要忘了添加jar文件和更改 web.xml 文件: </P><PRE class=programlisting>    &lt;?xml version="1.0"?&gt;
    &lt;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"&gt;
      
      &lt;display-name&gt;a4jEchoText&lt;/display-name&gt;
      &lt;context-param&gt;
        &lt;param-name&gt;javax.faces.STATE_SAVING_METHOD&lt;/param-name&gt;
        &lt;param-value&gt;server&lt;/param-value&gt;
      &lt;/context-param&gt;
      &lt;filter&gt;
        &lt;display-name&gt;Ajax4jsf Filter&lt;/display-name&gt;
        &lt;filter-name&gt;ajax4jsf&lt;/filter-name&gt;
        &lt;filter-class&gt;org.ajax4jsf.Filter&lt;/filter-class&gt;
      &lt;/filter&gt;
      &lt;filter-mapping&gt;
        &lt;filter-name&gt;ajax4jsf&lt;/filter-name&gt;
        &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
        &lt;dispatcher&gt;REQUEST&lt;/dispatcher&gt;
        &lt;dispatcher&gt;FORWARD&lt;/dispatcher&gt;
        &lt;dispatcher&gt;INCLUDE&lt;/dispatcher&gt;
      &lt;/filter-mapping&gt;
      &lt;listener&gt;
        &lt;listener-class&gt;
          com.sun.faces.config.ConfigureListener
        &lt;/listener-class&gt;
      &lt;/listener&gt;
      
      &lt;!-- Faces Servlet --&gt;
      &lt;servlet&gt;
        &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
        &lt;servlet-class&gt;
          javax.faces.webapp.FacesServlet
        &lt;/servlet-class&gt;
        &lt;load-on-startup&gt;1&lt;/load-on-startup&gt;
      &lt;/servlet&gt;
      
      &lt;!-- Faces Servlet Mapping --&gt;
      &lt;servlet-mapping&gt;
        &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
        &lt;url-pattern&gt;*.jsf&lt;/url-pattern&gt;
      &lt;/servlet-mapping&gt;
      &lt;login-config&gt;
        &lt;auth-method&gt;BASIC&lt;/auth-method&gt;
      &lt;/login-config&gt;
    &lt;/web-app&gt;
      </PRE>
<P>就这样了, 现在你的程序应该可以工作了.</P></DIV>
<DIV class=section lang=en>
<DIV class=titlepage>
<DIV>
<DIV>
<H3 class=title><A name=d0e146></A>部署</H3></DIV></DIV></DIV>
<P>最终,你可以在Servlet容器中部署你的程序了. 在你喜欢的容器中部署,然后在你的浏览器中输入: 
http://localhost:8080/a4jEchoText/echo.jsf </P></DIV></DIV></DIV>
<DIV class=chapter lang=en>
<DIV class=titlepage>
<DIV>
<DIV>
<H2 class=title><A name=d0e151></A>Chapter&nbsp;3.Ajax4jsf 
框架中的基本概念</H2></DIV></DIV></DIV>
<DIV class=toc>
<P><B>Table of Contents</B></P>
<DL>
  <DT><A href="#d0e154">Introduction</A> 
  <DT><A href="#d0e166">Architecture Overview</A> 
  <DT><A href="#d0e214">How To...</A> 
  <DD>
  <DL>
    <DT><A href="#d0e217">Send an AJAX Request</A> 
    <DT><A href="#d0e250">Decide What to Send</A> 
    <DT><A href="#d0e261">Decide What to Change</A></DT></DL></DD></DL></DIV>
<DIV class=section lang=en>
<DIV class=titlepage>
<DIV>
<DIV>
<H2 class=title style="CLEAR: both"><A name=d0e154></A>介绍</H2></DIV></DIV></DIV>
<P>该框架被实现为使用一个组件库来添加ajax功能到你的页面中,而不要写js代码或者使用新的Ajax装饰器替换你已经做好的JSF组件. Ajax4jsf 
具有页面范围(page-wide)的Ajax支持,而不是传统的组件范围(component-wide)的ajax支持.&nbsp; 
这意味着你可以在页面中定义一个激活Ajax请求的事件,和当根据客户端事件触发Ajax请求来改变服务器端数据后 如何使用JSF组件树来同步显示JSF页面. 
(This means you can define the event on the page that invokes an AJAX request 
and the areas of the page that should be synchronized with the JSF Component 
Tree after the AJAX request changes the data on the server according to the 
events fired on the client). </P>
<P>下面的图片展示了它是如何工作的:</P>
<DIV class=mediaobject></DIV>
<P>Ajax4jsf 允许你定义(意味着通过JSF 
tags)你希望通过AJAX请求更新的JSF页面的不同部分并且提供的一些发送AJAX请求到服务器端的选项,除了你的JSF页面于常规的JSF有点不同外,没有其他的不同了,这是一个你不需要写JS代码和XMLHttpRequest对象的天堂. 
</P></DIV>
<DIV class=section lang=en>
<DIV class=titlepage>
<DIV>
<DIV>
<H2 class=title style="CLEAR: both"><A 
name=d0e166></A>结构概览</H2></DIV></DIV></DIV>
<P>下面的图片展示了Ajax4jsf 框架的一些重要的元素</P>
<DIV class=mediaobject></DIV>
<P><B>Ajax 过滤器(Filter).&nbsp;</B> 为了得到应用 Ajax4jsf 的好处 你必须在在 web.xml 文件中注册一个Ajax 
Filter.该过滤器有一些职责. Ajax Filter 可以识别多种ajax请求种类. 
图片3的序列图展示了在处理常规页面和AJAX请求页面的不同之处.在开始的情况下,所有的JSF树将被编码(encoded). 在第二种情况下依据AJAX 
区域(region) (你可以通过使用&lt;<B 
style="COLOR: black; BACKGROUND-COLOR: #ffff66">a4j</B>:region&gt; tag来定义AJAX 
region&nbsp; )的大小(size). 就如你看到的,第二种情况下 过滤器将解析AJAX响应的内容,在它被发送到客户端以前, 
查看下面的图片来理解这两种方式:</P>
<DIV class=mediaobject></DIV>
<P>在这两种情况下, 你的程序所需要的静态或者动态资源的信息将被注册到ResourseBuilder 类中.当请求一个资源时(图片4),AJAX filter 
检查资源缓存(Resource Cache)看看这个资源是否存在,如果存在该资源将被送到客户端.否则过滤器将在ResourceBuilder中搜索注册的资源. 
如果该资源被注册了,AJAX filter将发送一个请求到 ResourceBuilder来创建[create 
(deliver)]该资源.下面的图片显示了请求资源的处理过程. </P>
<DIV class=mediaobject></DIV>
<P><B>Ajax动作组件(Action Components).&nbsp;</B> 有3个<B>Ajax动作组件</B>: 
AjaxCommandButton, AjaxCommandLink 和 AjaxSupport. 你可以使用他们从客户端发送AJAX请求.</P>
<P><B>Ajax容器 (Containers).&nbsp;</B> AjaxContainer 
是一个接口,该接口描述了在Ajax请求中应该被解码(decoded)的JSF页面中的一个区域.AjaxViewRoot 和 AjaxRegion 实现了该接口. 
</P>
<P><B>JavaScript引擎 (Engine).&nbsp;</B> Ajax4jsf JavaScript 引擎 在客户端运行. 
它知道如何根据来自于Ajax响应的信息来更新你JSF页面上的不同的区域. 程序开发者不需要直接使用这里的JavaScript代码.它自动的下载到客户端. 
</P></DIV>
<DIV class=section lang=en>
<DIV class=titlepage>
<DIV>
<DIV>
<H2 class=title style="CLEAR: both"><A 
name=d0e214></A>如何做...</H2></DIV></DIV></DIV>
<DIV class=section lang=en>
<DIV class=titlepage>
<DIV>
<DIV>
<H3 class=title><A name=d0e217></A>发送一个 AJAX 请求</H3></DIV></DIV></DIV>
<P>从JSF页面发送ajax请求有不同的方法. 你可以使用 &lt;<B 
style="COLOR: black; BACKGROUND-COLOR: #ffff66">a4j</B>:commandButton&gt;, 
&lt;<B style="COLOR: black; BACKGROUND-COLOR: #ffff66">a4j</B>:commandLink&gt; 
或者 &lt;<B style="COLOR: black; BACKGROUND-COLOR: #ffff66">a4j</B>:support&gt; 
tags. </P>
<P>所有的这些标签隐藏了在创建一个XMHttpRequest 对象和发送ajax请求所需要的JavaScript 活动.并且,
12345

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -