基于 HTML5 的 Dojo Widget 开发Word文档下载推荐.docx
《基于 HTML5 的 Dojo Widget 开发Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《基于 HTML5 的 Dojo Widget 开发Word文档下载推荐.docx(14页珍藏版)》请在冰豆网上搜索。
从某种意义上说可以作为当前流行的Flash技术的替代品。
所以,HTML5与Flash技术孰优孰劣的争论这两年就一直不断。
现在Web前端开发领域流行着不少JavaScript类库,如YUILibrary、ExtJS、DojoToolkit等,其中一些封装了各种前端控件。
这些控件的实现是基于HTML4的标准和复杂的JavaScript及CSS技术。
但随着HTML5技术的发展,它的各种强大特性为这些控件的结构和功能提供新的设计和实现方式。
因此,如何将HTML5的特性灵活的运用到前端控件开发就是本文的关注点。
由于HTML5的特性很多,而流行性的JavaScript库中的前端控件也五花八门,本文只能举例说明。
读者可以根据自身的需求结合HTML5中的特性开发出各种强大的前端页面控件。
新一代Web标准——HTML5
HTML5是新一代的HTML标准,它里面包含了很多HTML4中没有的新标签和应用程序接口,如audio标签、video标签、矢量绘图、Web套接字、离线数据存储等。
这些新特性可以使Web页面具有更丰富的功能和更好的用户体验,其中的很多都可以用在网页控件设计上,从而使得网页上的内容更加丰富。
在HTML5众多的功能中,有一个功能非常重要,它不仅是一项被众多网页设计人员期待已久的功能,而且为网页的功能和外观设计留下了巨大的空间,它就是HTML5中的矢量绘图。
现在,不仅不少的业内人士将HTML5的矢量绘图视作Flash的挑战者,甚至连Flash的支持厂商Adobe都推出了基于HTML5矢量绘图的动画制作工具。
本文后面将会介绍借助HTML5的矢量绘图技术实现DojoWidget。
在此之前,为了帮助读者能够更好的理解本文的内容,这里先对HTML中的矢量绘图做一些简要的说明。
HTML5的矢量绘图的功能由Canvas标签和各种绘图API构成。
在JavaScript的脚本中,通过Canvas节点可以获得绘图上下文,通过它调用API就可以绘制各种矢量图,如下所示。
清单1.利用HTML5Canvas绘制的矩形和三角形
<
html>
head>
script>
window.onload=function(){
varcanvas=document.getElementById('
canvas1'
);
varctx=canvas.getContext('
2d'
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(205,125);
ctx.lineTo(125,205);
ctx.fill();
}
/script>
/head>
body>
canvasid="
canvas1"
height="
600"
width="
>
/canvas>
/body>
/html>
图1.HTML5的Canvas绘制的矩形和三角形
在上面的例子中,我们在一个HTML的文档中加入了一个Canvas标签,利用基于JavaScript的API来获得绘图上下文(Context),并在上面绘制了我们所要的图形。
除了绘制2D图形,HTML5还支持3D矢量绘图,它与2D的使用方式类似,此处不再详述。
值得注意的是,HTML5还是一个发展的标准,至今并没有被所有主流浏览器全面支持。
但是,即使是曾经是对HTML5支持较少的IE浏览器也会在新版本IE9中支持Canvas绘图等HTML5关键标签技术。
所以相信在不久的将来,HTML5的普及就会实现。
DojoWidget
近些年,页面设计的易用性、功能性和交互性已经成为了业界的主流趋势。
网页的功能越来越丰富,用户体验也越来越舒适。
这一切都离不开前端以JavaScript和CSS为基础的DHTML技术的迅猛发展。
但是,前端大规模的JavaScript和CSS开发的复杂度比较高,而且还要支持不同的浏览器平台,于是诞生了很多JavaScript库用来帮助前端开发者完成较为复杂的页面逻辑同时屏蔽浏览器的差异,如jQuery、YUILibrary、ExtJS等。
另外,越来越多的互联网公司也将自己的JavaScript库发布出来,如淘宝的KISSY、豆瓣的Do等等。
每种库都支持封装前端复杂的控件,如jQureyUI、DojoWidget等,但方式却不相同。
本文选取DojoToolkit作为控件实现的基础来介绍基于HTML5的控件的设计思想,当然,这种设计并不是只能在DojoToolkit上得到实现,其它的类库也可以作为实现基础。
DojoToolkit是当前页面前端开发领域流行的DHTML库,它不但包括丰富的页面基础功能,如CSS选择器、DOM节点操作、动画效果等,还包括良好的面向对象的封装结构和以此为基础的Dojo控件技术DojoWidget(简称Dijit)。
DojoWidget中包含了对网页控件的生命周期管理,包括初始化渲染、属性映射、事件绑定、控件销毁等。
清单2中给出了一个简单的DojoWidget的实现。
清单2.一个简单的DojoWidget
dojo.declare("
com.shy.widget.MyWidget"
[dijit._Widget,dijit._Templated],{
templateString:
"
<
divdojoAttachEvent=\"
onclick:
onClick\"
${text}<
/div>
"
text:
onClick:
function(){alert('
onClick'
}
});
清单2定义的DojoWidget会在页面上生成一个DIV标签并将属性text的值作为DIV中的内容。
同时,一个onclick事件响应被绑定到这个DIV上。
DojoWidget的使用有两种方法:
一种是通过HTML标记的方式将DojoWidget添加到页面上;
另一种是通过类型实例化的方式来初始化一个实例。
清单3和清单4分别给出了这两种方法各自的例子。
清单3.通过HTML标记的方式使用DojoWidget
divdojoType="
text="
HelloWorld"
/>
清单4.通过类型实例化的方式使用DojoWidget
divid="
testNode"
scripttype="
text/JavaScript"
>
varmyWidget=newcom.shy.widget.MyWidget({text:
'
HelloWorld'
},
document.getElementById("
));
在一般的基于Dojo的工程项目中,除了Dojo自身提供的各式Widget,开发人员会根据实际项目需要扩展Dojo提供的Widget或是重新开发新的Widget。
我们在后面的内容里将会在DojoWidget框架的基础上,利用HTML5的非凡特性来实现新的Widget。
基于HTML5的DojoWidget的设计
如前文所述,HTML5中包含了很多强大的特性,它们的普及和发展会给前端页面的控件技术带来巨大的变化。
本文不去描绘这种改变将会是什么样子,而是举一个具体的例子来为读者掀开未来的一角并由读者亲身品位。
HTML5中的很多特性都可以用于页面控件功能的实现,如前文提到的Web套接字、离线存储、拖拽、矢量绘图等。
本文将利用HTML5中的Canvas矢量绘图来渲染DojoWidget的视图,并在此基础上设计了属性映射和事件绑定。
当前,很多网站的页面都会在适当地方弹出一些对话框,图2所示是Googlemaps网站上的对话框,图3所示的是腾讯的WebQQ网站上的对话框。
一般来讲,网页上的对话框都是通过DIV或是Table来进行布局。
有的设计力求简洁,如图2中的对话框,只用一层DIV表示外框;
有的设计则力求美观,如图3中的对话框,用了9个DIV来描述外框。
页面上的对话框的外观设计的关键是边框的设计。
以往的技术,如图2和图3都是利用DIV加一些式样和背景图片来实现对话框。
但HTML5中的canvas给了我们另外一种实现页面上控件外观的手段,就是用矢量图将对话框的边框“画”出来,而不是通过DIV“拼”出来。
这样可以利用矢量图技术来为对话框增加各种新特性,比如对话框的阴影、圆角、渐变等各种效果,再比如特殊形状的对话框,如椭圆形,菱形等等。
此外,利用矢量绘图技术去“画”对话框的另一个好处就是可以很方便的调整大小和形状。
例如要求设计一个椭圆形的对话框并且可以设置尺寸,如果没有矢量绘图,或许还可以用椭圆背景图片来实现,但设置大小的需求就很难实现。
所以HTML5中的矢量绘图确实能为页面前端控件的外观设计带来灵活性。
我们这里会用HTML5的Canvas实现对话框控件。
图2.GoogleMaps网站上弹出的对话框
图3.腾讯的WebQQ网站上的弹出对话框
利用HTML5我们可以画出图4所示的对话框的外观,包括标题栏和主体两部分,在标题栏的右侧还有一个关闭按钮。
与上面例子中的对话框类似,我们也会使用两个DIV分别作为标题栏内容和主体内容的容器。
得到的对话框Widget结构上会由三部分组成,分别是:
绘制对话框外观的Canvas、包含标题内容的DIV和包含主体内容的DIV。
图4.HTML5Canvas上画出的对话框外观
设计好对话框Widget的外观和结构后,接下来需要考虑如何为它绑定事件。
图2和图3中的对话框中的每一个组成部分都是一个或几个HTML元素,换句话说就是可以对应到页面上的一个或几个DOM节点。
比如GoogleMaps和腾讯WebQQ网站上的对话框中的关闭按钮都是Anchor元素,其所对应的DOM节点上可以直接绑定事件处理函数。
但是,对于图4中的那个关闭按钮,则不能通过简单的DOM节点事件绑定来完成。
为Canvas矢量图上的某个区域进行事件绑定,如为图4中的关闭按钮添加事件响应,需要首先监听Canvas节点的相应事件,再在事件处理函数中进行事件分发。
同样以图4中的关闭按钮为例,要监听它的鼠标点击事件,需要监听Canvas的鼠标点击事件,在其回调函数中计算鼠标的坐标是否落入了关闭按钮的区域内,若是则调用关闭按钮的事件点击处理函数。
对于Widget外观矢量图上表示出的嵌套关系,如图4中的外层对话框包含里面的关闭按钮,更好的实践是将矢量图上的内容分成不同的实体进行封装,如可将外层对话框和里面的关闭按钮封装成不同的组件,这样整个对话框就变成了一个组合控件。
这种组合关就可以用树的结构来进行描述,并以此设计类似浏览器DOM树上的事件捕获和冒泡机制,如图5所示。
因为HTML5的Canvas的矢量绘图不允许将事件响应绑定到矢量图中的某个具体图形上,所以图5中Widget3的鼠标单击事件处理需要从Canvas的鼠标单件事件处理中逐级分发,在事件分发的过程中加入事件捕获和事件冒泡的响应。
图5.组合模式的Widget的事件捕获和冒泡
在Canvas上设计好Widget的外观后,就可以将其包装到DojoWidget中,然后按照清单3和清单4中给出的方式来使用它。
基于HTML5的DojoWidget的实现
做为一个提供良好面向对象封装的JavaScript类库,DojoToolkit提供了完善的Widget封装机制用于创建各种控件,如Dijit中的Form表单控件、布局控件,Dojox中的表格控件、颜色选项板控件等。
这些控件实现的功能千差万别,却遵循同样的结构,可见Dojo所提供的Widget机制具有十分良好的适用性。
一般来讲,每一个DojoWidget都要继承Dojo中两个抽象类dijit._Widget和dijit_Templated并实现其中的一些方法。
dijit_Widget主要用于实现DojoWidget的生命周期管理,dijit._Templated用于实现Widget的视图渲染和属性映射,对于我们所要实现的Widget也会继承这两个接口。
我们的Widget的视图主要有三部分组成,一个Canvas节点用于绘制外观,一个DIV节点用于容纳标题内容,一个DIV节点用于容纳主体内容,Canvas节点中的矢量图作为两个DIV节点的背景。
整个Widget的结构如图6所示。
图6.所要实现的Widget的结构
在实现Widget结构的同时,利用Dojo提供的模板的机制,可以轻松的将属性设置反映到视图上。
Widget的结构定义和属性定义如清单5所示。
清单5.所实现的Widget的结构和属性定义
com.shy.widget.DemoWidget"
[dijit._Widget,dijit._Templated],{
divstyle='
position:
relative;
canvasdojoAttachPoint='
canvasNode'
height='
${height}'
width='
${width}'
style='
absolute'
divdojoAttachPoint='
titleNode'
absolute;
top:
10px;
left:
12px;
containerNode'
top:
40px;
overflow:
auto'
width:
200,
height:
150,
dialogTitle:
清单5中的canvas节点标记是HTML5中的新特性,利用Canvas我们可以绘制如图4所示的矢量图作为Widget的背景。
基于Dojo所提供的Widget生命周期的机制,重载dijit._Widget的postCreate方法在里面绘制矢量图并调整一些结构式样,矢量图绘制的具体实现会在后面完整的Widget程序清单中给出。
清单6.实现Widget的postCreate方法
postCreate:
function(){
this._drawDialog(this.width,this.height,this.canvasNode);
this.inherited(arguments);
dojo.style(this.titleNode,"
height"
20+"
px"
width"
(this.width-54)+"
dojo.style(this.containerNode,"
(this.width-30)+"
(this.height-60)+"
this.titleNode.innerHTML='
fontcolor=white>
+this.dialogTitle+'
/font>
;
},
上面实现了Widget的视图,接下来我们要为它绑定两个事件响应。
首先是对话框Widget的鼠标拖动,即为对话框Widget标题栏添加拖放功能。
为了实现这个功能可在canvas的鼠标事件响应中进行处理,判断事件触发点是否落在标题栏的位置上并处理。
另外,也可以直接在标题栏DIV节点上绑定事件处理。
考虑到实现上的简单,我们采用第二种方式,将Dojo提供的拖放功能直接绑定到标题栏DIV节点上。
然后是对话框的关闭按钮响应,即通过对话框上的关闭按钮来关闭对话框。
实现这个功能只能通过在canvas的鼠标事件响应中判断触发点位置的方式。
清单7中的完整的Widget代码就是在清单6的基础上添加了事件响应的内容并实现了矢量绘图的函数功能。
清单7.Widget的完整实现
onClickListeners:
[],
newdojo.dnd.Moveable(this.domNode,{handle:
this.ti