基于 HTML5 的 Dojo Widget 开发

PHP中文网 • 2025年3月29日 20:30:12 • 编程技术 • 阅读 1

简介： 当前的 Web 开发存在着两种趋势，一是基于 HTML、CSS 和 JavaScript 技术，比如以 Dojo 工具包、jQuery 等为基础的 HTML 页面；另一种是基于浏览器端运行时，如基于 Flash、Silverlight 等技术的 RIA 应用。前者占用的资源少，不需在浏览器上安装插件支持，后者界面更为美观，且便于实现一些较为复杂的展现功能。而且，因为 JavaScript 和 Flash 等平台之间的交互功能很受局限，基于这两类技术开发的页面内容很难做深度的集成。HTML5 作为新一代的 HTML 标准，不但对 JavaScript 的支持更加完善，同时还包含了丰富的绘图功能，这等同于兼具上面提到的两类技术的各自的优势。本文主要介绍基于 HTML5 来扩展 Dojo Widget，它不仅具有强大的 JavaScript 逻辑控制，而且具有丰富的页面展现和良好的运行性能。

前言

若干年前，很少有人会想到一家生产电脑的公司会凭借一款功能设计上存在着不少缺陷的手机在市场上取得巨大的成功。也很少有人会想到一家曾经占据着智能手机大部分市场份额的厂商会落入今天这样举步维艰的局面。人们不禁惊讶的发现，精美的界面、方便的操作对于消费者的吸引力要大于完善的功能及稳定的系统。用户体验的优劣在一定的程度上决定了一个面向终端用户的产品能否在市场上生存。移动设备的设计如此，互联网应用的设计亦如此。现在，互联网上充斥着各种精美的 CSS 式样、JavaScript 特效、Flash 动画等等，来吸引大众的眼球以获得更多的用户关注和经济收益。这其中存在着两种流行的设计趋势。一种是以高级的 JavaScript 技术和 CSS 技术为基础的 DHTML，以此来实现美观和交互性强的用户界面。这种技术的优势是浏览器能够提供天然的支持而不依赖于任何插件而且能够很灵活的访问页面上的内容，但是这种技术的不足是浏览器自身的局限使得一些功能实现起来很困难。比如若要实现网页上的矢量绘图，虽然有 VML、SVG 等技术，但是它们不是广泛支持的标准，需要在不同的浏览器上做不同的处理。另一种是在浏览器上面安装某种包含运行环境的插件来运行某些 RIA 的应用，如 Flash、Silverlight、JavaFX 等，这些技术都是基于矢量绘图，能够呈现绚丽的用户界面和灵活多变的用户交互。但它们的缺点就是需要在浏览器上再安装插件，而且运行效率往往也会存在着一定的问题。新一代的 Web 页面标准 HTML5 则可以帮助我们很好的解决这一问题，它不但提供了很多诸如 Web 套接字、Web 存储等技术，而且提供了 Canvas 以便在 Web 页面上直接进行矢量绘图。作为 HTML5 标准的一部分，Canvas 将天然地被各种浏览器支持，而且便于与 JavaScript 进行交互。从某种意义上说可以作为当前流行的 Flash 技术的替代品。所以，HTML5 与 Flash 技术孰优孰劣的争论这两年就一直不断。

现在 Web 前端开发领域流行着不少 JavaScript 类库，如 YUI Library、Ext JS、Dojo Toolkit 等，其中一些封装了各种前端控件。这些控件的实现是基于 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 的矢量绘图技术实现 Dojo Widget。在此之前，为了帮助读者能够更好的理解本文的内容，这里先对 HTML 中的矢量绘图做一些简要的说明。HTML5 的矢量绘图的功能由 Canvas 标签和各种绘图 API 构成。在 JavaScript 的脚本中，通过 Canvas 节点可以获得绘图上下文，通过它调用 API 就可以绘制各种矢量图，如下所示。

清单 1. 利用 HTML5 Canvas 绘制的矩形和三角形
@@######@@

图 1. HTML5 的 Canvas 绘制的矩形和三角形

