JSF 2 简介，第 3 部分: 事件处理、JavaScript 和 Ajax

victor_jan

浏览: 262016 次
性别:
来自: 多伦多

最近访客更多访客>>

freestylewill

eric_weitm

独浮云

yaoper

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JSF 编程

Ajax JSF JavaScript Bean Groovy

2009 年 8 月 03 日

Java™Server Faces (JSF) 2 专家组成员 David Geary 将在这一期文章中结束这部有关 JSF 2 新特性的系列文章（共 3 部分）。本文介绍如何使用该框架的新事件模型和内置 Ajax 支持来增强可重用组件的功能。

JSF 的最大卖点在于它是一种基于组件的框架。这意味着您可以实现供其他人重用的组件。这种强大的重用机制在 JSF 1 中基本上是不可能实现的，因为在 JSF 1 中实现组件是非常困难的事情。

然而，正如第 2 部分所述，JSF 2 通过一种名为复合组件 的新特性简化了组件的实现 — 无需 Java 代码和配置。这一特性可以说是 JSF 2 中最重要的部分，因为它真正实现了 JSF 组件的潜力。

在这份有关 JSF 2 的第三篇也是最后一篇文章中，我将展示如何利用新的 Ajax 和事件处理功能（也在 JSF 2 中引入）构建复合组件特性，要从 JSF 2 中获得最大收益，需要遵循下面的技巧：

技巧 1：组件化
技巧 2：Ajax 化
技巧 3：展示进度

对于第一个技巧，我将简要回顾已在第 2 部分中详细描述过的两个组件。对于后面的技巧，我将展示如何使用 Ajax 和事件处理功能来改造这些组件。

技巧 1：组件化

我在第 1 部分中引入的 places 应用程序包含有大量复合组件。其中之一便是 map 组件，它显示一个地址地图，其中包含一个缩放级别下拉菜单，如图 1 所示：

图 1. places 应用程序的 map 组件
map 组件

清单 1 显示了经过删减的 map 组件列表：

清单 1. map 组件

				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml"
    ...
    xmlns:composite="http://java.sun.com/jsf/composite"
    xmlns:places="http://java.sun.com/jsf/composite/components/places">
    
   <!-- INTERFACE -->
   <composite:interface>
     <composite:attribute name="title"/>
   </composite:interface>
        
   <!-- IMPLEMENTATION --> 
   <composite:implementation">
     <div class="map">
       ...
       <h:panelGrid...>
         <h:panelGrid...>
            <h:selectOneMenu
 onchange="submit()"
                 value="#{cc.parent.attrs.location.zoomIndex
}"
                 valueChangeListener="#{cc.parent.attrs.location.zoomChanged}"
                 style="font-size:13px;font-family:Palatino">
            
              <f:selectItems value="#{places.zoomLevelItems}"/>
                           
            </h:selectOneMenu>               
          </h:panelGrid>
        </h:panelGrid>   
        
        <h:graphicImage
 url="#{cc.parent.attrs.location.mapUrl}" 
          style="border: thin solid gray"/>  
       ...
      
     </div>
   ...
       
  </composite:implementation>    
</html>

组件的一大优点就是可以使用更有效的替代方法替换它们，同时不会影响到相关的功能。比如，在图 2 中，我使用一个 Google Maps 组件替换了清单 1 中的 image 组件，Google Maps 组件由 GMaps4JSF 提供（见参考资料）：

图 2. GMaps4JSF 的 map 图像
GMaps4JSF map 组件

map 组件的更新后的代码（进行了删减）如清单 2 所示：

清单 2. 使用一个 GMaps4JSF 组件替换 map 图形

				
<h:selectOneMenu onchange="submit()"

				value
="#{cc.parent.attrs.location.zoomIndex
}"
              valueChangeListener="#{cc.parent.attrs.location.zoomChanged}"
              style="font-size:13px;font-family:Palatino">
     
  <f:selectItems value="#{places.zoomLevelItems}"/>
                    
</h:selectOneMenu>   

...         

<m:map
 id="map" width="420px" height="400px" 
     address="#{cc.parent.attrs.location.streetAddress}, ..." 
     zoom
="#{cc.parent.attrs.location.zoomIndex
}"
     renderOnWindowLoad="false">
     
  <m:mapControl id="smallMapCtrl" 
              name="GLargeMapControl" 
          position="G_ANCHOR_TOP_RIGHT"/>
          
  <m:mapControl  id="smallMapTypeCtrl" name="GMapTypeControl"/>                  
  <m:marker id="placeMapMarker"/>     
    
