如何在EDT中扩展UI控件

如何在EDT中扩展UI控件

简介

在EDT中，UI控件是可被定制的、所见即所得、并可被拖拉使用的。控件中包含业务数据、事件定义以及变量声明。本文将介绍如何在EDT中扩展UI控件。

• 怎样扩展RichUI控件？

• 怎样在EDT中扩展第三方控件？（本文将着重讲述GoogleMap的扩展）

• 怎样组合扩展EDT现有控件？

怎样扩展RichUI控件？

RUI控件是采用EGL语言编码的，是基于EDT基本控件的（egl.ui.rui.RUIWidget）。示例如下：

1. 在EGL项目上点击右键，选择‘新建->handler’来创建一个handler来定义要扩展的控件，将展示新handler创建窗口，如下图所示：

在'模板'项中选择 'Rich UI Widget', 填入你想要定义扩展控件的名称，然后点击‘结束’。新handler将会被创建在制定的package中。

2. 打开新建handler文件，使用‘tagName’为新建控件指定HTML标示名称。

tagName = "input type=Button",

或者采用定义'targetWidget'来声明控件类型。

targetWidget = div

• HTML标志是控件定义的基础类型。

• 可以使用控件名称来访问此类型控件中相应方法和属性。

如果同时定义了tagName和targetWidget，以后者为准。

3. 在控件中指定CSS路径，使用CSS来控制控件显示。
   

cssFile = "css/org.eclipse.edt.rui.css",

4. 使用@VEWidget来定义控件在控件列表中的展示。比如：使用displayName= “Button”，则控件列表中将显示该控件名称为“Button”。

@VEWidget{ category = "Display and Input", template = "${typeName}{ text=\"Button\" }", displayName = "Button", smallIcon = "icons/ctool16/button.gif", }

5.使用@EGLProperty定义控件属性及属性相应的方法。

text String{@EGLProperty{setMethod = setText, getMethod = getText}, @VEProperty{}};

6.在控件中实现在第五步里定义的属性的相应方法。

private function setText(textIn String in) text = textIn; setAttribute("value", textIn); end private function getText() returns (String) return ( getAttribute("value") as string); end

提示:所有类型是Widget(egl.ui.rui.Widget)的控件其父类都是RUIWidget (egl.ui.rui.RUIWidget)。

怎样在EDT中扩展第三方控件？

EDT支持对第三方控件的扩展功能，比如DojoToolkit、jQuery、GoogleMap以及其他基于javascript的第三方控件。在本文中，我们将介绍如何在EDT中扩展GoogleMap。

1. 创建一个新的EDT项目，可使用任何template。

2. 在'EGLSource'文件夹下，创建命名为'map'的文件夹，然后创建一个handler - 'GoogleMap.egl'。

3. 在'WebContent'文件夹下，创建'utils/map目录，新建命名为'GoogleMap.js'的javascript文件。

4. 在'WebContent'文件夹下，新建一个命名为'GoogleMap.html'的HTML文件（此文件为第三方控件的配置文件，下面将有详细配置说明）。

5. 在‘ EGLSource’ 文件夹下，打开 'GoogleMap.egl' 定义要扩展的 GoogleMap 控件 .

ExternalType GoogleMap extends Widget type JavaScriptObject { relativePath = "utils/map", externalName = "GoogleMap", includeFile = "GoogleMap.html", @VEWidget{ displayName = "GoogleMap", provider = "Google", category = "Samples", template = "${typeName}{ width = 400, height = 400 }" } } function refresh(); end

Note: 'relativePath' –指向GoogleMap.js的路径

'externalName' –GoogleMap.js文件名

'includeFile' –第三方控件的配置文件的路径（GoogleMap.html）

‘category' --新控件所属类型

'@VEWidget'–定义控件展示和被使用时生成的模板样式

6. 在'GoogleMap.html'中定义扩展第三方控件的api链接地址。

