简单组件开发完整案例

zhaixin · 发表于 2012-11-20 15:09:35

下面介绍一个比较简单的组件的开发过程。

要开发的组件是高度可调整的文本框（resizeTextarea）。这个组件由一个文本框和两个按钮组成。比文本框组件多实现的功能是用鼠标点击按钮，这个文本框的高度发生相应变化。

组件开发分为两个部分，
一是运行时组件开发，开发的是在浏览器中运行的效果；
二是设计时组件开发，可以实现在w文件中，从组件面板中拖拽组件到设计器中。

本例介绍了组件运行时和设计时的界面设计、介绍了组件的属性、方法，事件的定义及使用方法，

组件相关的文档结构如下：

zhaixin · 发表于 2012-11-20 15:25:43

组件运行时效果

组件有两种实现方式：xslt和java方式

一、Xslt方式

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

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

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

这个文件是必须有的，它描述了组件的摸样，定义了组件的方法。下面是一个空的组件描述文件。

<?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>

复制代码

完整代码如下

<?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" />
<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>
<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>

复制代码

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

在resizeTextarea.xbl.xml中引用，实现resizeTextarea.xbl.xml中调用的3个函数。其中包括了调用组件事件。完整代码如下

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";
}
};

复制代码

4、说明

在resizeTextarea.xbl.xml中组件的属性，可通过@属性名直接访问，例如@ref

zhaixin · 发表于 2012-11-20 15:35:19

二、Java方式

我们将上面用xslt方式开发的组件改为java方式。

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

w文件中组件的定义如下

<font size="3"><xhtml:div component="/UI/x5demo/components/resizeTextarea.xbl.xml#resizeTextarea"
id="resizeTextarea1" ref="data('bizData1')/fString"
onAfterChange="excel.resizeTextarea1AfterChange"/>
</font>

复制代码

经过java方法处理后，返回如下代码

<font size="3"><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>
</font>

复制代码

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

2、修改组件描述文件UI/x5demo/components/resizeTextarea.xbl.xml

将xbl:template节点的内容封上
<xbl:template template-type="xslt"></xbl:template>

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

完整代码如下

<font size="3"><?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" />
<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>
</font>

复制代码

zhaixin · 发表于 2012-11-20 16:12:48

3、建立Java文件/UI/x5demo/components/resizeTextarea/dsrc/ResizeTextarea.java

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

完整代码如下

import java.util.Map;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.QName;
import com.justep.ui.system.component.ComponentUtils;
import com.justep.xbl.JavaTemplate;
import com.justep.xbl.runtime.XBLException;
public class ResizeTextarea implements JavaTemplate{
private String id;
private String ref;
private String textareaId;
private String onAfterChange;
public Element execute(Element bound, Map context) throws XBLException {
/* 在这里实现从传入的参数bound中获取组件的信息，生成一个span、一个文本框和两个按钮 */
this.init(bound);
Element root = DocumentHelper.createElement(new QName("root"));
root.add(createXBLAttribute());
root.add(createTextarea(this.textareaId,this.ref));
root.add(createTrigger("tr1","变高","float:top","higher"));
root.add(createTrigger("tr2","变矮","float:left","lower"));
/* 可以在这里使用控制台输出看到返回的结果
System.out.println(root.asXML()). */
return root;
}
private void init(Element bound) throws XBLException {
this.id = ComponentUtils.getAttributeOfReuired(bound, "id");
this.ref = ComponentUtils.getAttributeOfReuired(bound, "ref");
this.textareaId = "_textarea_" + this.id;
this.onAfterChange = bound.attributeValue("onAfterChange");
}
private Element createXBLAttribute() {
Element e = Utils.createXBLAttribute();
e.addAttribute("id", this.id);
e.addAttribute("ref", this.ref);
e.addAttribute("textarea-id",this.textareaId);
e.addAttribute("onAfterChange", this.onAfterChange);
return e;
}
private Element createTextarea(String id,String ref) {
Element e = DocumentHelper.createElement(new QName("textarea", Utils.XFORMS_NAMESPACE));
e.addAttribute("id", id);
e.addAttribute("style", "float:left");
if (!Utils.isStringEmpty(ref))
e.addAttribute("ref", ref);
return e;
}
private Element createTrigger(String id,String label,String style,String funcName) {
Element trigger = DocumentHelper.createElement(new QName("trigger", Utils.XFORMS_NAMESPACE));
trigger.addAttribute("id", id);
trigger.addAttribute("style", style);
Element labelElement = trigger.addElement(new QName("label", Utils.XFORMS_NAMESPACE));
if (!Utils.isStringEmpty(label))
labelElement.setText(label);
Element action = Utils.createScriptAction(
"DOMActivate",
null,
"justep.XBLObject.getXBLObject(event.target)."+funcName+"();");
trigger.add(action);
return trigger;
}
}

复制代码

4、建立资源引用文件/UI/x5demo/components/resizeTextarea/model.config.xml

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

完整代码如下

<?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>

复制代码

zhaixin · 发表于 2012-11-20 16:17:35

组件设计时效果

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

1、准备工作

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

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

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

<?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>

复制代码

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

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

复制代码

3、建立组件配置文件UI/x5demo/components/resizeTextarea/designer/resizeTextarea.xml

这里定义了组件的描述、在组件面板中显示的图标；定义了组件的属性、事件、及模板代码。完整代码如下

<?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>

复制代码

4、建立组件设计时js文件UI/x5demo/components/resizeTextarea/designer/resizeTextarea.js

这里定义了组件在设计器中的显示效果，完整代码如下

justep.design.resizeTextarea = function(config){
this.regAttributes(["disabled","readonly"]);
justep.design.resizeTextarea.superclass.constructor.call(this,config);
}
justep.extend(justep.design.resizeTextarea, justep.design.Component,{
paintContent:function(xmlNode){
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>
<button>变矮</button></td></tr></table>",xmlNode);
}
});

复制代码

abelzyp · 发表于 2013-1-10 21:59:03

x8mouse · 发表于 2013-2-19 20:03:49

lanware · 发表于 2013-5-24 16:22:46

收藏学习

wj1_zh · 发表于 2013-6-20 16:17:34

自定义组件

rzport_lq0 · 发表于 2013-7-10 19:04:00

mark

		自动登录	找回密码
密码			注册