如何在EDT中扩展UI控件

原创 2012年03月22日 11:03:57

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

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

tagName = "input type=Button",

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

targetWidget = div

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

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

如果同时定义了tagNametargetWidget,以后者为准。

  1.  在控件中指定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支持对第三方控件的扩展功能,比如DojoToolkitjQueryGoogleMap以及其他基于javascript的第三方控件。在本文中,我们将介绍如何在EDT中扩展GoogleMap

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

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

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

  1. '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

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










相关文章推荐

VISIO UI控件

  • 2017年11月04日 16:59
  • 204KB
  • 下载

IOS开发UI篇--一个可扩展性极强的树形控件

一、简介树形控件在多列列表、多级菜单中使用比较常见,比如:国家-省份-城市 多级选择、学校-专业-班级 多级选择等等。然而IOS自带控件中并不存在树形控件,我们要在IOS开发中使用树形控件,通常需要自...

UI阶段控件常用方法大全总结

  • 2016年05月23日 13:05
  • 769KB
  • 下载

Android所有UI控件

  • 2015年01月14日 09:54
  • 1.29MB
  • 下载

Android UI-自定义日历控件

Android UI-自定义日历控件 本篇博客笔者给大家分享一个日历控件,这里有个需求:要求显示当前月的日期,左右可以切换月份来查看日期。 我们想一想会如何去实现这样的一个控件,有开源的,但可能不太满...
  • wwj_748
  • wwj_748
  • 2014年12月29日 21:44
  • 22900

jquery-ui-1.8.22.custom控件

  • 2017年08月01日 09:03
  • 1.06MB
  • 下载

实现不同ui间调用控件demo

  • 2014年08月26日 11:31
  • 3KB
  • 下载

C# Winform 跨线程更新UI控件常用方法汇总

 C#Winform编程中,跨线程直接更新UI控件的做法是不正确的,会时常出现“线程间操作无效: 从不是创建控件的线程访问它”的异常。处理跨线程更新Winform UI控件常用的方法有4种: ...

Android-UI基本控件

  • 2012年11月28日 09:54
  • 3.18MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何在EDT中扩展UI控件
举报原因:
原因补充:

(最多只允许输入30个字)