星期四, 八月 09, 2007

如何编写自己的dojo widget(物件)?

网络上有很多的方法。

包括什么使用以下方法来申明:

dojo.setModulePrefix('wang', '../wang');
dojo.registerModulePath('wang', '../wang');
dojo.widget.manager.registerWidgetPackage('wang.widget');
但会出现很多的问题和错误。

这篇文章的方法是最简单的
http://www.alexatnet.com/node/14

简单来说步骤如下:

1.建立一个目录

假设目前js目录结构如下:
/js/dojo-0.4.3-ajax
/js /wang //你自己定做的dojo widget 库
/js/wang/widget/ Memo.html, Memo.css

那么你需要建立的声明文件Menu.js保存在/js目录下.

2.建立新的widget声明文件Menu.js

Menu.js内容如下:

dojo.widget.defineWidget(
// widget name and class
"wang.widget.Memo",

// superclass
dojo.widget.HtmlWidget,

// properties and methods
{
// parameters
title: "Note",

// settings
isContainer: true,
templatePath: dojo.uri.dojoUri("../wang/widget/Memo.html"),
//注意:这个目录是相对于dojo.js所在目录的相对目录.
templateCssPath: dojo.uri.dojoUri("../wang/widget/Memo.css"),

// callbacks
onClick: function(evt){
this.destroy();
}
}
);

3.在HTML里应用声明

<script src="js/Memo.js"></script>

4.通过dojoType来使用新的widget
<div dojoType="Memo" title="你好世界">
你好吗?
</div>

效果如下: