起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 10794|回复: 14

简单组件开发完整案例

  [复制链接]

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
发表于 2011-12-21 15:44:58 | 显示全部楼层 |阅读模式
下面介绍一个比较简单的组件的开发过程。
要开发的组件是高度可调整的文本框(resizeTextarea)。这个组件由一个文本框和两个按钮组成。比文本框组件多实现的功能是用鼠标点击按钮,这个文本框的高度发生相应变化。
组件开发分为两个部分,一是运行时组件开发,开发的是在浏览器中运行的效果;二是设计时组件开发,可以实现在w文件中,从组件面板中拖拽组件到设计器中。
组件相关的文档结构如下:

dir.png

14.07 KB, 下载次数: 1916

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2011-12-21 15:50:53 | 显示全部楼层

运行时组件开发

1、组件运行时效果

run.png

56.66 KB, 下载次数: 1670

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2011-12-21 15:54:07 | 显示全部楼层

运行时组件开发

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]

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2011-12-21 15:55:25 | 显示全部楼层

运行时组件开发

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

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

  1. justep.resizeTextarea = function(xblObject) {
  2.         this._create(xblObject);
  3. };

  4. justep.resizeTextarea.prototype = {
  5.         _create : function(xblObject){
  6.                 if(!xblObject) return;
  7.                 this.textareaId = xblObject.__getAttributeValue('textarea-id');
  8.         },       

  9.         higher : function() {
  10.                 var m = this.textareaId;
  11.                 var h = parseFloat(justep.xbl(m).input.style.height) + 50;
  12.                 justep.xbl(m).input.style.height = h + "px";
  13.         },
  14.         lower : function() {
  15.                 var m = this.textareaId;
  16.                 var h = parseFloat(justep.xbl(m).input.style.height) - 50;
  17.                 $("#"+m)[0].style.height = h + "px";
  18.                 justep.xbl(m).input.style.height = h + "px";
  19.         }
  20. };

复制代码


5、说明

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

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2011-12-21 15:58:30 | 显示全部楼层

设计时组件开发

1、组件设计时效果

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

design.png

21.24 KB, 下载次数: 1444

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2011-12-21 15:59:52 | 显示全部楼层

设计时组件开发

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]

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2011-12-21 16:01:30 | 显示全部楼层

设计时组件开发

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. justep.design.resizeTextarea = function(config){
  2.         this.regAttributes(["disabled","readonly"]);
  3.         justep.design.resizeTextarea.superclass.constructor.call(this,config);
  4. }

  5. justep.extend(justep.design.resizeTextarea, justep.design.Component,{
  6.          paintContent:function(xmlNode){  
  7.             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);
  8.         }
  9. });
复制代码


6、说明

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

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2011-12-21 16:03:48 | 显示全部楼层
完整案例代码

x5demo.rar

3.59 KB, 下载次数: 954

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2011-12-21 16:34:04 | 显示全部楼层

给组件增加事件的方法

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]

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
 楼主| 发表于 2011-12-21 16:38:57 | 显示全部楼层
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]
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-28 17:44 , Processed in 0.074639 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表