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

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










在线程中访问UI控件

 在线程中是不能直接访问UI控件,但是有时候又确实要访问,这对于初学者来说可能有些困难,现就简单的说明一下方法,希望有所帮助。,比如你在启动一个线程,在线程的方法中想更新窗体中的一个TextBox.....
  • yumanqing
  • yumanqing
  • 2007年01月29日 16:19
  • 1653

Android中进程与线程及如何在子线程中操作UI线程

程序员的店:http://mickeyhouse999.taobao.com/index.htm?spm=2013.1.w5002-3513783747.2.w5Yghm 插个广告,小店刚开张,欢迎各...
  • bx276626237
  • bx276626237
  • 2013年09月06日 13:11
  • 3148

Android 在非主线程中更新UI也能成功原因详解

转载:http://www.2cto.com/kf/201111/111172.html 在Android的开发中,非UI线程不能操作UI线程中的控件,即UI是非线程安全的。 我在上一...
  • qq_30651537
  • qq_30651537
  • 2016年05月24日 11:13
  • 815

Objective-C基础之类别,扩展,协议

Objective-C的面向对象编程中,分类,扩展,协议这几个概念经常会使用到,这篇文章简单的记录了我在学习Objective-C时候对它们的理解...
  • sgls652709
  • sgls652709
  • 2016年09月03日 19:19
  • 178

layer弹出控件

确定 ok 取消 no layer.confirm('is not?',{icon: 3, title:'友情提示'}, function(index){   //do somethin...
  • qq_30469045
  • qq_30469045
  • 2017年05月05日 14:14
  • 158

WPF入门教程系列(一) 创建你的第一个WPF项目

http://www.cnblogs.com/pengjinyu/archive/2009/08/19/1549845.html WPF基础知识 快速学习绝不是从零学起的,良好的基础是...
  • gws1229
  • gws1229
  • 2014年02月20日 08:38
  • 812

CListContainerElement 扩展任意类型的列表控件--表头拖拽不起作用

今天在做一个程序的界面时,需要在一个列表中显示除文字以外的其他控件,如:Edit、Button、Combo等;我做界面使用的是duilib,其自带的CListUI并不能满足此项功能,需要进行扩展,在此...
  • lixiang987654321
  • lixiang987654321
  • 2015年04月30日 08:31
  • 4505

教你怎样扩展Eclipse的扩展点(二)

我们先新建一个 元素(New Element)名称为 extender,这时有两个元素了,在第一个元素上点右键,在弹出的对话框中选择"序列", 再在这个新增的对象上右键新增一个 extender 对...
  • vwpolo
  • vwpolo
  • 2008年02月13日 18:15
  • 1572

嵌入式Linux下使用的UI开发库

目前,流行的面向嵌入式系统的图形系统有MicoroWindows/NanoX、Qt/Embedded、MiniGUI、DirectFB、PicoGUI以及GTK+/FB等。它们中的大多数遵循LGPL条...
  • binglingshuang
  • binglingshuang
  • 2008年12月15日 11:15
  • 1856

Qt 扩展-扩展部件和插件

Qt 扩展-扩展部件和插件 sf2gis@163.com 2015年1月30日   1 目标:扩展Qt现有的功能。 2 原理:已有部件扩展,定义新控件、扩展Qt自身插件,定义和扩展应用程序的...
  • sf2gis2
  • sf2gis2
  • 2015年02月28日 18:25
  • 1353
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何在EDT中扩展UI控件
举报原因:
原因补充:

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