dynamicparams java_设计器组件属性编辑器开发案例讲解

[]> getDatasource(PropertyItem propertyItem){

List list = new ArrayList();

return list;

}

参数：方法固定传入一个当前的属性项，可以根据这个属性项获取到当前w文档的上下文信息。

返回值：固定返回一个字符串数组列表，列表项的格式为[值,展现值]。

步骤2：绑定属性编辑器，同方式2.1或2.2

2.4 设置多选

在以上属性编辑器定义中加入属性mutil-selection=“true” ,下拉列表就会变成多选的形式，如：

参见$UI/system/components/justep/bolb/blobImage组件的imageType属性

基于w页面的对话框类型

有些属性需要提供比较复杂的录入界面才能达到易用，这时就需要使用到对话框的展现，这里就以公共属性编辑器css class属性编辑器classSelector来讲解

步骤1：编辑器定义

在公共配置文件/UI2/system/components/designerCommon/commonConfig.xml中注册编辑器定义

url="$UI/system/components/designerCommon/propEdtorPages/cssClassSelector/cssClassSelector.w"

editor-parameter="{width:800,height:600}">

@type 属性值为dialog表示展现为对话框

@url 指定展现页面

@editor-parameter 编辑器参数json结构，{width:800,height:600}这里对话框的宽度和高度

步骤2：构建页面

在UI2下目标目录下新建一个w文件，创建以及制作页面的过程跟运行时的w页面是一样的，进一步的开发过程可以参考运行时的w页面开发视屏或者文档，在这个案例中目标路径为

/UI2/system/components/designerCommon/propEdtorPages/cssClassSelector/cssClassSelector.w

步骤3：构建页面的js文件

对于属性编辑器 js文件是必须的，结构如下：

define(function(require){

//获取xui文档操作服务对象,该对象的方法可以参考xuiService的api文档

var xuiService = require("../../js/xuiService");

var Model = function(){

this.callParent();

};

Model.prototype.modelLoad = function(event){

// 获取初始化数据

var initData = xuiService.getPageParams();

};

/**

* 获取返回值，点击确定后调用的方法,必须是一个json格式的数据 .

*/

Model.prototype.getReturnValue = function(){

var result = {};

return Object.keys(result).join(' ');

};

return Model;

});

Js类的开发也与其他运行时的js类的开发方法一样，这里只列出整个的大致结构以及必须的接口和一些特殊的api调用。

步骤4：编辑器引用以及传参

代码样例

{

"0common": {

label: "常用",

value: "table",

require: true

},

"1condensed": {

label: "紧凑型",

value: "table-condensed",

require: false

},

"2striped": {

label: "条纹状",

value: "table-striped",

require: false

},

"3bordered": {

label: "边框",

value: "table-bordered",

require: false

},

"4hover": {

label: "鼠标悬停高亮",

value: "table-hover",

require: false

},

"5titleAlign": {

label: "列头对齐方式",

value: "x-dt-title-center|x-dt-title-left|x-dt-title-right|x-dt-title-justify",

require: false

}

} ]]>

editor-parameter为编辑器参数，参数值一般定义为json格式，这个参数在在js类中可以通过xuiService.getPageParams();方法类获取。

最终运行效果如下：

4. 更多例子

4.1 图标选择器

url="$UI/system/components/designerCommon/propEdtorPages/icon/selectIcon.w"

editor-parameter="{width:800,height:600}">

method="buildIconList" />

dynamic-params 节点为动态参数，对应的是一个java类的方法 ，通过这个方法构造好数据后 ，在编辑器js类中通过xuiService.getPageParams() 获取。

展现效果如下：

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!