复合组件最佳实践（3）

look_w

将组件封装在一个 DIV 中JFS 在创建一个复合组件时，它创建了一个框架称之为命名容器 的组件，这包括复合组件中的所有组件。这个命名容器不能生成标记；相反，JFS 为复合组件中的每一个组件生成标记。结果是页面标记不能通过其组件 ID 将组件作为一个整体引用，因为默认情况下没有带有此 ID 的组件。  
您可以为页面创建者提供引用复合组件的能力，在您执行该组件时将其封装在一个 DIV 中。比如，假设您想要页面标记来引用一个可编辑的输入组件作为一个 Ajax 调用的一部分。在下列标记中，我将添加一个 Ajax 按钮来处理名字的输入。单击按钮使 Ajax 对服务器进行调用，其中名字输入已被处理；Ajax 调用返回时，JFS 呈现输入内容：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<h:form>       <h:panelGrid columns="2">       First name:       <util:inputEditable id="firstName"                        value="#{user.firstName}"/>                       Last name:       <util:inputEditable id="lastName"                        value="#{user.lastName}"/>       <h:commandButton value="Update first name">          <f:ajax execute="firstName" render="firstName">       </h:commandButton>   </h:panelGrid> </h:form>

前面标记中的 Ajax 按钮正常工作，因为在  中我将组件封装在一个 DIV 中：

1 2 3 4 5

<div id="#{cc.clientId}">    ... </div>

用于 DIV 的标识符是复合组件自身的客户端标识符。因此，页面创建者可以将复合组件作为一个整体引用，和我之前讨论的 Ajax 按钮一样。
合并 JavaScript 和 Ajax在本文的静态截图中，您看不到当用户单击 edit... 按钮时可编辑输入组件执行的淡出动画。淡出是由 Scriptaculous 框架最后完成的。在  中，我使用 <hutputScript> 标记输出 Scriptaculous 所需的 JavaScript，在 中，我使用框架的 fade() 和 appear() 方法来完成想要的动画效果：

1 2 3 4 5 6 7 8 9 10 11 12 13

mydiv.editButton.startEditing = function() {   mydiv.text.fade( { duration: 0.25 } );   mydiv.editButton.fade( { duration: 0.25 } );          window.setTimeout( function() {      mydiv.editableText.appear( { duration: 0.25 } );      mydiv.doneButton.appear( { duration: 0.25 } );              window.setTimeout( function() {          mydiv.editableText.focus();       }, 300);    }, 300); };

在前面的 JavaScript 中嵌套的计时器确保动画中的一切按部就班地出现。例如，我会推迟将输入文本设为焦点直至我确定输入出现在屏幕上；否则，我将在输入显示之前调用 focus()，调用将不起作用。  
通过 JFS 使用第三方 JavaScript 框架（比如 Scriptaculous 或 jQuery）很容易。您可以在页面输出适当的 JavaScript，然后在您的 JavaScript 中使用该框架。
用户单击 done 按钮时，可编辑输入组件也可使用 Ajax 对服务器进行调用：

1 2 3 4 5 6 7

<h:commandButton id="doneButton"    value="#{cc.resourceBundleMap.doneButtonText}" style="display: none">                <f:ajax render="text textMessage" execute="editableText"       onevent="ajaxExecuting"/>              </h:commandButton>

在上述标记中，当用户单击 done 按钮时，我使用 JSF 的 <f:ajax> 标记来进行一次 Ajax 调用。此 Ajax 调用在服务端执行文本输入，当 Ajax 调用返回时更新文本和文本消息。