</m:map>

要使用 GMaps4JSF 组件，我从 GMaps4JSF 组件集合中使用 <m:map> 标记替换了 <h:graphicImage> 标记。将 GMaps4JSF 组件与缩放下拉菜单连接起来也很简单，只需为 <m:map> 标记的 zoom 属性指定正确的 backing-bean 属性。

关于缩放级别需要注意一点，那就是当一名用户修改缩放级别时，我将通过 <h:selectOneMenu> 的 onchange 属性强制执行表单提交，如清单 1 中第一处使用粗体显示的代码行所示。这个表单提交将触发 JSF 生命周期，这实际上将把新的缩放级别推入到保存在父复合组件中的 location bean 的 zoomIndex 属性中。这个 bean 属性被绑定到输入组件，如清单 2 中的第一行所示。

由于我没有为与缩放级别修改相关的表单提交指定任何导航，JSF 在处理请求后刷新了同一页面，重新绘制地图以反映新的缩放级别。然而，页面刷新还重新绘制了整个页面，即使只修改了地图图像。在技巧 2：Ajax 化中，我将展示如何使用 Ajax，只对图像部分重新绘制，以响应缩放级别的修改。

login 组件

places 应用程序中使用的另一个组件是 login 组件。图 3 展示了这个 login 组件的实际使用：

图 3. login 组件

清单 3 展示了创建图 3 所示的 login 组件的标记：

清单 3. 最基础的 login ：只包含必需的属性

				
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:util="http://java.sun.com/jsf/composite/components/util">

  <util:login loginAction
="#{user.login}"
              managedBean
="#{user}"/>
                
</ui:composition>

login 组件只包含两个必需的属性：

loginAction ：登录 action 方法
managedBean ：包含名称和密码属性的托管

清单 3 中指定的托管 bean 如清单 4 所示：

清单 4. User.groovy

				
package com.clarity

import javax.faces.context.FacesContext
import javax.faces.bean.ManagedBean
import javax.faces.bean.SessionScoped
 
@ManagedBean() 
@SessionScoped  
               
public class User {    
  private final String VALID_NAME     = "Hiro"
  private final String VALID_PASSWORD = "jsf"
  
  private String name, password
;
 
  public String getName() { name }
  public void setName(String newValue) { name = newValue }
  
  public String getPassword() { return password }
  public void setPassword(String newValue) { password = newValue }  
  
  public String login()
 {
    "/views/places"
  }

  public String logout() {
    name = password = nameError = null
    "/views/login"
  }
}

清单 4 中的托管 bean 是一个 Groovy bean。在这里使用 Groovy 替代 Java 语言并不会带来多少好处，只是减少了处理分号和返回语句的麻烦。然而，在技巧 2 的 Validation 部分中，我将展示一个对 User 托管 bean 使用 Groovy 的更有说服力的原因。

大多数情况下，您将需要使用提示和按钮文本来配置登录组件，如图 4 所示：

图 4. 充分配置的 login 组件
充分配置的 login 组件

清单 5 展示了生成图 4 所示的 login 组件的标记：

清单 5. 配置 login 组件

				
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:util="http://java.sun.com/jsf/composite/components/util">
  
  <util:login loginPrompt="#{msgs.loginPrompt}"
               namePrompt="#{msgs.namePrompt}"
           passwordPrompt="#{msgs.passwordPrompt}"
          loginButtonText="#{msgs.loginButtonText}"
              loginAction="#{user.login}"          
              managedBean="#{user}"/>
                
</ui:composition>

在清单 5 中，我从一个资源包中获取了用于提示的字符串和登录按钮的文本。

清单 6 定义了 login 组件：

清单 6. 定义 login 组件

				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- Usage:

  <util:login loginPrompt="#{msgs.loginPrompt}"
               namePrompt="#{msgs.namePrompt}"
           passwordPrompt="#{msgs.passwordPrompt}"
          loginButtonText="#{msgs.loginButtonText}"
              loginAction="#{user.login}"
              managedBean="#{user}">
                 
    <f:actionListener for="loginButton" 
                     type="com.clarity.LoginActionListener"/>
                            
  </util:login>

  managedBean must have two properties: name and password. 
  
  The loginAction attribute must be an action method that takes no
  arguments and returns a string. That string is used to navigate
  to the page the user sees after logging in.
  
  This component's loginButton is accessible so that you can
  add action listeners to it, as depicted above. The class specified
  in f:actionListener's type attribute must implement the
  javax.faces.event.ActionListener interface.
  
 -->
 
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:composite="http://java.sun.com/jsf/composite">
    
  <!-- INTERFACE -->
  <composite:interface
