Dorado 9 : 1. 如何用JS创建控件对象

简述

本文只讨论利用JS创建Dorado的控件对象，对于HTML中的Table,Div,P等DOM对象的创建这中基础知识不在本文讨论范围内。如果你想了解建议去实际了解一下HTML的基础知识。

另外在Dorado7中对于DOM的创建专门提供了$DomUtils的xCreate方法帮助你简化代码，详情请查看Client-API中的dorado.util.Dom中的xCreate方法，尤其注意其中几个范例的编写。

基本方法

基本方式请阅读：基础教程中的<<03. 创建Dorado对象>>

参考代码：

new dorado.widget.Button({
  caption: "Test",
  icon: "xxxx",
  onClick: function() {
    alert("AAAAAAAAAAAAA");
  }
})

支持那些属性和事件看jsdoc.

技巧

技巧一：如何通过API文档确定构造函数中JSON对象可以声明那些属性和事件

简单属性

以Button为例：

查看Client-API我们可以知晓对应控件的attributes有哪些属性，之后就可以在构造函数中设定这个属性，如：

new dorado.widget.Button({
  caption: "Test",
  showTrigger: true,
  disabled: false,  
  icon: "xxx.gif",
  iconClass: "myicon",
  onClick: function() {
    alert("AAAAAAAAAAAAA");
  }
})

事件

如上例的onClick事件,我们可以通过Client-API查看事件列表：

并根据需要定义事件，如：

new dorado.widget.Button({
  caption: "Test",
  onClick: function(self, arg) {
    alert("onClick");
  },
  onReady: function(self, arg) {
    alert("onReady");
  }
})

复杂属性

对于一些复杂属性，如下图中AutoForm控件的elements属性对应为一组Dorado控件：

则我们只要重复创建对象，并通过属性设定方式创建复杂控件:

var label1 = new dorado.widget.Label({
	text:"测试1",
	width:100
});
var label2 = new dorado.widget.Label({
	text:"测试2",
	width:100
});
var autoForm = new dorado.widget.AutoForm({
	width:600, 
	height:400, 
	elements:[label1, label2]
});

然而如果控件较为复杂，如子控件对象较多，通过new方法反复创建控件对象较为繁琐，则我们可以利用$type机制实现，如上范例可以改造为：

var autoForm = new dorado.widget.AutoForm({
	width:600, 
	height:400, 
	elements:[{
		$type:"Label",
		text:"测试1",
		width:100
	}, {
		$type:"Label",
		text:"测试2",
		width:100
	}]
});

技巧二:如何知道$type的值

在上面的范例中我们用到了$type，那么在实际开发中我们如何知道一个控件的$type的值呢？

在Dorado的Client-API中，我们可以看到如下的$type的说明：

如Dialog的$type为Dialog，则可以通过如下的方式创建Dialog:

{
	$type:"Dialog",
	center:true,
	height:"300",
	width:"400",
	modal:true,
	caption":"员工信息编辑",
	modalType:"dark"
}

技巧三：如何快速的构建一个JSON对象

通过手工编写JS代码创建一个控件的过程较为繁琐，下面给大家介绍一个技巧：如何利用IDE生成JSON对象。

如我们希望创建一个FieldSet控件，并且包含多个子控件，效果如下图：

则我建议你可以在IDE中预先创建一个View,并设计好这个界面，如：

之后在浏览器中查看这个页面，并在浏览器中右键单击查看源代码：

查看源代码：

注意其中红色边框的部分，我们将这个部分拷贝出来(它就是我们需要的JSON对象)，将这部分代码作为控件构造的JSON参数的值，并删除$type的定义，如下：

var fieldSet = new dorado.widget.FieldSet(
	{
		"children":[
			{
				"$type":"FormElement",
				"height":"36",
				"label":"\u5C5E\u6027\u4E00"
			},
			{
				"$type":"FormElement",
				"height":"36",
				"label":"\u5C5E\u6027\u4E8C"
			},
			{
				"$type":"FormElement",
				"height":"36",
				"label":"\u5C5E\u6027\u4E09"
			},
			{
				"$type":"FormElement",
				"height":"36",
				"label":"\u5C5E\u6027\u56DB"
			}
		],
		"height":"170",
		"width":"200",
		"caption":"FieldSet",
		"layoutConstraint":{
			"left":"50"
		}
	}
);

用相同的方式，你还可以直接在IDE中定义相关控件的事件，然后在查看源代码拷贝就可以。

Dorado 9 : 1. 如何用JS创建控件对象

简述

基本方法

技巧

技巧一：如何通过API文档确定构造函数中JSON对象可以声明那些属性和事件

技巧二:如何知道$type的值

技巧三：如何快速的构建一个JSON对象

Attachments: