首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

复合组件最佳实践(3)

复合组件最佳实践(3)

将组件封装在一个 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 调用返回时更新文本和文本消息。
返回列表