>
  
    <!-- PROMPTS -->
    <composite:attribute name="loginPrompt"/>
    <composite:attribute name="namePrompt"/>
    <composite:attribute name="passwordPrompt"/>
    
    <!--  LOGIN BUTTON -->      
    <composite:attribute name="loginButtonText"/>
    
    <!-- loginAction is called when the form is submitted -->
    <composite:attribute name="loginAction" 
             method-signature="java.lang.String login()"
                     required="true"/>
                     
    <!-- You can add listeners to this actionSource:  -->
    <composite:actionSource name="loginButton" targets="form:loginButton"/>
      
    <!-- BACKING BEAN -->
    <composite:attribute name="managedBean" required="true"/>
  </composite:interface>
    
  <!-- IMPLEMENTATION -->
  <composite:implementation
>
    <div class="prompt">
      #{cc.attrs.loginPrompt
}
    </div>
    
    <!-- FORM -->       
    <h:form id="form">
      <h:panelGrid columns="2">
      
        <!-- NAME AND PASSWORD FIELDS -->
        #{cc.attrs.namePrompt
}
        <h:inputText id="name" 
                  value="#{cc.attrs.managedBean.name
}"/>
    
        #{cc.attrs.passwordPrompt
} 
        <h:inputSecret id="password" size="8" 
          value="#{cc.attrs.managedBean.password
}"/>
          
      </h:panelGrid>
    
      <p>
        <!-- LOGIN BUTTON -->    
        <h:commandButton id="loginButton"
          value="#{cc.attrs.loginButtonText
}"
          action="#{cc.attrs.loginAction
}"/>
      </p>
    </h:form>    
  </composite:implementation>
</html>

和 map 组件一样，login 也可以使用一个 Ajax 升级。在下一个技巧介绍 Validation 时，我将展示如何将 Ajax 验证添加到 login 组件中。

回页首

技巧 2：Ajax 化

与非 Ajax HTTP 请求相比，Ajax 请求通常需要额外执行两个步骤：在服务器中对表单进行局部处理，接着在客户机上对 Document Object Model (DOM) 进行局部呈现。

局部处理和呈现

通过将 JSF 生命周期分解为两个不同的逻辑部分 —— 执行和呈现，JSF 2 现在支持局部处理和局部呈现。图 5 突出显示了执行部分：

图 5. JSF 生命周期的执行部分

图 6 突出显示了 JSF 生命周期的呈现部分：

图 6. JSF 生命周期的呈现部分

将生命周期划分为执行和呈现部分的原理很简单：您可以指定 JSF 在服务器上执行（处理）的组件，以及在返回 Ajax 调用时 JSF 呈现的组件。将使用 JSF 2 中新增的 <f:ajax> 实现这个目的，如清单 7 所示：

清单 7. 一个 Ajax 缩放菜单

				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<h:selectOneMenu id="menu"
     value
="#{cc.parent.attrs.location.zoomIndex}"
     style="font-size:13px;font-family:Palatino">

  <f:ajax event="change" execute="@this" render="map"/>

  <f:selectItems value="#{places.zoomLevelItems}"/>
             
</h:selectOneMenu>             
     
<m:map id="map
"...>

清单 7 对清单 2 中的第一行所示的菜单进行了修改：我从清单 2 中删除了 onchange 属性，并添加了一个 <f:ajax> 标记。这个 <f:ajax> 标记指定了以下内容：

触发 Ajax 调用的事件
在服务器上执行的组件
在客户机上呈现的组件

当用户从缩放菜单中选择一个菜单项时，JSF 将对服务器发出 Ajax 调用。随后，JSF 将菜单传递给生命周期的执行部分（@this 表示 <f:ajax> 周围的组件），并在生命周期的 Update Model Values 阶段更新菜单的 zoomIndex 。当 Ajax 调用返回后，JSF 呈现地图组件，后者使用（新设置的）缩放指数重新绘制地图，现在您就有了一个 Ajax 化的缩放菜单，其中添加了一行 XHTML。

