复合组件最佳实践（2）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-9-20 19:05 | 只看该作者

复合组件最佳实践（2）

组件的实现可编辑输入组件是在 resources/util 目录下的 inputEditable.js、inputEditable.properties 和 inputEditable.xhtml 文件中实现的，如中的文件系统层次结构所示：
图 2. 组件的文件

显示的是 inputEditable.xhtml：
清单 3. inputEditable 组件的标记（inputEditable.xhtml）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:composite="http://java.sun.com/jsf/composite">

<composite:interface>
   <composite:attribute name="text"/>
   <composite:editableValueHolder name="text" targets="editableText" />
   <composite:actionSource name="editButton" targets="editButton" />
   <composite:actionSource name="doneButton" targets="doneButton" />
   <composite:clientBehavior name="edit" event="action" targets="editButton"/>
   <composite:clientBehavior name="done" event="action" targets="doneButton"/>
   <composite:facet name="textMessage"/>
</composite:interface>

<composite:implementation>
   <h

utputScript library="javascript" name="prototype.js" target="head"/>
<h

utputScript library="javascript" name="scriptaculous.js" target="head"/>
<h

utputScript library="javascript" name="effects.js" target="head"/>
<h

utputScript library="util" name="inputEditable.js" target="head"/>

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

utputText id="text" value="#{cc.attrs.text}"/>
      <h:commandButton id="editButton" type="button"
         value="#{cc.resourceBundleMap.editButtonText}"
         onclick="this.startEditing()"/>

      <h:inputText id="editableText" value="#{cc.attrs.text}" style="display: none"/>

      <h:commandButton id="doneButton"
         value="#{cc.resourceBundleMap.doneButtonText}" style="display: none">

         <f:ajax render="text textMessage" execute="editableText"
            onevent="ajaxExecuting"/>

      </h:commandButton>

      <h:panelGroup id="textMessage">
         <composite:renderFacet name="textMessage"/>
      </h:panelGroup>
   </div>

   <script> com.clarity.init('#{cc.clientId}'); </script>

</composite:implementation>
</html>

该标记创建了 4 个组件，最初只有两个 — 文本和编辑按钮 — 是可见的。当用户单击 edit 按钮时，应用程序调用 com.clarity.startEditing() JavaScript 函数，其实现如所示：
清单 4. inputEditable 组件的 JavaScript 函数（inputEditable.js）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

package com.corejsf;
var com = {};

if (!com.clarity) {
com.clarity = {
   init: function (ccid) {
      var mydiv = document.getElementById(ccid);
      mydiv.editButton = $(mydiv.id + ':editButton');
      mydiv.text = $(mydiv.id + ':text');
      mydiv.editableText = $(mydiv.id + ':editableText');
      mydiv.doneButton = $(mydiv.id + ':doneButton');
      mydiv.doneButton.offsetLeft = mydiv.editButton.offsetLeft;

      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);
      };
   },

   toggleDisplay: function(element) {
      element.style.display = element.style.display == "none" ? "" : "none";
   },

   ajaxExecuting: function(data) {
      var mydiv = $(data.source.parentNode);

      if (data.status == 'complete') {
         toggleDisplay(mydiv.editableText);
         toggleDisplay(mydiv.doneButton);
         toggleDisplay(mydiv.text);
         toggleDisplay(mydiv.editButton);
      }
   }
}
}

startEditing() 函数使用源自 Scriptaculous 框架的 fade() 和 appear() 方法（见）。它也使用了一对计时器来确保以正确的次序淡入淡出。注意 startEditing() 函数最终也给了文本输入焦点。
显示了 inputEditable.properties：
清单 5 inputEditable 组件的属性文件（inputEditable.properties）

1 2	editButtonText=edit... doneButtonText=done

接下来，我将从 5 个最佳实践的角度来讨论可编辑输入的实现。

收藏分享评分

回复引用

订阅 TOP

返回列表