在上面的例子中，我们在一个 HTML 的文档中加入了一个 Canvas 标签，利用基于 JavaScript 的 API 来获得绘图上下文（Context），并在上面绘制了我们所要的图形。除了绘制 2D 图形，HTML5 还支持 3D 矢量绘图，它与 2D 的使用方式类似，此处不再详述。

值得注意的是，HTML5 还是一个发展的标准，至今并没有被所有主流浏览器全面支持。但是，即使是曾经是对 HTML5 支持较少的 IE 浏览器也会在新版本 IE9 中支持 Canvas 绘图等 HTML5 关键标签技术。所以相信在不久的将来，HTML5 的普及就会实现。

前言

新一代 Web 标准—— HTML5

立即学习“前端免费学习笔记（深入）”；

清单 1. 利用 HTML5 Canvas 绘制的矩形和三角形
@@######@@

图 1. HTML5 的 Canvas 绘制的矩形和三角形

前言

新一代 Web 标准—— HTML5

立即学习“前端免费学习笔记（深入）”；

清单 1. 利用 HTML5 Canvas 绘制的矩形和三角形
@@######@@

图 1. HTML5 的 Canvas 绘制的矩形和三角形

利用 HTML5 我们可以画出图 4 所示的对话框的外观，包括标题栏和主体两部分，在标题栏的右侧还有一个关闭按钮。与上面例子中的对话框类似，我们也会使用两个 DIV 分别作为标题栏内容和主体内容的容器。得到的对话框 Widget 结构上会由三部分组成，分别是：绘制对话框外观的 Canvas、包含标题内容的 DIV 和包含主体内容的 DIV。

前言

新一代 Web 标准—— HTML5

立即学习“前端免费学习笔记（深入）”；

清单 1. 利用 HTML5 Canvas 绘制的矩形和三角形
@@######@@

图 1. HTML5 的 Canvas 绘制的矩形和三角形

设计好对话框 Widget 的外观和结构后，接下来需要考虑如何为它绑定事件。图 2 和图 3 中的对话框中的每一个组成部分都是一个或几个 HTML 元素，换句话说就是可以对应到页面上的一个或几个 DOM 节点。比如 Google Maps 和腾讯 Web QQ 网站上的对话框中的关闭按钮都是 Anchor 元素，其所对应的 DOM 节点上可以直接绑定事件处理函数。但是，对于图 4 中的那个关闭按钮，则不能通过简单的 DOM 节点事件绑定来完成。为 Canvas 矢量图上的某个区域进行事件绑定，如为图 4 中的关闭按钮添加事件响应，需要首先监听 Canvas 节点的相应事件，再在事件处理函数中进行事件分发。同样以图 4 中的关闭按钮为例，要监听它的鼠标点击事件，需要监听 Canvas 的鼠标点击事件，在其回调函数中计算鼠标的坐标是否落入了关闭按钮的区域内，若是则调用关闭按钮的事件点击处理函数。

对于 Widget 外观矢量图上表示出的嵌套关系，如图 4 中的外层对话框包含里面的关闭按钮，更好的实践是将矢量图上的内容分成不同的实体进行封装，如可将外层对话框和里面的关闭按钮封装成不同的组件，这样整个对话框就变成了一个组合控件。这种组合关就可以用树的结构来进行描述，并以此设计类似浏览器 DOM 树上的事件捕获和冒泡机制，如图 5 所示。因为 HTML5 的 Canvas 的矢量绘图不允许将事件响应绑定到矢量图中的某个具体图形上，所以图 5 中 Widget3 的鼠标单击事件处理需要从 Canvas 的鼠标单件事件处理中逐级分发，在事件分发的过程中加入事件捕获和事件冒泡的响应。

前言

新一代 Web 标准—— HTML5

立即学习“前端免费学习笔记（深入）”；

清单 1. 利用 HTML5 Canvas 绘制的矩形和三角形
@@######@@

图 1. HTML5 的 Canvas 绘制的矩形和三角形

