简单组件开发完整案例

zhaixin

运行时组件开发有两种方式，一是xslt方式，如上所述；二是java方式。现在我们将上面用xslt方式开发的组件改为java方式。

1、Java方式说明
Java方式是将w文件中组件的定义部分，作为参数，传入Java方法，在Java方法中，把传入的这段代码改为界面的实现效果返回。

w文件中组件的定义如下
[PHP]
<xhtml:div component="/UI/x5demo/components/resizeTextarea.xbl.xml#resizeTextarea"
      id="resizeTextarea1" ref="data('bizData1')/fString"
onAfterChange="excel.resizeTextarea1AfterChange"/>  
[/PHP]

经过java方法处理后，返回如下代码。注意返回的代码其实就是上面讲过的组件描述文件UI/x5demo/components/resizeTextarea.xbl.xml中的root节点下的部分。

[PHP]
<root>
        <xhtml:span xmlns:xhtml="http://www.w3.org/1999/xhtml" style="display:none"
xblid="attribute" id="resizeTextarea1" ref="data('bizData1')/fString"
textarea-id="_textarea_resizeTextarea1"
                onAfterChange="excel.resizeTextarea1AfterChange"/>
<xforms:textarea xmlns:xforms="http://www.justep.com/xforms" style="float:left"
id="_textarea_resizeTextarea1" ref="data('bizData1')/fString"/>
        <xforms:trigger xmlns:xforms="http://www.justep.com/xforms" id="tr1" style="float:top">
                <xforms:label>变高</xforms:label>
                <xforms:action xmlns:ev="http://www.w3.org/2001/xml-events" ev:event="DOMActivate">
                        <xforms:script>
<![CDATA[justep.XBLObject.getXBLObject(event.target).higher();]]>
</xforms:script>
                </xforms:action>
        </xforms:trigger>
        <xforms:trigger xmlns:xforms="http://www.justep.com/xforms" id="tr2" style="float:left">
                <xforms:label>变矮</xforms:label>
                <xforms:action xmlns:ev="http://www.w3.org/2001/xml-events" ev:event="DOMActivate">
                        <xforms:script>
<![CDATA[justep.XBLObject.getXBLObject(event.target).lower();]]>
</xforms:script>
                </xforms:action>
        </xforms:trigger>
</root>
[/PHP]

组件的事件和方法，还是使用js实现

zhaixin

2、修改组件描述文件UI/x5demo/components/resizeTextarea.xbl.xml
将xbl:template节点的内容封上
<xbl:template template-type="xslt"></xbl:template>

改为<template template-type="java"  src="ResizeTextarea" />

完整代码如下

[PHP]
<?xml version="1.0" encoding="UTF-8"?>
<xbl:xbl xmlns="http://www.w3.org/ns/xbl"
        xmlns:xbl="http://www.w3.org/ns/xbl"
        xmlns:xhtml="http://www.w3.org/1999/xhtml"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xsl:version="2.0"
        xmlns:xs="http://www.w3.org/2001/XMLSchema"
        xmlns:xforms="http://www.justep.com/xforms"
        xmlns:ev="http://www.w3.org/2001/xml-events"
        script-type="text/javascript">      
        <xbl:script type="text/javascript"
                src="/UI/x5demo/components/resizeTextarea/resizeTextarea.js" />
                <!--增加js文件的引用        -->
        <xbl:binding id="resizeTextarea">
                <template template-type="java"  src="ResizeTextarea" />
                <!--<xbl:template template-type="xslt">
                        <xsl:template match="/*" xmlns:xforms="http://www.justep.com/xforms">
                                <xsl:variable name="id" select="if(@id) then @id else generate-global-id()" />
                                <xsl:variable name="textarea-id" select="concat('_textarea_',$id)" />
                                <root>
                                        <xhtml:span xblid="attribute"
                                                                xbl-obj-id="{$id}"
                                                                textarea-id="{$textarea-id}"
                                                                style="display:none"/>
                                        <xforms:textarea id="{$textarea-id}" style="float:left">
                                                <xsl:if test="@ref!=''">
                                                        <xsl:attribute name="ref" select="@ref"/>
                                                </xsl:if>
                                        </xforms:textarea>
                                        <xforms:trigger id="tr1" style="float:top">
                                                <xforms:label>变高</xforms:label>
                                                <xforms:action ev:event="DOMActivate">
                                                        <xforms:script>
                                                        <![CDATA[justep.XBLObject.getXBLObject(event.target).higher();]]>
                                                        </xforms:script>
                                                </xforms:action>
                                        </xforms:trigger>
                                        <xforms:trigger id="tr2">
                                                <xforms:label>变矮</xforms:label>
                                                <xforms:action ev:event="DOMActivate">
                                                        <xforms:script>
                                                        <![CDATA[justep.XBLObject.getXBLObject(event.target).lower();]]>
                                                        </xforms:script>
                                                </xforms:action>
                                        </xforms:trigger>
                                </root>
                        </xsl:template>       
                </xbl:template>-->
               
                <xbl:implementation>
                <![CDATA[
                ({
                        "initXBL" : function() {
                            this.__attribute_node = this.getElementByXblID('attribute');
                                justep.Object.extend(this, new justep.resizeTextarea(this));
                        },
                        "__getAttributeValue" : function(name){
                                return this.__attribute_node?this.__attribute_node.getAttribute(name):'';
                        }
                })
                ]]></xbl:implementation>
        </xbl:binding>