但是还可以进一步简化，因为 JSF 为 event 和 execute 属性提供了默认值。

每个 JSF 组件都有一个默认事件，当在组件标记内部嵌入 <f:ajax> 标记时，该事件将触发 Ajax 调用。对于菜单，该事件为 change 事件。这意味着我可以删除清单 7 中的 <f:ajax> 的 event 属性。<f:ajax> 的 execute 属性的默认值是 @this ，这表示围绕在 <f:ajax> 周围的组件。在本例中，该组件为菜单，因此还可以删除 execute 属性。

通过对 <f:ajax> 使用默认属性值，我可以将清单 7 简化为清单 8：

清单 8. 简化后的 Ajax 缩放菜单

				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<h:selectOneMenu id="menu"
     value="#{cc.parent.attrs.location.zoomIndex}"
     style="font-size:13px;font-family:Palatino">

  <f:ajax render="map"/>

  <f:selectItems value="#{places.zoomLevelItems}"/>
             
</h:selectOneMenu>             

<m:map id="map"...>

这演示了使用 JSF 2 向组件添加 Ajax 有多么容易。当然，前面的例子非常简单：我仅仅是在用户选择某个缩放级别时重新绘制了地图而不是整个页面。验证表单中的各个字段等操作要更加复杂一些，因此接下来我将讨论这些用例。

验证

当用户移出某个字段后对字段进行验证并提供即时的反馈，这始终是一个好的做法。例如，在图 7 中，我使用了 Ajax 对名称字段进行了验证：

图 7. Ajax 验证

该名称字段的标记如清单 9 所示：

清单 9. 名称字段

				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<h:panelGrid columns="2">
  #{cc.attrs.namePrompt}
  <h:panelGroup>
    <h:inputText id="name" value="#{cc.attrs.managedBean.name}"
       valueChangeListener
="#{cc.attrs.managedBean.validateName}">
       
       <f:ajax
 event="blur
" render="nameError
"/>
       
     </h:inputText>
     
     <h:outputText id="nameError
" 
       value="#{cc.attrs.managedBean.nameError
}"
       style="color: red;font-style: italic;"/>
  </h:panelGroup>     
  ... 
</h:panelGrid>

我再一次使用了 <f:ajax> ，只不过这一次没有执行输入的默认事件 — change ，因此我将 blur 指定为触发 Ajax 调用的事件。当用户移出名称字段时，JSF 将对服务器发出 Ajax 调用并在生命周期的执行部分运行 name 输入组件。这意味着 JSF 将在生命周期的 Process Validations 阶段调用 name 输入的值修改监听程序（在清单 9 中指定）。清单 10 展示了这个值修改监听程序：

清单 10. validateName() 方法

				
package com.clarity

import javax.faces.context.FacesContext
import javax.faces.bean.ManagedBean
import javax.faces.bean.SessionScoped
import javax.faces.event.ValueChangeEvent 
import javax.faces.component.UIInput 
 
@ManagedBean()  
@SessionScoped    
       
public class User {    
  private String name, password, nameError;
 
  ...
  
  public void validateName
(ValueChangeEvent e) {
    UIInput nameInput = e.getComponent()
    String name = nameInput.getValue()
    
    if (name.contains("_"))   nameError
 = "Name cannot contain underscores"
    else if (name.equals("")) nameError
 = "Name cannot be blank"
    else                      nameError
 = "" 
  }
  
  ...
}

这个修改值的监听程序（user 托管 bean 的 validateName() 方法）将验证名称字段并更新 user 托管 bean 的 nameError 属性。

返回 Ajax 调用后，借助清单 9 中的 <f:ajax> 标记的 render 属性，JSF 呈现 nameError 输出。该输出显示了 user 托管 bean 的 nameError 属性。

多字段验证

在前面的小节中，我展示了如何对单一字段执行 Ajax 验证。但是，有些情况下，需要同时对多个字段进行验证。比如，图 8 展示了 places 应用程序同时验证名称和密码字段：

图 8. 验证多个字段

我在用户提交表单时同时验证了名称和密码字段，因此对这个例子不需要用到 Ajax。相反，我将使用 JSF 2 的新事件系统，如清单 11 所示：

清单 11. 使用 <f:event>

				
<h:form id="form" prependId="false">
  
  <f:event
 type="postValidate
" 
       listener="#{cc.attrs.managedBean.validate}"/>
  ...