在 Canvas 上设计好 Widget 的外观后，就可以将其包装到 Dojo Widget 中，然后按照清单 3 和清单 4 中给出的方式来使用它。

前言

新一代 Web 标准—— HTML5

立即学习“前端免费学习笔记（深入）”；

清单 1. 利用 HTML5 Canvas 绘制的矩形和三角形
@@######@@

图 1. HTML5 的 Canvas 绘制的矩形和三角形

在实现 Widget 结构的同时，利用 Dojo 提供的模板的机制，可以轻松的将属性设置反映到视图上。Widget 的结构定义和属性定义如清单 5 所示。

前言

新一代 Web 标准—— HTML5

立即学习“前端免费学习笔记（深入）”；

清单 1. 利用 HTML5 Canvas 绘制的矩形和三角形
@@######@@

图 1. HTML5 的 Canvas 绘制的矩形和三角形

在实际应用中，本文介绍的对话框 Widget 的设计和实现可以作为原型来进一步增强和扩展，以满足实际项目的需求。而这种结合了 HTML5 新特性的 Widget 设计方法和实现思路则可以运用到很多应用场景中。

总结

本文通过例子介绍了基于 HTML5 的 Dojo Widget 的设计思想和实现方式，利用 HTML5 中的 Canvas 特性和 Dojo 的 Widget 机制创建了一个对话框 Widget。相较于传统的基于 HTML4 和 CSS2 的 Widget 设计和实现，基于 HTML5 技术的 Widget 具有很多天然的优势和良好的特性。虽然现阶段 HTML5 尚未得到广泛的支持，但相信市场对 HTML5 中各种新特性的需求会驱动 HTML5 的迅速普及，届时会有各种基于 HTML5 功能的 Widget 出来，将我们的页面装饰的更加丰富多彩。

                       window.onload = function() {             var canvas = document.getElementById('canvas1');             var ctx = 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();          }