</xbl:xbl>       
[/PHP]

zhaixin

3、建立Java文件/UI/x5demo/components/resizeTextarea/dsrc/ResizeTextarea.java
在/UI/x5demo/components/resizeTextarea目录下新建dsrc目录，新建ResizeTextarea.java文件。在java文件中，通过实现com.justep.xbl.JavaTemplate的execute方法，获取传入的参数，生成界面组件代码。

完整代码如下

1. 
   
2. import java.util.Map;
   
3. import org.dom4j.DocumentHelper;
   
4. import org.dom4j.Element;
   
5. import org.dom4j.QName;
   
6. import com.justep.components.Utils;
   
7. import com.justep.xbl.JavaTemplate;
   
8. import com.justep.xbl.runtime.XBLException;
   
9. 
   
10. public class ResizeTextarea implements JavaTemplate{
    
11.         private String id;
    
12.         private String ref;
    
13.         private String textareaId;
    
14.         private String onAfterChange;
    
15.         public Element execute(Element bound, Map context) throws XBLException {
    
16. /* 在这里实现从传入的参数bound中获取组件的信息，生成一个span、一个文本框和两个按钮 */
    
17.                 this.init(bound);
    
18.                 Element root = DocumentHelper.createElement(new QName("root"));
    
19.                 root.add(createXBLAttribute());
    
20.                 root.add(createTextarea(this.textareaId,this.ref));
    
21.                 root.add(createTrigger("tr1","变高","float:top","higher"));
    
22.                 root.add(createTrigger("tr2","变矮","float:left","lower"));
    
23. /* 可以在这里使用控制台输出看到返回的结果
    
24. System.out.println(root.asXML()). */
    
25.                 return root;
    
26.         }
    
27.        
    
28.         private void init(Element bound) throws XBLException {
    
29.                 this.id = Utils.getAttributeOfReuired(bound, "id");
    
30.                 this.ref = Utils.getAttributeOfReuired(bound, "ref");
    
31.                 this.textareaId = "_textarea_" + this.id;
    
32.                 this.onAfterChange = bound.attributeValue("onAfterChange");
    
33.         }
    
34. 
    
35.         private Element createXBLAttribute() {
    
36.                 Element e = Utils.createXBLAttribute();
    
37.                 e.addAttribute("id", this.id);
    
38.                 e.addAttribute("ref", this.ref);
    
39.                 e.addAttribute("textarea-id",this.textareaId);
    
40.                 e.addAttribute("onAfterChange", this.onAfterChange);
    
41.                 return e;
    
42.         }
    
43.        
    
44.         private Element createTextarea(String id,String ref) {
    
45.                 Element e = DocumentHelper.createElement(new QName("textarea", Utils.XFORMS_NAMESPACE));
    
46.                 e.addAttribute("id", id);
    
47.                 e.addAttribute("style", "float:left");
    
48.                 if (!Utils.isStringEmpty(ref))
    
49.                         e.addAttribute("ref", ref);
    
50.                 return e;
    
51.         }
    
52. 
    
53.         private Element createTrigger(String id,String label,String style,String funcName) {
    
54.                 Element trigger = DocumentHelper.createElement(new QName("trigger", Utils.XFORMS_NAMESPACE));
    
55.                 trigger.addAttribute("id", id);
    
56.                 trigger.addAttribute("style", style);
    
57. 
    
58.                 Element labelElement = trigger.addElement(new QName("label", Utils.XFORMS_NAMESPACE));
    
59.                 if (!Utils.isStringEmpty(label))
    
60.                         labelElement.setText(label);
    
61. 
    
62.                 Element action = Utils.createScriptAction(
    
63.                                 "DOMActivate",
    
64.                                 null,
    
65.                                 "justep.XBLObject.getXBLObject(event.target)."+funcName+"();");
    
66.                 trigger.add(action);
    
67.                 return trigger;
    
68.         }
    
69. }
    

复制代码

zhaixin

4、建立资源引用文件/UI/x5demo/components/resizeTextarea/model.config.xml
由于在上面的java文件中引用了一些系统提供的Java类，因此需要增加模型资源的引用。在/UI/x5demo/components/resizeTextarea目录下，新建model.config.xml文件。

完整代码如下

[PHP]
<?xml version="1.0" encoding="utf-8"?>
<model xmlns="http://www.justep.com/model">
        <use>/UI/system/components/data</use>
        <use>/UI/system/components/common</use>
</model>
[/PHP]

zhaixin

简单组件开发案例介绍完了。

总结一下：组件开发分为运行时和设计时两部分的开发。前者用于运行时的效果，后者用于设计器中的效果。运行时组件开发又分为xslt方式和java方式两种，根据需要选择两种方式中的一种。

另外，开发的新组件中的每个组件的id，不能使用固定值，这样会导致在界面上放两个新组件时，发生id重复的问题。在本例中为了降低代码复杂度，两个按钮的id都使用了固定值，在实际使用时必须修改为类似文本框id的定义方式，特此说明。