如何在EDT中扩展UI控件

如何在EDT中扩展UI控件

简介

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

怎样扩展RichUI控件？

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

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

怎样扩展RichUI控件？

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

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



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

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

tagName = "input type=Button",

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

targetWidget = div

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

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

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

在控件中指定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。

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

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

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

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

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

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

在自动生成的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

提示：这个扩展性大大降低重复代码量并简化控件的可重用性。