JSF 2 fu: Ajax 组件

核心提示： 清单 4 的实现部分完成了三项任务，首先，JSF 2 fu: Ajax 组件(6)，该组件发起 Ajax 调用以响应文本输入中的 keyup 事件，并通过分配给文本输入中的 keyup 和 blur 事件的 JavaScript 函数在文本输入失焦时隐藏列表框，JSF 会调用服务器上的文本输入的

清单 4 的实现部分完成了三项任务。首先，该组件发起 Ajax 调用以响应文本输入中的 keyup 事件，并通过分配给文本输入中的 keyup 和 blur 事件的 JavaScript 函数在文本输入失焦时隐藏列表框。

其实，该组件通过 JSF 2 的 <f:ajax> 标记来发起 Ajax 调用来响应列表框中的 change 事件。当用户从列表框中进行选择时，JSF 会向服务器发起一个 Ajax 调用，并在 Ajax 调用返回时更新文本输入的值。

在 <div> 中封装复合组件

清单 4 中的复合组件通过复合组件的客户机标识符将其实现封装在 <div> 中。 这样，其他组件便可通过其客户机 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'　
　　　}　
　　}　
}