AJAX类库ADL新接触
1 ADL 简介
ADL(AJAX Dev Library),是一个面向对象的AJAX SDK,是FAC组织下的一个开源项目。它符合相关标准和规范,能兼容主流浏览器包括IE,FIREFOX等,同时能够被其他可视化开发工具(如webshop)所集成和使用。
2 主要的核心类介绍
System.js :最基础的核心类,包括继承,引用,包含功能的实现,并且有其它类常用的基础方法的实现,如,取得类名,消息监听等。
UI.js:系统常用颜色的常量化定义,Component组件类,Container容器类的实现,提供公用的属性,方法和事件处理机制,以方便后续的UI高级类的继承。
DHtml.js:标准DHtml的一些DOM对象的封装。如Table,Div,Span,Iframe,Button等等。
var newButton = js.dhtml.button();
这样只需要通过上面的方式就可以生成一个简单DHtml控件了。
DHtml2.js:扩展DHtml的一些DOM对象的封装,对应于DHtml.js,通过继承具有Component或Container的高级特性。
3 UI基类介绍,及基础运用指南
UI类的基本结构:
Object—
|_Component
|_Container
| |
|_DHtml,DHtml2
|_UI Component
|_DB UI Component
|_Other Class
我们可以看到ui中的类继承结构。 Component类继承与Object类,Container容器类继承于Component类,DHtml中的类,属于容器性质的类(如Table,Div,IFrame)继承于Container,其他的继承与Component.其他的高级UI类大多继承于DHtml2中的类。
下面我举个简单的例子来说明UI的基本方法的用法:SetBounds(),SetSize(),SetMoveable(),SetResizeable(),Add(),Remove(),Hide(),Show().
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=GB2312"> <title>TestComponentMove</title> </head> <BODY οnlοad='afterload();'><span>可以移动和改变大小</Span> </BODY> </html> <script language=JavaScript type="text/javascript" SRC="adl/js/lang/System.js"></script> <script language=JavaScript type="text/javascript" SRC="adl/js/lang/Array.js"></script> <script language=JavaScript type="text/javascript" SRC="adl/js/util/SysUtil.js"></script> <script language=JavaScript type="text/javascript" SRC="adl/js/ui/UI.js"></script> <script language=JavaScript type="text/javascript" SRC="adl/js/ui/DHtml.js"></script> <script language=JavaScript type="text/javascript" SRC="adl/js/ui/DHtml2.js"></script> <SCRIPT language=JavaScript type="text/javascript"> function afterload(){ var div1 = new js.ui.Div();/**Div继承于Container容器类,含有Container的属性和方法。这里需要注意js.ui是这个类的命名空间,用来防止类重名,注意一定要写上。**/ div1.style.position = 'relative'; div1.style.backgroundColor = Color.Silver; /**设置这个对象的背景色。这里Color.Silver是ADL自定义的颜色常量。还有很多颜色大家可以参考UI.js中。**/ div1.SetBounds(70,23,356,245); /**设置位置和大小 ,这个方法是从Component中继承而来的,当然div这个Container容器继承于Component,所以也有了这个方法。当然还有GetBounds(),SetSize(),GetSize()等等一系列的方法。设置这个方法的前提是这个对象的布局方式不是默认的static,也就是必须设置div1.style.position = 'relative';或者div1.style.position = “absolute”; absolute表示绝对定位。**/ div1.SetMoveable(true); /**设置这个对象使它可以拖动。这个方法也是继承于Component中的。所以如果需要设置某个控件可以拖动只需要 object. SetMoveable(true)就可以了。**/ div1.SetResizeable(true); //设置这个对象可以通过拖动改变大小。 div1.innerHTML= "通过鼠标拖拽我来自由移动或者拖拽边框改变我的大小"; div1.style.font = ' small-caps 10pt serif'; window.Add(div1); /**将div对象装入到window对象中,window本身也是一个 Container容器类。所以若要将一个对象添加到另一个对象,只需要ContainerObj.Add(object),即可将其添加到容器对象中了。 并且可以通过每个容器对象自带的Components数组来管理。**/ var d2 = new js.ui.Div(); div1.Add(d2); d2.innerHTML= "通过鼠标拖拽我来自由移动或者拖拽边框改变我的大小"; d2.style.font = ' small-caps 10pt serif'; d2.style.position = 'absolute'; d2.style.backgroundColor = Color.MoneyGreen; d2.SetBounds(100,55,80,50); d2.SetMoveable(true); d2.SetResizeable(true); var button = new js.ui.Button();//新建一个按钮,继承于Component。 button.onclick = function (){ if(div1.Visible) div1.Hide();//隐藏div1。Hide()也是继承于Component的方法。 else div1.Show();//显示div1。Show ()也是继承于Component的方法。
} button.style.position = 'absolute'; button.SetSize(50,25);//设置这个按钮的大小。 button.value='显示/隐藏灰色对象'; button.SetBounds(80,320,120,25); window.Add(button); var button1 = new js.ui.Button(); button1.onclick = function (){ div1.Remove(d2); /**在这个点击事件中,将d2从div1中移除。Remove()方法是继承于Container类而来的。**/ } button1.style.position = 'absolute'; button1.SetSize(50,25); button1.value='移除浅绿对象'; button1.SetBounds(210,320,120,25); window.Add(button1); document.body.style.backgroundColor = DefaultStyle.PanelColor; } </SCRIPT> |
下面看看页面的效果图:
这个页面有两个div, 灰色div包含了浅绿div,两个div都可以自由拖动和改变大小。在这里,我们只用了两句话就能设置控件的可自由拖拽和根据拖拽改变大小。object.SetMoveable(true); object.SetResizeable(true);想想要自己实现拖拽和改变大小的艰巨任务吧,这真是太简单,太让人兴奋了。