如何通过JSF2实现可重用的Ajax化组件

中。这样，其他组件便可通过其客户机ID来引用自动完成组件。举例来说，另一个组件可能会希望在Ajax调用期间执行或呈现一个或多个自动完成组件。

.第三，文本输入和列表框都附加了相应的值变更监听程序，因此当JSF发起Ajax调用来响应用户在文本输入中的键入操作时，JSF会调用服务器上的文本输入的值变更监听程序。当用户从列表框中选择项目时，JSF会向服务器发起一个Ajax调用并调用列表框的值变更监听程序。

清单5显示了自动完成组件所使用的JavaScript：

清单5.JavaScript

if (!com)     var com = {}   if (!com.corejsf) {     var focusLostTimeout     com.corejsf = {        errorHandler : function(data) {           alert("Error occurred during Ajax call: " + data.description)        },         updateCompletionItems : function(input, event) {           var keystrokeTimeout            jsf.ajax.addOnError(com.corejsf.errorHandler)            var ajaxRequest = function() {               jsf.ajax.request(input, event, {                 render: com.corejsf.getListboxId(input),                 x: Element.cumulativeOffset(input)[0],                 y: Element.cumulativeOffset(input)[1]                       + Element.getHeight(input)              })           }            window.clearTimeout(keystrokeTimeout)           keystrokeTimeout = window.setTimeout(ajaxRequest, 350)        },         inputLostFocus : function(input) {           var hideListbox = function() {              Element.hide(com.corejsf.getListboxId(input))           }            focusLostTimeout = window.setTimeout(hideListbox, 200)        },         getListboxId : function(input) {           var clientId = new String(input.name)           var lastIndex = clientId.lastIndexOf(':')           return clientId.substring(0, lastIndex) + ':listbox'        }     }  }

清单5中的JavaScript包括三个函数，我把它们放置在com.corejsf名称空间的内部。我实现了名称空间（从技术上说是一个JavaScript字面对象），以防止其他人有意或无意修改我的三个函数。

如果这些函数未包含在com.corejsf中，则其他人可以实现自己的updateCompletionItems函数，从而将我的实现替换成它们。一些JavaScript库可以实现一个updateCompletionItems函数，但最理想的情况是任何人都不用设计com.corejsf.updateCompletionItems。（相反，抛弃com，并使用corejsf.updateCompletionItems可能已经足够，但有时会难以控制。）

因此，这些函数做了些什么？updateCompletionItems()函数向服务器发起Ajax请求—通过调用JSF的jsf.ajax.request()函数—要求JSF仅在Ajax调用返回时呈现列表框组件。updateCompletionItems()函数还传递了两个额外的参数到jsf.ajax.request()中：列表框左上角的x和y坐标。jsf.ajax.request()函数会将这些函数参数转换为通过Ajax调用发送的请求参数。

JSF会在文本输入失焦时调用inputLostFocus()函数。该函数的作用是使用Prototype的Element对象来隐藏列表框。

updateCompletionItems()和inputLostFocus()将它们的功能存储在一个函数中。然后，它们安排自己的函数分别在350ms和200ms时执行。换句话说，每个函数都有各自的任务，但它会让任务延时350ms或200ms。文本输入会在keyup事件后延时，因此，updateCompletionItems()方法会最多每隔350ms发送一个Ajax请求。其思想是，如果用户输入速度极快，则不会让Ajax调用淹没服务器。

inputLostFocus函数会在文本输入失焦时调用，并延时其任务200ms。这种延时是必要的，因为该值会在Ajax调用返回时复制到列表框之外，并且列表框必须为可见才能确保它正常运行。

最后，请注意getListBoxId()函数。这个帮助器函数会从文本输入的客户机标识符中获取列表框的客户机标识符。该函数可以完成此任务，因为它将与清单4中的autoComplete组件相结合。autoComplete组件将input和listbox分别指定为文本框和列表框的组件标识符，因此getListBoxId()函数会删除input并附加listbox，以便获取文本输入的客户机标识符。

清单6显示了监听程序的最终实现：

清单6.监听程序

package com.corejsf;   import java.io.Serializable;  import java.util.ArrayList;  import java.util.List;  import java.util.Map;   import javax.enterprise.context.SessionScoped;  import javax.faces.component.UIInput;  import javax.faces.component.UISelectItems;  import javax.faces.component.UISelectOne;  import javax.faces.context.FacesContext;  import javax.faces.event.ValueChangeEvent;  import javax.inject.Named;   @Named  @SessionScoped  public class AutocompleteListener implements Serializable {     private static String COMPLETION_ITEMS_ATTR = "corejsf.completionItems";         public void valueChanged(ValueChangeEvent e) {        UIInput input = (UIInput)e.getSource();        UISelectOne listbox = (UISelectOne)input.findComponent("listbox");         if (listbox != null) {           UISelectItems items = (UISelectItems)listbox.getChildren().get(0);           Map attrs = listbox.getAttributes();           List newItems = getNewItems((String)input.getValue(),              getCompletionItems(listbox, items, attrs));            items.setValue(newItems.toArray());           setListboxStyle(newItems.size(), attrs);        }     }         public void completionItemSelected(ValueChangeEvent e) {       UISelectOne listbox = (UISelectOne)e.getSource();       UIInput input = (UIInput)listbox.findComponent("input");             if(input != null) {          input.setValue(listbox.getValue());       }       Map attrs = listbox.getAttributes();       attrs.put("style", "display: none");     }          private List getNewItems(String inputValue, String[] completionItems) {        List newnewItems = new ArrayList();              for (String item : completionItems) {           String s = item.substring(0, inputValue.length());           if (s.equalsIgnoreCase(inputValue))             newItems.add(item);        }              return newItems;     }         private void setListboxStyle(int rows, Map attrs) {        if (rows > 0) {           Map reqParams = FacesContext.getCurrentInstance()              .getExternalContext().getRequestParameterMap();                   attrs.put("style", "display: inline; position: absolute; left: "               + reqParams.get("x") + "px;" + " top: " + reqParams.get("y") + "px");            attrs.put("size", rows == 1 ? 2 : rows);        }        else           attrs.put("style", "display: none;");     }      private String[] getCompletionItems(UISelectOne listbox,        UISelectItems items, Map attrs) {           Strings] completionItems = (String[])attrs.get(COMPLETION_ITEMS_ATTR);                 if (completionItems == null) {              completionItems = (String[])items.getValue();              attrs.put(COMPLETION_ITEMS_ATTR, completionItems);           }        return completionItems;     }  }

