简单组件开发完整案例

zhaixin

下面介绍一个比较简单的组件的开发过程。
要开发的组件是高度可调整的文本框（resizeTextarea）。这个组件由一个文本框和两个按钮组成。比文本框组件多实现的功能是用鼠标点击按钮，这个文本框的高度发生相应变化。
组件开发分为两个部分，一是运行时组件开发，开发的是在浏览器中运行的效果；二是设计时组件开发，可以实现在w文件中，从组件面板中拖拽组件到设计器中。
组件相关的文档结构如下：

zhaixin

1、组件运行时效果

zhaixin

2、建立组件目录UI/x5demo/components/resizeTextarea

在我们的应用下建立components目录，专门用来存放自己开发的组件，在components目录下建立组件目录，用来存放组件的相关文件。

3、建立组件描述文件UI/x5demo/components/resizeTextarea.xbl.xml

这个文件是必须有的，它描述了组件的摸样，定义了组件的方法。下面是一个空的组件描述文件。
[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:binding id="resizeTextarea">
                <xbl:template template-type="xslt">
                        <xsl:template match="/*" xmlns:xforms="http://www.justep.com/xforms">
                                <root>
                                </root>
                        </xsl:template>       
                </xbl:template>
                <xbl:implementation>
                </xbl:implementation>
        </xbl:binding>
</xbl:xbl>       
[/PHP]
完整代码如下
[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">      
        <!--增加js文件的引用-->
        <xbl:script type="text/javascript"
                src="/UI/x5demo/components/resizeTextarea/resizeTextarea.js" />
       
        <xbl:binding id="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>
<!--加html标签或X5平台组件，放了一个文本框和两个按钮，实现组件在浏览器中的运行效果-->
                                        <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>
                <!—-定义组件的方法，其中initXBL是默认方法，系统初始化组件时会自动调用-->
                <![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

4、建立组件js文件UI/x5demo/components/resizeTextarea/resizeTextarea.js

在resizeTextarea.xbl.xml中引用，实现resizeTextarea.xbl.xml中调用的3个函数，完整代码如下

1. 
   
2. justep.resizeTextarea = function(xblObject) {
   
3.         this._create(xblObject);
   
4. };
   
5. 
   
6. justep.resizeTextarea.prototype = {
   
7.         _create : function(xblObject){
   
8.                 if(!xblObject) return;
   
9.                 this.textareaId = xblObject.__getAttributeValue('textarea-id');
   
10.         },       
    
11. 
    
12.         higher : function() {
    
13.                 var m = this.textareaId;
    
14.                 var h = parseFloat(justep.xbl(m).input.style.height) + 50;
    
15.                 justep.xbl(m).input.style.height = h + "px";
    
16.         },
    
17.         lower : function() {
    
18.                 var m = this.textareaId;
    
19.                 var h = parseFloat(justep.xbl(m).input.style.height) - 50;
    
20.                 $("#"+m)[0].style.height = h + "px";
    
21.                 justep.xbl(m).input.style.height = h + "px";
    
22.         }
    
23. };
    
24. 
    

复制代码

5、说明

组件有两种实现方式：xslt和java方式，本例使用了xslt方式
在resizeTextarea.xbl.xml中组件的属性，可通过@属性名直接访问，例如@ref

zhaixin

1、组件设计时效果

为了让大家看出，设计时组件和运行时组件的区别，特将设计时组件的效果和运行时组件的效果设计的略有不同。

zhaixin

2、准备工作

打开studio\dropins\studio-app\config\config.xml文件，将debug-designer-component节点的值改为true，这样修改组件后，重新打开w文件，修改效果就会生效。

3、建立组件注册文件UI/x5demo/components/designerComponentReg.xml，并注册该文件

在components目录下建立designerComponentReg.xml文件，配置好后，组件会在组件面板中显示出来。也可以复制/UI/system/components/designerComponentReg.xml文件到UI/x5demo/components目录下，修改其内容。完整代码如下。

[PHP]
<?xml version="1.0" encoding="UTF-8"?>
<reg-info>
        <!-- 组件目录注册  -->
        <component-dirs>
                resizeTextarea
        </component-dirs>
        <!-- 组件工具箱配置 -->
        <toolbox>
                <catalog name="formControl" text="自定义" design-view="excel">
                        <item component-name="resizeTextarea"/>
                </catalog>               
        </toolbox>
</reg-info>

[/PHP]

在UI/x5demo/config目录下，建立studio.xml文件，也可以复制/UI/system/config/studio.xml文件到UI/x5demo/config目录下，修改其内容, 完整代码如下。

[PHP]

<?xml version="1.0" encoding="utf-8"?>
<config>
        <component-reg-file>../../components/designerComponentReg.xml</component-reg-file>
</config>
[/PHP]

zhaixin

4、建立组件配置文件UI/x5demo/components/resizeTextarea/designer/resizeTextarea.xml
这里定义了组件的描述、在组件面板中显示的图标；定义了组件的属性、事件、及模板代码。完整代码如下
[PHP]
<?xml version="1.0" encoding="UTF-8"?>
<elements>
        <!—-配置组件的基本信息 -->
        <element name="resizeTextarea" tag-type="rich" tag-name="div" text="高度可调整的文本框"
icon="textarea.gif" namespace="xhtml" namespace-uri="http://www.w3.org/1999/xhtml"
                binding-component="/UI/x5demo/components/resizeTextarea.xbl.xml#resizeTextarea"
                display-property="id" component-class="resizeTextarea" component-type="formControl">

                <!—-配置组件的属性 -->
                <properties>
                        <property name="id" text="编号" required="true" />
                        <property name="ref" text="引用" editor-ref="dataRef" required="true"/>       
                </properties>
               
                <!—-模板代码，配置写入w文件的组件代码 -->
                <templates>
                        <template name="default"><![CDATA[
                                <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"
component="/UI/x5demo/components/resizeTextarea.xbl.xml#resizeTextarea"/>
                   ]]></template>
                </templates>
        </element>
</elements>

[/PHP]

5、建立组件设计时js文件UI/x5demo/components/resizeTextarea/designer/resizeTextarea.js
这里定义了组件在设计器中的显示效果，完整代码如下

1. 
   
2. justep.design.resizeTextarea = function(config){
   
3.         this.regAttributes(["disabled","readonly"]);
   
4.         justep.design.resizeTextarea.superclass.constructor.call(this,config);
   
5. }
   
6. 
   
7. justep.extend(justep.design.resizeTextarea, justep.design.Component,{
   
8.          paintContent:function(xmlNode){  
   
9.             this.createElement("<table id='"+this.id+"' border='1'><tr><td><textarea style='height:100px;width:200px' class='xui-textarea' readonly='true'/></td><td><button>变高</button><br><button>变矮</button></td></tr></table>",xmlNode);
   
10.         }
    
11. });
    

复制代码

6、说明

本例展示了组件运行时和设计时的界面设计
本例展示了组件的属性、方法，没有涉及到组件的事件，

zhaixin

完整案例代码

zhaixin

1、修改组件配置文件，增加事件定义
打开UI/x5demo/components/resizeTextarea/designer/resizeTextarea.xml，修改如下，增加events节点

[PHP]
<?xml version="1.0" encoding="UTF-8"?>
<elements>
        <!—-配置组件的基本信息 -->
        <element name="resizeTextarea" tag-type="rich" tag-name="div" text="高度可调整的文本框"
icon="textarea.gif" namespace="xhtml" namespace-uri="http://www.w3.org/1999/xhtml"
                binding-component="/UI/x5demo/components/resizeTextarea.xbl.xml#resizeTextarea"
                display-property="id" component-class="resizeTextarea" component-type="formControl">

                <!—-配置组件的属性 -->
                <properties>
                        <property name="id" text="编号" required="true" />
                        <property name="ref" text="引用" editor-ref="dataRef" required="true"/>       
                </properties>
                <!—-配置组件的事件 -->
                <events>  
                        <event name="onAfterChange"  text="改变之后"/>
                </events>
                <!—-模板代码，配置写入w文件的组件代码 -->
                <templates>
                        <template name="default"><![CDATA[
                                <xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml"
component="/UI/x5demo/components/resizeTextarea.xbl.xml#resizeTextarea"/>
                   ]]></template>
                </templates>
        </element>
</elements>
[/PHP]

zhaixin

2、修改组件js文件，增加对组件事件的调用
打开UI/x5demo/components/resizeTextarea/resizeTextarea.js，修改两个地方。一是初始化组件时，将用户定义的事件关联到组件上；二是在适当的地方调用组件事件

[PHP]
justep.resizeTextarea = function(xblObject) {
        this._create(xblObject);
};

justep.resizeTextarea.prototype = {
        _create : function(xblObject){
                if(!xblObject) return;
                this.textareaId = xblObject.__getAttributeValue('textarea-id');
               
                this.onAfterChange = xblObject.domNode.getAttribute('onAfterChange');
                if (this.onAfterChange)
                        this.onAfterChange = justep.Function.get(this.onAfterChange);
                else
                        this.onAfterChange = null;

        },       

        higher : function() {
                var m = this.textareaId;
                var h = parseFloat(justep.xbl(m).input.style.height) + 50;
                justep.xbl(m).input.style.height = h + "px";
                var ret = true;
                if (this.onAfterChange)
                        ret = this.onAfterChange({
                                'source' : this
                        });

        },
        lower : function() {
                var m = this.textareaId;
                var h = parseFloat(justep.xbl(m).input.style.height) - 50;
                $("#"+m)[0].style.height = h + "px";
                justep.xbl(m).input.style.height = h + "px";
        }
};[/PHP]