登录后复制

  dojo.declare("com.shy.widget.MyWidget", [dijit._Widget, dijit._Templated] ,{    templateString : "${text}
",    text : "",    onClick : function() {alert('onClick');}  });

登录后复制

  
      var myWidget = new com.shy.widget.MyWidget({text:'Hello World'},       document.getElementById("testNode"));

登录后复制

  dojo.declare("com.shy.widget.DemoWidget",[dijit._Widget,dijit._Templated], {  templateString : "  
 
 
",    width : 200,    height: 150,    dialogTitle : "",  });

登录后复制

  dojo.declare("com.shy.widget.DemoWidget",[dijit._Widget,dijit._Templated], {    templateString :         
    
    
",    width : 200,    height: 150,    dialogTitle : "",    postCreate : function() {       this._drawDialog(this.width, this.height, this.canvasNode);       this.inherited(arguments);       dojo.style(this.titleNode, "height", 20 + "px");       dojo.style(this.titleNode, "width", (this.width - 54) + "px");       dojo.style(this.containerNode, "width", (this.width - 30) + "px");       dojo.style(this.containerNode, "height", (this.height - 60) + "px");       this.titleNode.innerHTML = '' + this.dialogTitle + '';    },  });

登录后复制

  dojo.declare("com.shy.widget.DemoWidget",[dijit._Widget,dijit._Templated], {    templateString :       
    
    
",    width : 200,    height: 150,    dialogTitle : "",    onClickListeners : [],    postCreate : function() {       this._drawDialog(this.width, this.height, this.canvasNode);       new dojo.dnd.Moveable(this.domNode, {handle:this.titleNode});       this.inherited(arguments);       dojo.style(this.titleNode, "height", 20 + "px");       dojo.style(this.titleNode, "width", (this.width - 54) + "px");       dojo.style(this.containerNode, "width", (this.width - 30) + "px");       dojo.style(this.containerNode, "height", (this.height - 60) + "px");       this.titleNode.innerHTML = '' + this.dialogTitle + '';    },    _onCanvasClick : function(e) {       for(var i = 0; i         
 
登录后复制@@######@@




 
 



                                                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3126726.html

0 0

关于作者

PHP中文网签约作者

530.2K 文章

0 评论

1 粉丝

php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！

HTML5 Canvas图像处理技巧

上一篇 2025年3月29日 20:30:07

HTML 5-交互

下一篇 2025年3月29日 20:30:15

设计师视角看HTML5

HTML5被传为Flash的杀手，是一种用于web应用程序开发、具有变革意义的网络技术。HTML 5提供了一些新的元素和属性，其中有些是技术上类似和标签，但有一定含义，例如和这种标签将有利于搜索引擎的索引整理、小屏幕设备和视障人士使用。同时…

PHP中文网
2025年3月29日 • 编程技术
0000
HTML 5 & CSS 3的新交互特性

立即学习“前端免费学习笔记（深入）”；本文标题的这副图片，是用Phosotshop制作的。但是，在搜索引擎中你却无法搜索到它，搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小，可能网速慢的网友在浏览的时候不得不耐心的…

PHP中文网
2025年3月29日 • 编程技术
1000
若干个HTML5的新特性与技术

1. 新的Doctype 尽管使用，即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素用和来语义化地表示带标题的图片 This is an image of something interesting. 3. 重新定义的…

PHP中文网
编程技术 2025年3月29日
1000
HTML4和HTML5之间的10个主要不同

HTML5是最新的HTML标准，或迟或早，所有的web程序员都会发现需要使用到这个最新的标准，而且，很多人都会感觉到，重新开发一个HTML5的网站，要比把一个网站从HTML4迁移到HTML5上容易的多，这是因为这两个版本之间有很…

PHP中文网
编程技术 2025年3月29日
1000
编程技术

HTML 5基础之HTML 5 API的威力

本篇文章是一个由四个部分构成的系列的第三部分，该文章系列旨在寻找并突出说明html5中的变化。其开始先介绍新的标签和页面的组织，接着提供一些网页设计方面的高层面信息，然后是表单的创建，以及api的使用及其价值所在，最后是canvas提供的一…

PHP中文网
2025年3月29日
1000
HTML 5离线存储之Web SQL

本篇没有考虑异步,多线程及sql注入 WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite), 且不说这些,单看在HTML5中如何实现离线数据的CRUD,最基本的用法(入门级别) 1,打开数据库 …

PHP中文网
编程技术 2025年3月29日
1000
使用 HTML5 canvas 进行 Web 绘图

简介：新的 HTML5 规范旨在帮助开发人员更轻松的编写出各类 Web 应用，以顺应当前 SaaS，云计算以及 RIA 等技术的最新趋势。在 HTML5 得以广泛推广之前，开发人员通常使用 SVG，VML 等技术进行 Web 绘图操作，但…

PHP中文网
2025年3月29日 • 编程技术
1000
HTML 5可以做五件事情超出你的想象

作为下一代的网页语言，HTML5 拥有很多让人期待已久的新特性，它可以说是近十年来 Web 标准最巨大的飞跃。这篇文章将向大家展示使用 HTML5 可以做的五件很棒的事情。 1. 制作时尚的表单表单是Web设计的重要组成部分，常见的有注册…

PHP中文网
2025年3月29日 • 编程技术
1000
HTML5标记省略语法规则

html5的标记可以省略，在不影响页面布局的情况下，可以节省网页体积大小。减少代码量。某些标记可以省略。省略标记的开始标记并不意味着标记不存在，它是隐含的，但它仍然存在。一个html文件总是有一个根标记html，即使字符串没有出现在页面标记…

PHP中文网
编程技术 2025年3月29日
1000
jquery学习必备代码和技巧

学习jquery 必备的一些代码和方法，相信学习了本文，你可以对jquery的学习更加容易。同时欢迎jquery各位爱好者评论，指出不足，让我们大家共同学习，共同提升技术能力。请关注html5cn的新浪微博@html5cn、腾讯微博@ht…

PHP中文网
编程技术 2025年3月29日
1000

发表回复

登录后才能评论

基于 HTML5 的 Dojo Widget 开发

关于作者

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

分享到:

请登录

AD推荐黄金广告位招租... 更多推荐