<script type="text/javascript"> var mapWidgets = []; function handleApiReady() { for ( var i = 0; i < mapWidgets.length; i++) { mapWidgets[i].createMap(); } } function appendBootstrap() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady"; document.body.appendChild(script); } </script>

提示:具体的关于其他第三方控件的信息可以在其相应的官方网站上或到GoogleApis查询.在EDT中，同时支持对第三方控件的本地和远程扩展，根据需要在.html中定义源。

7. 在' GoogleMap.js'中定义控件初始化和功能定义。
egl.defineWidget( 'utils.map', 'GoogleMap', // this class 'eglx.ui.rui', 'Widget', // the super class 'div', // dom element type name { "constructor" : function() { this.eze$$DOMElement.id = "map0" this.eze$$DOMElement.style.width = '100%'; this.eze$$DOMElement.style.height = '100%'; if(mapWidgets.length == 0){ appendBootstrap(); } if(typeof(google)!="undefined" && typeof(google.map)!="undefined"){ this.createMap(); }else{ mapWidgets.appendElement(this); } }, "createMap" : function() { var thisWidget = this; if (!thisWidget.map) { var myLatlng = new google.maps.LatLng(thisWidget.centerLat || 35.7575731, thisWidget.centerLng || -79.0192997); var myOptions = { zoom: thisWidget.zoom || 8, center: (thisWidget.center ? null : myLatlng), mapTypeId: thisWidget.mapType || google.maps.MapTypeId.ROADMAP }; thisWidget.map = new google.maps.Map(thisWidget.eze$$DOMElement, myOptions);} }, "refresh" : function() { if (this.map) { google.maps.event.trigger(this.map, 'resize'); } } });

提示: 与'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现已实现的控件再进行组合扩展，以利于重复使用。

1. 新建EDT项目，命名为-‘extendWidget’。采用“Web2.0client application” 或者“Web2.0client application with services”模板。

2. 在‘EDTSource’文件包下新建文件夹‘widgets’，并新建handler-‘combineWidget’,采用'RUIWidget'模板。

3. 在自动生成的RUIWidget类型的handler定义中添加定制控件的展示属性。

handler combineWidget type RUIWidget{targetWidget = ui, cssFile = "css/extendWidget.css", @VEWidget{ category = "Display and Input", template = "${typeName}{}", displayName = "CombineWidget" }} ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children = []}; function start() end end

提示:添加过展示属性后，该定制的控件将会在编辑器右方的控件列表中显示如下。

4. 在 GridLayOut 中拖入控件，组合成可被重复使用的新控件。例如：

ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children = [ TextLabel, TextField, Button ]}; Button DojoButton{ layoutData = new GridLayoutData{ row = 3, column = 2, verticalAlignment = GridLayoutLib.VALIGN_MIDDLE, horizontalAlignment = GridLayoutLib.ALIGN_CENTER }, text = "Submit", onClick ::= Button_onClick }; TextField TextField{ layoutData = new GridLayoutData{ row = 2, column = 2 }}; TextLabel TextLabel{ layoutData = new GridLayoutData{ row = 2, column = 1 }, text = "Name" }; function start() TextField.focus(); end function Button_onClick(event Event in) DojoDialogLib.showAlert("Hello, "+TextField.text); end 提示：用户可根据自己重用需要定制组合控件的展示内容、样式以及控件之间的相互关系 和触发的方法。

5. 在‘client’文件夹中新建handler-‘testCombineWidget’用来测试新组合控件，将新控件拖入GridLayOut中，预览可看到被组合的新控件。

handler testCombineWidget type RUIhandler{initialUI =[ui ], onConstructionFunction = start, cssFile = "css/extendWidget.css", title = "testCombineWidget"} ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children = [ CombineWidget ]}; CombineWidget combineWidget{ layoutData = new GridLayoutData{ row = 2, column = 2 }}; function start() end end
提示：这个扩展性大大降低重复代码量并简化控件的可重用性。