Skip to end of metadata
Go to start of metadata

简述

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

推荐文章:http://www.w3school.com.cn/xmldom/met_document_createelement.asp

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

基本方法

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

参考代码:

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

技巧

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

以Button为例:

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

  • 事件

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

并根据需要定义事件,如:

  • 复杂属性
对于一些复杂属性,如下图中AutoForm控件的elements属性对应为一组Dorado控件:
则我们只要重复创建对象,并通过属性设定方式创建复杂控件:

 

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

 

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

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

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

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

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

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

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

 

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

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

查看源代码:

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

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

Labels
  • No labels