如何在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

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