</h:form>

<div class="error" style="padding-top:10px;">
  <h:messages layout="table"/>
</div>

在清单 11 中，我使用了 <f:event> — 类似于 <f:ajax> ，它是 JSF 2 中新增的内容。<f:event> 标记在另一方面还类似于 <f:ajax> ：使用起来很简单。

将一个 <f:event> 标记放到组件标记的内部，当该组件发生指定的事件（使用 type 属性指定）时，JSF 将调用一个使用 listener 属性指定的方法。因此，<f:event> 标记在清单 11 中的含义就是：对表单进行验证后，对用户传递给这个复合组件的托管 bean 调用 validate() 方法。该方法如清单 12 所示：

清单 12. validate() 方法

				
package com.clarity

import javax.faces.context.FacesContext
import javax.faces.bean.ManagedBean
import javax.faces.bean.SessionScoped
import javax.faces.event.ValueChangeEvent 
import javax.faces.component.UIInput 
 
@ManagedBean()  
@SessionScoped    
       
public class User {    
  private final String VALID_NAME     = "Hiro";
  private final String VALID_PASSWORD = "jsf";
  
  ...
  
  public void validate
(ComponentSystemEvent e) {
    UIForm form = e.getComponent() 
    UIInput nameInput = form.findComponent("name")
    UIInput pwdInput = form.findComponent("password")
    
    if ( ! (nameInput.getValue().equals(VALID_NAME) &&
        pwdInput.getValue().equals(VALID_PASSWORD))) {
      
      FacesContext fc = FacesContext.getCurrentInstance()
      fc.addMessage(form.getClientId(), 
        new FacesMessage("Name and password are invalid. Please try again."))
      fc.renderResponse()
    }
  }
  
  ...
}

JSF 将一个组件系统事件传递给清单 12 中的 validate() 方法，方法从这个事件中获得对（适用于事件的）组件的引用 — 登录表单。对于这个表单，我使用 findComponent() 方法获得名称和密码组件。如果这些组件的值不为 Hiro 和 jsf，那么我将把一条消息存储到 faces 上下文并要求 JSF 继续处理生命周期的 Render Response 阶段。通过这种方法，就可以避免 Update Model Values 阶段，后者会将坏的名称和密码传递给模型（见图 5 ）。

您可能已经注意到，清单 10 和清单 12 中的验证方法是使用 Groovy 编写的。与清单 4 不同，后者使用 Groovy 的惟一好处就是避免了分号和返回语句，清单 10 和清单 12 中的 Groovy 代码使我不必进行类型转换。例如，在清单 10 中，ComponentSystemEvent.getComponent() 和 UIComponent.findComponent() 都返回类型 UIComponent 。对于 Java 语言，我需要转换这些方法的返回值。Groovy 为我做了这一转换工作。

回页首

技巧 3：展示进度

在 Ajax 化中，我展示了如何为 map 组件 Ajax 化缩放菜单，因此，当用户修改缩放级别时，places 应用程序将只重新绘制页面的地图部分。另一个常见 Ajax 用例是向用户提供反馈，表示一个 Ajax 事件正在处理中，如图 9 所示：

图 9. 进度条

在图 9 中，我将使用一个动画 GIF 替换缩放菜单，这个动画 GIF 将在 Ajax 调用期间显示。当 Ajax 调用完成后，我将使用缩放菜单替换进度指示器。清单 13 展示了这一过程：

清单 13. 监视 Ajax 调用

				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<h:selectOneMenu id="menu"
     value="#{cc.parent.attrs.location.zoomIndex}"
     style="font-size:13px;font-family:Palatino">

  <f:ajax render="map" onevent="zoomChanging"
/>
  <f:selectItems value="#{places.zoomLevelItems}"/>

  ...             
</h:selectOneMenu>
...
<h:graphicImage id="progressbar
" style="display: none" 
              library="images" name="orange-barber-pole.gif"/>

在清单 13 中，我添加了一个进度条图像（该图像最初不会显示出来），并为 <f:ajax> 指定了 onevent 属性。该属性引用一个 JavaScript 函数，如清单 14 所示，这个函数将在清单 13 中的 Ajax 调用被初始化时由 JSF 调用：