JSF在Ajax调用期间调用监听程序的valueChanged()方法来响应文本输入中的keyup事件。该方法会创建一组新的完成项目，然后将列表框的项目设置为这个新的项目集。该方法还会设置列表框的样式属性，以确定Ajax调用返回时是否显示列表框。

清单6中的setListboxStyle()方法将使用x和y请求我在发起清单5中的Ajax调用时指定的参数值。

JSF会在Ajax调用期间调用监听程序的其他公共方法completionItemSelected()，以响应列表框中的选择事件。该方法会将列表框的值复制到文本输入中，并隐藏列表框。

请注意，valueChanged()方法还会将原始完成项目存储在列表框的某个属性中。由于每个autoComplete组件都维护自己的完成项目列表，因此多个autoComplete组件可以在相同页面中和谐共存，而不会影响彼此的完成项目。

使用GlassFish和Eclipse运行示例

本系列中的代码适合在JEE6容器中运行，比如GlassFish或Resin。您可以通过调整让它们适应servlet容器，但这并非理想方案。因此，我的目标是侧重于充分发挥JSF2和JEE6的潜力，而不是配置问题。我仍然坚持使用GlassFishv3。

在本文的其余部分，我将向您展示如何使用GlassFishv3和Eclipse来运行本文的示例代码。此处的说明还适用于本系列其他文章的代码。（我将使用Eclipse3.4.1，因此最好是使用与之相近的版本。）

图5展示了本文代码的目录结构。其中的autoComplete目录包含应用程序和一个空的Eclipse工作空间目录。

图5.本文下载部分的源代码

现在，您已经下载了代码，接下来就可以运行它了。首先，您需要GlassFishEclipse插件，可从https://glassfishplugins.dev.java.net下载它，如图6所示：

图6.GlassFishEclipse插件

请依照插件的安装说明操作。

要安装本文的代码，请在Eclipse中创建一个DynamicWeb项目。为此，可以通过File>New菜单来实现：如果未看到DynamicWebProject，那么请选择Other，并在接下来的对话框中打开Web文件夹并选择DynamicWebProject，如图7所示：

 图7.创建一个DynamicWeb项目

下一步是配置项目。在NewDynamicWebProject向导的第一个页面中做出以下选择，如图8所示：

1.在Projectcontents下，保留Usedefault框为未选中状态。在Directory字段中，输入（或浏览到）示例代码的autoComplete目录。

2.对于TargetRuntime，请选择GlassFishv3JavaEE6。

3.对于DynamicWebModuleversion，请输入2.5。

4.对于Configuration，请选择DefaultConfigurationforGlassFishv3JavaEE6。

5.在EARMembership下，保留AddprojecttoanEAR框为未选中状态，并在EARProjectName:字段中输入autoCompleteEAR。

 图8.配置应用程序，步骤1

单击Next，然后输入如图9所示的值：

1.对于ContextRoot:，输入autoComplete。

2.对于ContentDirectory:，输入web。

3.对于JavaSourceDirectory:，输入src/java。保留Generatedeploymentdescriptor框为未选中状态。

 图9.配置应用程序，步骤2

现在，您应该已经建立了一个autoComplete项目，它将显示在Eclipse的ProjectExplorer视图中，如图10所示：

 图10.autoComplete项目

现在，选择项目，右键单击它并选择RunonServer，如图11所示：

图11.使用Eclipse在服务器上运行

从RunOnServer对话框的服务器列表中选择GlassFishv3JavaEE6，如图12所示：

图12.选择GlassFish

单击Finish。Eclipse应该会相继启动GlassFish和autoComplete应用程序，如图13所示：

 13.在Eclipse中运行

借助JSF2，开发人员可以轻松地创建功能强大、支持Ajax的自定义组件。您不需要在XML中实现基于Java的组件或呈现器，或者集成第三方JavaScript来发起Ajax调用。借助JSF2，您只需要使用几乎与任何JSF2facelet视图相同的标记来创建一个复合组件，并根据需求添加一些JavaScript或Java代码，以及voilà—您将实现一个奇妙自定义组件，为应用程序用户提供极为方便的数据输入功能。

以上就是如何通过JSF 2实现可重用的Ajax化组件，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

本文题目：如何通过JSF2实现可重用的Ajax化组件
URL标题：http://bjjierui.cn/article/jcdsop.html