`

Chapter 2. 开始使用Ajax4jsf

BeanJSFAjaxServletWeb 
阅读更多

要使用Ajax4JSF 框架你仅仅需要JDK1.4或者更高,任何JSF实现,和你最喜欢的Servlet容器.在下一章我们将给你提供详细的环境信息.

Ajax4jsf 被设计为一个容易使用的框架.仅仅有一点简单的设置步骤就可以在你的JSF程序中使用Ajax功能了.

最新的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 文件中:

    1. <filter>  
    2.          <display-name>Ajax4jsf Filterdisplay-name>  
    3.          <filter-name>ajax4jsffilter-name>  
    4.          <filter-class>org.ajax4jsf.Filterfilter-class>  
    5.          filter>  
    6.          <filter-mapping>  
    7.          <filter-name>ajax4jsffilter-name>  
    8.          <servlet-name>Faces Servletservlet-name>  
    9.          <dispatcher>REQUESTdispatcher>  
    10.          <dispatcher>FORWARDdispatcher>  
    11.          <dispatcher>INCLUDEdispatcher>  
    12.          filter-mapping>  

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

  • 添加下面的内容:
      

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

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

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

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

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

    xml 代码
    1. <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>  
    2.    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>  
    3.    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>  
    4.    <html>  
    5.      <head>  
    6.        <title>repeater </title>    
    7.      </head>  
    8.      <body>  
    9.        <f:view>  
    10.          <h:form>  
    11.            <h:inputText size="50" value="#{bean.text}" >    
    12.              <a4j:support event="onkeyup" reRender="rep"/>  
    13.            </h:inputText>  
    14.            <h:outputText value="#{bean.text}" id="rep"/>  
    15.          </h:form>  
    16.        </f:view>  
    17.      </body>  
    18.    </html>  
    就如你看到的,唯一一行于常给JSF页面代码不同的就是下面的一行
    1. <a4j:support event="onkeyup" reRender="rep"/>  

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

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

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

    1. package demo;   
    2.         public class Bean {   
    3.         private String text;   
    4.            
    5.         public Bean() {   
    6.         }   
    7.            
    8.         public String getText() {   
    9.         return text;   
    10.         }   
    11.            
    12.         public void setText(String text) {   
    13.         this.text = text;   
    14.         }   
    15.         }        

    下一步, 我们需要在faces-config.xml 中注册上面的bean:

    1. <!---->xml version="1.0" encoding="UTF-8"?>  
    2.     <!---->
    3.     "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">  
    4.     <faces-config>  
    5.       <managed-bean>  
    6.         <managed-bean-name>beanmanaged-bean-name>  
    7.         <managed-bean-class>demo.Beanmanaged-bean-class>  
    8.         <managed-bean-scope>requestmanaged-bean-scope>  
    9.         <managed-property>  
    10.           <property-name>textproperty-name>  
    11.           <value/>  
    12.         managed-property>  
    13.       managed-bean>  
    14.     faces-config>  

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

    最后,不要忘了添加jar文件和更改 web.xml 文件:

    1. <!---->xml version="1.0"?>  
    2.     <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"  
    3.       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    4.       xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
    5.          
    6.       <display-name>a4jEchoTextdisplay-name>  
    7.       <context-param>  
    8.         <param-name>javax.faces.STATE_SAVING_METHODparam-name>  
    9.         <param-value>serverparam-value>  
    10.       context-param>  
    11.       <filter>  
    12.         <display-name>Ajax4jsf Filterdisplay-name>  
    13.         <filter-name>ajax4jsffilter-name>  
    14.         <filter-class>org.ajax4jsf.Filterfilter-class>  
    15.       filter>  
    16.       <filter-mapping>  
    17.         <filter-name>ajax4jsffilter-name>  
    18.         <servlet-name>Faces Servletservlet-name>  
    19.         <dispatcher>REQUESTdispatcher>  
    20.         <dispatcher>FORWARDdispatcher>  
    21.         <dispatcher>INCLUDEdispatcher>  
    22.       filter-mapping>  
    23.       <listener>  
    24.         <listener-class>  
    25.           com.sun.faces.config.ConfigureListener   
    26.         listener-class>  
    27.       listener>  
    28.          
    29.       <!---->  
    30.       <servlet>  
    31.         <servlet-name>Faces Servletservlet-name>  
    32.         <servlet-class>  
    33.           javax.faces.webapp.FacesServlet   
    34.         servlet-class>  
    35.         <load-on-startup>1load-on-startup>  
    36.       servlet>  
    37.          
    38.       <!---->  
    39.       <servlet-mapping>  
    40.         <servlet-name>Faces Servletservlet-name>  
    41.         <url-pattern>*.jsfurl-pattern>  
    42.       servlet-mapping>  
    43.       <login-config>  
    44.         <auth-method>BASICauth-method>  
    45.       login-config>  
    46.     web-app>  

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

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

    | A4J 用户指南 Chapter 1
    评论
    发表评论

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

    相关推荐

    Magicbox
    Global site tag (gtag.js) - Google Analytics