清单 14. 响应 Ajax 请求的 JavaScript

				
function zoomChanging(data) {
  var menuId = data.source.id;
  var progressbarId = menuId.substring(0, menuId.length - "menu".length)
      + "progressbar";

  if (data.name == "begin") {
    Element.hide(menuId);
    Element.show(progressbarId);
  } 
  else if (data.name == "success") {
    Element.show(menuId);
    Element.hide(progressbarId);
  }
}

JSF 向清单 14 中的函数传递一个对象，该对象中包含有一些信息，比如触发了事件的组件的客户机标识符（在本例中为缩放级别菜单），以及 Ajax 请求的当前状态，使用 name 属性表示。

清单 14 中的 zoomChanging() 函数计算进度条图像的客户机标识符，然后使用 Prototype Element 对象在 Ajax 调用期间隐藏和显示对应的 HTML 元素。

回页首

结束语

在过去几年中，人们认为 JSF 1 是一个难以使用的框架。在许多方面上，这种评价是有一定道理的。JSF 1 在开发期间完全没有考虑到实际使用中遇到的问题。因此，JSF 在实现应用程序和组件方面比预先设想更加困难。

另一方面，JSF 2 经历了那些在 JSF 1 基础之上实现过开源项目的开发人员的实际体验。总结经验之后，JSF 2 是一个更加合理的框架，可以轻松地实现健壮的、Ajax 化的应用程序。

贯穿本系列文章，我展示了一些最突出的 JSF 2 特性，比如注释和替换配置约定、简化后的导航、资源支持、复合组件、内置 Ajax 以及内嵌的事件模型。但是仍然有许多 JSF 2 特性未在本系列提及，比如 View 和 Page 范围、为页面添加书签的支持和 Project Stage。所有这些特性以及其他更多特性让 JSF 2 在 JSF 1 的基础上实现了巨大的改进。

回页首

下载

描述名字大小下载方法本文示例的源代码

