如何在EDT中扩展UI控件
简介
在EDT中,UI控件是可被定制的、所见即所得、并可被拖拉使用的。控件中包含业务数据、事件定义以及变量声明。本文将介绍如何在EDT中扩展UI控件。
怎样扩展RichUI控件?
RUI控件是采用EGL语言编码的,是基于EDT基本控件的(egl.ui.rui.RUIWidget)。示例如下:
-
在EGL项目上点击右键,选择‘新建->handler’来创建一个handler来定义要扩展的控件,将展示新handler创建窗口,如下图所示:
在'模板'项中选择 'Rich UI Widget', 填入你想要定义扩展控件的名称,然后点击‘结束’。新handler将会被创建在制定的package中。
-
打开新建handler文件,使用‘tagName’为新建控件指定HTML标示名称。
或者采用定义'targetWidget'来声明控件类型。
如果同时定义了tagName和targetWidget,以后者为准。
-
在控件中指定CSS路径,使用CSS来控制控件显示。
4. 使用@VEWidget来定义控件在控件列表中的展示。比如:使用displayName=
“Button”,则控件列表中将显示该控件名称为“Button”。
5.使用@EGLProperty定义控件属性及属性相应的方法。
6.在控件中实现在第五步里定义的属性的相应方法。
提示:所有类型是Widget(egl.ui.rui.Widget)的控件其父类都是RUIWidget
(egl.ui.rui.RUIWidget)。
怎样在EDT中扩展第三方控件?
EDT支持对第三方控件的扩展功能,比如DojoToolkit、jQuery、GoogleMap以及其他基于javascript的第三方控件。在本文中,我们将介绍如何在EDT中扩展GoogleMap。
-
创建一个新的EDT项目,可使用任何template。
-
在'EGLSource'文件夹下,创建命名为'map'的文件夹,然后创建一个handler
- 'GoogleMap.egl'。
-
在'WebContent'文件夹下,创建'utils/map目录,新建命名为'GoogleMap.js'的javascript文件。
-
在'WebContent'文件夹下,新建一个命名为'GoogleMap.html'的HTML文件(此文件为第三方控件的配置文件,下面将有详细配置说明)。
5. 在‘EGLSource’文件夹下,打开'GoogleMap.egl'定义要扩展的GoogleMap控件.
Note: 'relativePath' –指向GoogleMap.js的路径
'externalName' –GoogleMap.js文件名
'includeFile' –第三方控件的配置文件的路径(GoogleMap.html)
‘category' --新控件所属类型
'@VEWidget'–定义控件展示和被使用时生成的模板样式
6. 在'GoogleMap.html'中定义扩展第三方控件的api链接地址。
提示:具体的关于其他第三方控件的信息可以在其相应的官方网站上或到GoogleApis查询.在EDT中,同时支持对第三方控件的本地和远程扩展,根据需要在.html中定义源。
7. 在'
GoogleMap.js'中定义控件初始化和功能定义。
提示: 与'GoogleMap.egl'定义一样的层级结构,例如'GoogleMap.egl'扩展了'Widget',则我们需要在相应的javascript中定义与.egl相同的层级结构。
控件定义中指定的所有控件都将被加入DOM中。
每一个控件指向一个或多个DOM节点。
8.在‘map’文件夹下,新建一个handler用来对新扩展的控件进行测试。新控件应展示如下图:
提示: 在控件列表中,新扩展控件展示为'GoogleMap(Google)',这个名称是通过@VEWidget的'displayName'来设置的.
'(Google)'是通过@VEWidget的'provider'属性来设置的.
在使用(引用)Widget类型的控件之前必须事先声明(包含所有的RichUI控件&第三方控件)。
9. 将GoogleMap拖入GridLayout展示,在编辑器中点击'预览',该新扩展控件将会展示为如下图所示。
怎样组合扩展EDT现有控件?
目前在EDT已扩展的控件主要分为两大类:Rich UI控件和第三方-Dojo控件。本文将介绍如何将EDT现已实现的控件再进行组合扩展,以利于重复使用。
-
新建EDT项目,命名为-‘extendWidget’。采用“Web2.0client
application” 或者“Web2.0client application with services”模板。
-
在‘EDTSource’文件包下新建文件夹‘widgets’,并新建handler-‘combineWidget’,采用'RUIWidget'模板。
-
在自动生成的RUIWidget类型的handler定义中添加定制控件的展示属性。
提示:添加过展示属性后,该定制的控件将会在编辑器右方的控件列表中显示如下。
4. 在GridLayOut中拖入控件,组合成可被重复使用的新控件。例如:
提示:用户可根据自己重用需要定制组合控件的展示内容、样式以及控件之间的相互关系和触发的方法。
5. 在‘client’文件夹中新建handler-‘testCombineWidget’用来测试新组合控件,将新控件拖入GridLayOut中,预览可看到被组合的新控件。
提示:这个扩展性大大降低重复代码量并简化控件的可重用性。
分享到:
相关推荐
DFT EDT手册 压缩解压缩原理及流程的详细讲解 EDT的产生流程,EDT在design中的插入流程
edt工具利器 你值得擁有 專門解封包附檔名edt
EDT Mobile Runtime version 3,使用本程序请更新到EDT 0.8版本
马钢冷轧EDT滤芯,提供大家一起参考学习
jquery-easyui-EDT-1.4.2-,包括中文文档以及一些示例,静态资源,各种样式
EDP EDT 加密解密工具
tessent edt dft手册 eetop.cn_edt_gd.pdf
Microsoft 开发了快速部署工具 (EDT) 来帮助我们的经销商和系统组装商合作伙伴快速、轻松和正确地在 PC 中部署 Windows 7 和 Windows Server 2008 产品。获得自定义和部署 Windows 8 的 Windows Server 2012 的帮助...
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
jquery-easyui-EDT-1.5.5 扩展+pcdemo+移动demo+插件
EDT Mobile Runtime 主要包含两大模块: Dojo mobile widgets & PhoneGap mobile widgets a. org.eclipse.edt.rui.dojo....在第六版中,Rui widgets有一点小更新,请大家使用org.eclipse.edt.rui.widgets_0.8.0。 谢谢
EDT Mobile Runtime 主要包含两大模块: Dojo mobile widgets & PhoneGap mobile widgets a. org.eclipse.edt.rui.dojo....在第五版有,Rui widgets有一点小更新,请大家使用org.eclipse.edt.rui.widgets_0.8.0。 谢谢
资源分类:Python库 所属语言:Python 资源全名:edt-2.0.0.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
EDT Mobile Runtime,使用本程序请更新到EDT 0.8版本
进行了一项研究,研究了温度和光照/黑暗条件对Kinneret湖中轮足co足动物Mesocyclops ogunnus卵发育时间(EDT)的影响。 发现在15℃,22℃和27℃下的EDT分别为148、33和20小时。 在12/12小时亮/暗和24小时亮光这两种...
此程序为EGL扩展Google App Engine项目示例代码。通过对IDE UI、Generator以及语言层面的扩展来实现。您可以参考此项目来开发自己的GAE扩展程序。
EDT Mobile Runtime 主要包含两大模块: Dojo mobile widgets & PhoneGap mobile widgets a. org.eclipse.edt.rui.dojo....在第七版中,Rui widgets有一点小更新,请大家使用org.eclipse.edt.rui.widgets_0.8.0。 谢谢
此示例程序展示了如何用EGL Rich UI基本功能,包括service调用、应用控件、InfoBus以及History等功能。
用户可以很容易地扩展他们。 -------------------------------------------------------------------------------- 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如,对话框属性定义在jQuery.fn...
jquery-easyui-EDT-1.4.5-build1很好用