Dojo之Widget标签开发

最新推荐文章于 2021-03-17 05:03:48 发布

iteye_15814

最新推荐文章于 2021-03-17 05:03:48 发布

阅读量138

点赞数

分类专栏： [网站分类]4.其他技术区文章标签： Dojo JavaScript F# CSS HTML ViewUI

[网站分类]4.其他技术区专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Dojo之Widget标签开发

Dojo widget就像是jsp中的自定义标签，通过学习开发widget标签来对其使用及其设计原理有更好的了解。本文主要是对Develop HTML widgets with Dojo一文的学习和翻译。由于本人水平有限，如有不妥或者不对之处轻各位大虾批评指正

1. Dojo widget的概念

正如上所述，dojo widget就像是jsp中自定义标签，只是dojo widget是在客户端使用的（本文中统一简称dojo widget为widget标签）。Widget标签已经脱离了传统的DOM模型结构，每个Widget标签都有唯一的widgetID，并且可以包含多个属性，而且可以包含子Widget标签。Widget共包含三个部分：

l 一个包含Widget标签逻辑的js文件，通过JavaScript DOM模型来处理可见的元素。

l HTML模板文件，它提供基本的Widget HTML视图。当然如果模板很简单，完全可以在js文件中用字符类型替代。

l Css样式文件，定义标签的样式，在js代码或者HTML模板文件中使用。

l 图片文件。

目录结构如下：

dojo/src/widget ------------------------------------ js代码文件

dojo/src/widget/templates ------------------------ HTML模板,Css样式文件

dojo/src/widget/templates/images --------------- 图片文件

2. Widget标签的使用

使用标准的Dojo Widget标签创建Button按钮，代码如下：

<html>

<head>

dojo.require("dojo.widget.Button");

</script>

</head>

<body>

<div dojoType="Button">Submit</div>

</body>

</html>

执行效果如图：

3. 自定义 Widget 标签 -HelloWorld

首先创建js/dojo/src/Widget/templates/HelloWorldTemplate.html,代码如下：

<div>

HelloWorld

</div>

创建js/dojo/src/Widget/HelloWorl.js，代码如下：

dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld",

dojo.widget.HtmlWidget,

{ templatePath:dojo.uri.dojoUri("src/widget/templates/HelloWorldTemplate.html")

}

);

注：所有用户自定义Widget标签都必须继承HtmlWidget。

创建测试文件HelloWorld.html,代码如下：

<html>

<head>

dojo.require("dojo.widget.*");

dojo.require("dojo.widget.HelloWorld");

</script>

</head>

<title>Hello World Widget test</title>

<body>

<dojo:HelloWorld></dojo:button>

</body>

</html>

如果HelloWorldTemplate模板足够简单，可以使用templateString替换templatePath，修改后HelloWorld.js代码如下：

dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,

{

templateString: "<div>Hello World</div>"

}

);

4. 自定义Widget标签属性

以上部分讨论了如何创建简单的自定义标签，下面需要给HelloWorld添加属性以及自样式，让其更像一个标准的Html标签。让HelloWorld标签的显示内容可以有用户定义，添加text属性就可以办到。修改后的代码如下：

HelloWorld.js

dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,

{

templateString: "<div>${this.text}</div>",

text: ""//default value

}

);

注：自定义属性必须要设置默认值，否则会被Dojo忽略。而且Dojo会忽略DOM模型下的所有属性。

HelloWorld.html

<html>

<head>

dojo.require("dojo.widget.*");

dojo.require("dojo.widget.HelloWorld");

</script>

</head>

<title>Hello World Widget test</title>

<body>

</body>

</html>

属性的处理

处理属性的典型方法是postCreate()方法（稍候讨论），另一个方法是fillInTemplate()。许多Widget标签都是通过postCreate()方法来处理属性的，也有通过set方法。不同的是postCreate()方法是在标签创建时处理属性，而set方法是在运行时动态设置属性。

脚本片断

在HEML模板文件中加入js代码并不是一个好的方法，但有时候却必不可少。在Dojo中可以使用${…}代码片断来获取属性值，正如上例中的${this.text}。

添加样式

为了使Widget达到真正的功用，Dojo提供了定制css样式的功能，通过引用不同的自定义样式，可以方便的为应用改变显示效果。为HelloWorld标签添加样式，创建一个简单样式文件js/dojo/src/widget/templates/HtmlHelloWorld.css，代码如下：

.caption {

font-family: Verdana;

font-size: <chmetcnv w:st="on" unitname="pt" sourcevalue="10" hasspace="False" negative="False" numbertype="1" tcsc="0"><span style="COLOR: blue">10pt</span></chmetcnv>;

}

iteye_15814

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dojo之Widget标签开发

Dojo之Widget标签开发 Dojo widget就像是jsp中的自定义标签，通过学习开发widget标签来对其使用及其设计原理有更好的了解。本文主要是对Develop HTML widgets with Dojo一文的学习和翻译。由于本人水平有限，如有不妥或者不对之处轻各位大虾批评指正 1. Dojo widget的概念正如上所述，dojo widget就像是jsp中自定...
复制链接

扫一扫