j-jsf2-fu-3.zip	line-height: 19px; border-top: 1px solid #cccccc; padding: 4px 4px 4px 5p 分享到： How to use EJB 3 timer in a weblogic 10 ... \| JSF 2 简介，第 2 部分: 模板及复合组件 2010-09-11 00:56 浏览 1728 评论(0) 分类:Web前端查看更多评论发表评论您还没有登录,请您登录后再发表评论相关推荐 ajax4jsf实例 - Ajax事件处理：Ajax4JSF允许开发者定义和处理各种Ajax事件，比如点击、更改、验证等，这些事件可以在后台服务器端触发相应的处理逻辑，而无需刷新整个页面。 - Ajax行为组件：提供了一系列内置的行为组件... CSS、JavaScript 和 JSF 精心打造 Ajax 应用例如，使用CSS设计一个响应式的布局，当用户在JSF组件（如输入框或下拉菜单）上触发事件时，通过JavaScript和JSF的Ajax功能向服务器发送请求，获取并动态渲染新的数据。这不仅减少了页面的加载时间，还确保了用户的... ajax4jsf.zip 2. Ajax事件处理: 通过Ajax4JSF，开发者可以定义触发Ajax请求的用户事件，如按钮点击、表单提交等，并在后台处理这些事件后更新相应的视图。 3. Ajax请求和响应: 使用Ajax4JSF，开发者可以指定Ajax请求的... JSF全套（JSF入门教+ LIB+ Ajax4JSF使用手册）学习这部分，你需要了解如何导入和使用JSF的库，例如`javax.faces.`和`org.primefaces.`，以及它们提供的功能，如数据验证、转换器、事件处理等。 4. Ajax4JSF使用手册：Ajax4JSF是JSF的一个扩展，它为JSF... Ajax4jsf 用户手册该框架使得在JSF环境中实现Ajax功能变得更加简单，无需编写JavaScript代码，而是通过一组组件和API来实现。 ### 1. 开始使用Ajax4jsf - 环境需求：首先，你需要一个支持Ajax4jsf的Java版本以及JavaServer ... ajax4jsf-demo Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过创建或使用XMLHttpRequest对象与服务器进行异步通信，使得用户可以无感知地获取并更新数据，改善用户... ajax4jsf使用中文手册 Ajax4JSF的行为和事件 Ajax4JSF的行为（Behaviors）定义了如何响应用户事件，而事件（Events）则是行为触发的结果。例如，`a4j:support`标签用于添加Ajax行为，而`a4j:ajax`提供了更强大的功能，包括请求触发条件... Ajax4JSF用户指南它通过一个组件库实现，允许你在页面级别定义Ajax事件，而不必手动编写JavaScript或替换现有的JSF组件。这种页面范围的Ajax支持使得你可以定义一个触发Ajax请求的事件，并在接收到客户端事件后，根据需要更新服务器... ajax4jsf中文用户指南 Ajax4JSF（Ajax for JavaServer Faces）是一个开源框架，专为JavaServer Faces（JSF）应用程序添加Ajax功能。这个框架使得开发者无需编写JavaScript代码就能实现丰富的用户界面和交互性。Ajax4JSF充分利用JSF的优势... jsf帮助文档中文手册 javascript js_ref 6. 事件处理：JSF有丰富的事件处理机制，允许开发者定义事件监听器和处理程序。三、JavaScript与JSF的结合 1. AJAX集成：通过JavaScript和XMLHttpRequest对象，JSF可以实现部分页面更新，提高用户体验。 2. JSF... ajax 4jsf用户指南中文版 - 简介：Ajax4JSF是一款开源框架，其主要目标是为JavaServer Faces（JSF）项目添加Ajax功能，无需编写JavaScript代码。 - 特点： - 充分利用JSF框架的优点，如生命周期管理、验证和转换等。 - 提供高度可... ajax4jsf教程 2. AJAX技术：Asynchronous JavaScript and XML（异步JavaScript和XML）是一种在不刷新整个页面的情况下更新部分网页的技术，通过JavaScript与服务器进行少量数据交换，实现了页面的动态更新。 3. Ajax4JSF... jboss-ajax4jsf-1.1.1-src 在深入研究这个项目时，开发者首先需要了解JSF和Ajax的基础知识，然后可以查看源码以理解Ajax4jsf如何处理Ajax请求和响应，以及如何在JSF组件中集成Ajax功能。此外，通过运行示例或测试代码，开发者能够快速上手并... seam+jsf+richfaces+ajax4jsf 电子书 - Ajax4jsf的集成和Ajax事件处理 - Seam中的依赖注入和事件处理 - 如何利用Seam进行安全性和国际化设置 - 例子和实战项目，展示如何结合使用这些技术构建实际应用掌握这些知识点后，开发者将能够高效地构建出功能... JSF + ajax入门程序，有注释很多，适用JSF新手 JSF的核心概念包括组件、事件和渲染树，这些元素共同工作以创建动态、交互式的用户界面。 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下更新部分网页内容的技术。通过Ajax，开发者... ajax jsf javascript Ajax4jsf架构概述提供了对框架内部工作原理的深入理解，包括请求处理流程、事件模型和组件生命周期。了解这些基础概念对于高效使用框架至关重要。 ##### 发送AJAX请求发送AJAX请求是使用Ajax4jsf的关键步骤，通过`... JSF第一步--JSF+Spring+ Hibernate+AJAX编程实践试读在IT行业中，JavaScript Server Faces（JSF）是一种用于构建企业级Web应用的Java框架，它提供了组件模型和事件驱动的编程模型。结合Spring框架，我们可以实现更灵活的依赖注入和服务管理，而Hibernate则是流行的ORM... ajax的框架dwr整合jsf 3. DWR与JSF的整合：整合DWR和JSF，可以让JSF应用利用DWR的Ajax能力。首先，需要在JSF项目中添加DWR的依赖，包括dwr-engine.jar、dwr-server.jar等。接着，配置DWR的`dwr.xml`文件，声明要暴露给JavaScript的... JSF2.0实战 - 10、自定义Ajax更新方式 - 集成到JSF：将自定义的Dojo Ajax请求与JSF的生命周期同步，确保在适当的时候触发请求和处理响应。 7. 优化与性能**：自定义Ajax更新方式时，应考虑性能优化，如减少不必要的网络请求，合理缓存数据，以及优化... JSF 2 简介，第 2 部分: 模板及复合组件 2010-09-11 00:54 1379 （转自： http://www.ibm.com/develop ... JSF 2简介，第1部分：流线化Web应用程序开发 2010-09-11 00:52 1486 （转自： http://www.ibm.com/develop ... Global site tag (gtag.js) - Google Analytics

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JSF 2 简介，第 3 部分: 事件处理、JavaScript 和 Ajax

评论

发表评论

相关推荐

JSF 2 简介，第 2 部分: 模板及复合组件

JSF 2简介，第1部分：流线化Web应用程序开发

最近访客更多访客>>