- 浏览: 1059727 次
- 性别:
- 来自: 南京
文章分类
- 全部博客 (501)
- dwr (6)
- javascript (84)
- oracle (66)
- jsp/servlet (18)
- ant (3)
- 基础知识 (12)
- EXT (10)
- My SQL (10)
- java (71)
- spring (37)
- 学习的对象 (2)
- Linux (24)
- 面试 (1)
- HTML/CSS (11)
- tomcat (11)
- 收藏夹 (2)
- Power Designer (2)
- struts.xml配置文件 (1)
- sturts2 (3)
- myeclipse (8)
- eclipse (7)
- Maven (34)
- SVN (3)
- SAP JCO (2)
- JBOSS (11)
- webservice (8)
- word (1)
- 敏捷开发 (1)
- sybase (4)
- Nexus (3)
- EhCache (3)
- log4j (3)
- Cookie (4)
- Session (4)
- CXF (7)
- AXIS (2)
- SSO (1)
- LDAP (1)
- velocity (2)
- Jquery (5)
- redis (2)
- http (4)
- dojo (1)
- Linux资源监控软件mnon的安装与运用 (1)
- notepad++ (1)
- EA (1)
- UML (1)
- JasperReports (1)
- 权限 (0)
- freemarker (4)
- Spring MVC (1)
- JMS (1)
- activeMQ (1)
- hession (3)
- 安全 (1)
- ibatis (2)
- log (1)
- nginx (1)
最新评论
-
winhbb:
我刚好遇到了一个问题(在可以依赖注入的场合有效):有两个模块A ...
解决Maven项目相互依赖/循环依赖/双向依赖的问题 -
nanjiwubing123:
long3ok 写道你好 XmlOutputFormatter ...
用XStream转换复杂XML -
zhoujianboy:
另外一个方法实现eclipse tomcat 热部署:http ...
eclipse下实现maven项目在tomcat容器热部署方法 -
long3ok:
你好 XmlOutputFormatter 请问这个类是在什么 ...
用XStream转换复杂XML -
ganbo:
总结的好,文章给力。
解决Maven项目相互依赖/循环依赖/双向依赖的问题
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按钮,代码如下:
3. 自定义Widget标签-HelloWorld
首先创建js/dojo/src/Widget/templates/HelloWorldTemplate.html,代码如下:
创建js/dojo/src/Widget/HelloWorl.js,代码如下:
注:所有用户自定义Widget标签都必须继承HtmlWidget。
创建测试文件HelloWorld.html,代码如下:
如果HelloWorldTemplate模板足够简单,可以使用templateString替换templatePath,修改后HelloWorld.js代码如下:
4. 自定义Widget标签属性
以上部分讨论了如何创建简单的自定义标签,下面需要给HelloWorld添加属性以及自样式,让其更像一个标准的Html标签。让HelloWorld标签的显示内容可以有用户定义,添加text属性就可以办到。修改后的代码如下:
HelloWorld.js
注:自定义属性必须要设置默认值,否则会被Dojo忽略。而且Dojo会忽略DOM模型下的所有属性。
HelloWorld.html
属性的处理
处理属性的典型方法是postCreate()方法(稍候讨论),另一个方法是fillInTemplate()。许多Widget标签都是通过postCreate()方法来处理属性的,也有通过set方法。不同的是postCreate()方法是在标签创建时处理属性,而set方法是在运行时动态设置属性。
脚本片断
在HEML模板文件中加入js代码并不是一个好的方法,但有时候却必不可少。在Dojo中可以使用${…}代码片断来获取属性值,正如上例中的${this.text}。
添加样式
为了使Widget达到真正的功用,Dojo提供了定制css样式的功能,通过引用不同的自定义样式,可以方便的为应用改变显示效果。为HelloWorld标签添加样式,创建一个简单样式文件js/dojo/src/widget/templates/HtmlHelloWorld.css,代码如下:
注:css类名必须是唯一的
修改HeolloWorld.js,代码如下:
5. 在js中使用Widget标签
本部分将说明如何用Dojo在js代码中使用HelloWorld标签,而传统的js方式已经不再适用。
传统方式操作Widget标签
如果想在程序中动态改变text “Hello World”,你会试着用传统的js方式来实现,但是这样做是徒劳的。传统方式的代码如下:
这样的代码是没有任何效果的。下面就分析一下这段为何不会有作用。
A. Body中的onload属性失效
Body中的onload属性与Dojo是不兼容的,Dojo已经在事件方法中包括了onload的事件。Onload事件在Dojo下使用,代码如下:
B. Dojo Widget标签与DOM element的区别
Dojo Widget标签已经不再是一个DOM element。Dojo创建Widget标签时,已经去掉所有DOM模式下的所有属性,除了Dojo认识的属性。例如,id已经演化成了widgetId。如果需要用传统的方式操作属性,必须通过修改模板文件来实现。如果需要获取ID,修改模板文件代码如下:
<div id="${this.widgetId}">Hello World</div>
Dojo方式操作Widget标签
如果要用Dojo方式操作Widget标签,必须还要修改一些代码。修改后的HelloWorld.js代码如下:
dojo.provide("dojo.widget.HelloWorld");
dojo.require("dojo.widget.HtmlWidget");
dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,
{
templateString: "<div dojoAttachPoint=\"domNode\" >${this.text}</div>",
text: "",//default value
// dynamic setters
setHtml: function(htmlString) {
this.domNode.innerHTML = htmlString;
}
}
);
注:Dojo Widget标签使用attachment points来处理DOM element。在Dojo方式下,不需要id=”${this.widgetId}”,因为不会使用id来获取对象,而是使用attachment point。实际上attachment point是默认使用的。”domNode”是attachment points根元素
通过获取Widget标签对象实例,代码如下:
<html>
<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript"> dojo.require("dojo.widget.HelloWorld");
dojo.addOnLoad(function(){
dojo.widget.byId("someID").setHtml("New text");
});
</script>
</head>
<body>
<div id="someID" dojoType="HelloWorld"></div>
</body>
</html>
通过使用dojo.widget.createWidget()方法动态创建HelloWorld实例,代码如下:
<html>
<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.HelloWorld");
dojo.addOnLoad(
function(){
var newWidget = dojo.widget.createWidget(
"HelloWorld", // widgetType
{}, // widget attributes, for example {title: "Some Title"}
dojo.byId("widgetPlaceholder") // reference to a DOM node that
// will be REPLACED by new widget
);
}
);
</script>
</head>
<body>
<div id="widgetPlaceholder"></div>
</body>
</html>
6. Widget标签嵌套HTML
本部分讨论如何实现Widget标签的嵌套
A. 嵌套静态HTML
正如前面提到的Dojo创建Widget标签时移除所有的DOM element。所以在Dojo移除之前,必须改变所要的DOM element。通过Dojo提供fillInTemplate()方法实现。此方法可以操作HTML DOM element和已经生成的Widget标签。实现改变静态HTML的HelloWorld.js代码如下:
dojo.provide("dojo.widget.HelloWorld");
dojo.require("dojo.widget.HtmlWidget");
dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,
{
templateString: "<div dojoAttachPoint=\"domNode\">${this.text}</div>",
text: "",//default value
// dynamic setters
setHtml: function(htmlString) {
this.domNode.innerHTML = htmlString;
},
fillInTemplate: function(args, frag) {
// Getting original HTML element
var source = this.getFragNodeRef(frag);
// Moving all children of original element to
// the desired node of the new component
while(source.hasChildNodes()) {
var node = dojo.dom.removeNode(source.firstChild);
this.domNode.appendChild(node);
}
// Invoking original dojo fillInTemplate() method
dojo.widget.HelloWorld.superclass.fillInTemplate.call(this, args, frag);
}
}
);
以上代码将HTML DOM节点转移到需要的地方,另一种实现方法是设置Widet属性isContainter为true。
动态添加嵌套HTML
如何动态添加嵌套HTML实现方法要根据动态HTML的形式来决定:
l 嵌套HTML作为string提供,通过设置innerHtml属性实现。
l 嵌套HTML作为DOM节点提供,可以使用appendChild方法实现。
以上方式的实现代码如下:
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
setHtml: function(html) {
if (dojo.lang.isString(html)) {
this.domNode.innerHTML = html;
} else if (dojo.dom.isNode(html)) {
// Cleaning whatever was there before
dojo.dom.removeChildren(this.domNode);
// Adding new element
this.domNode.appendChild(html);
} else {
dojo.lang.assert(false, "setHtml called with incorrect type: " + (typeof html));
}
}
}
);
7. Widget标签嵌套Widget标签
嵌套静态Widget标签
有些情况下我们需要实现Widget标签的相互嵌套,例如Dojo TabContainer和Tree标签。要实现这样的Widget标签,你需要设置isContainer为true,而且要在模板中设置attachment point为”containerNode”,代码如下:
dojo.provide("dojo.widget.HelloWorld");
dojo.require("dojo.widget.HtmlWidget");
dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,
{
templateString: "<div dojoAttachPoint=\"containerNode\">${this.text}</div>",
text: "",//default value
isContainer: true
}
);
这种实现是依赖Dojo的,如果需要实现更加复杂的,必须要操作postCreate方法中的Children数组,数组中存了所有嵌套的静态Widget标签。
测试代码:
<html>
<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.Button");
dojo.require("dojo.widget.HelloWorld");
</script>
</head>
<title>Hello World Widget test</title>
<body>
<div dojoType="HelloWorld" text=" ad you can set the text attribute">
<div dojoType="Button">Submit</div>
</div>
<!--<dojo:HelloWorld text="you can set the text attribute"></dojo:button>-->
</body>
</html>
复杂应用请参考Dojo TabContainer和Tree标签。
动态添加Widget标签嵌套
动态添加Widget标签嵌套,需要在HelloWorld.js中实现addChild()方法,重写addChild()方法中还要调用父类的addChild()方法。实现动静态添加Widget标签嵌套的代码如下:
dojo.provide("dojo.widget.HelloWorld");
dojo.require("dojo.widget.HtmlWidget");
dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,
{
templateString: "<div dojoAttachPoint=\"titleNode\">${this.text}" +
"<br/><div dojoAttachPoint=\"containerNode\">"
+ "</div></div>",
text: "",//default value
isContainer: true,
postCreate: function() {
// adding statically
for(var i in this.children) {
this._addRow(this.children[i]);
}
},
addChild: function(child, overrideContainerNode,
pos, ref, insertIndex) {
this._addRow(child);
dojo.widget.HelloWorld.superclass.addChild.call(
this, child, overrideContainerNode);
},
_addRow: function(component) {
this.titleNode.appendChild(
document.createTextNode(component.widgetType));
this.titleNode.appendChild(
document.createElement("br"));
}
}
);
注:经测试发现,即使不实现addChild方法,同样可以动态添加Widget标签嵌套,但是在HtmlWidget类中也没有找到addChild方法的实现,这里有待进一步研究。
测试代码:
<html>
<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.Button");
dojo.require("dojo.widget.Checkbox");
dojo.require("dojo.widget.HelloWorld");
dojo.addOnLoad(function(){
var button = dojo.widget.createWidget("Button",
{caption: "Submit"});
dojo.widget.byId('someID').addChild(button);
var checkbox = dojo.widget.createWidget("Checkbox");
dojo.widget.byId('someID').addChild(checkbox);
});
</script>
</head>
<title>Hello World Widget test</title>
<body>
<div dojoType="HelloWorld" id="someID"></div>
<!--<dojo:HelloWorld text="you can set the text attribute"></dojo:button>-->
</body>
</html>
8. Dojo事件处理
本部分主要介绍使用Dojo的方式处理事件,在阅读本部分之前,最好先了解Dojo事件系统。首先需要在模板中定义dojoAttachEvent=”eventName: eventHandlerMethod;”属性。eventName是标准的DOM事件名称(例如:onClick),eventHandlerMethod则为事件调用函数。修改后的代码如下:
dojo.provide("dojo.widget.HelloWorld");
dojo.require("dojo.widget.HtmlWidget");
dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,
{
templateString: '<div dojoAttachPoint="domNode" dojoAttachEvent="onClick:onClickHandler;">Click here</div>',
onClickHandler: function(e) {
alert("clicked in onClickHandler");
this.onClick(e);
},
onClick:function (e) { //for dojo.event.connect
}
}
);
注:可以在标签中预定义某一事件的函数,如上例中的onClickHandler,同时也可以预留接口让用户绑定自定义函数。
测试代码:
<html>
<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.HelloWorld");
function HelloWorld_onClick() {
alert("Node clicked in HelloWorld_onClick");
}
dojo.addOnLoad(function(){
var hello = dojo.widget.byId("someID");
dojo.event.connect(hello, 'onClick', 'HelloWorld_onClick')
});
</script>
</head>
<title>Hello World Widget test</title>
<body>
<div dojoType="HelloWorld" id="someID"></div>
</body>
</html>
总结:
通过对本文的学习,初步了解了Dojo的Widget标签的简单使用和如何实现自定义Widget标签。
【转载地址】http://27091497.blog.163.com/blog/static/11806250200772210458268/
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> <script type="text/javascript" src="js/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.widget.Button"); </script> </head> <body> <div dojoType="Button">Submit</div> <!--另一种使用Widget标签的方法--> <!--<dojo:button caption="Submit"></dojo:button>--> </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> <script type="text/javascript" src="js/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.widget.*"); dojo.require("dojo.widget.HelloWorld"); </script> </head> <title>Hello World Widget test</title> <body> <div dojoType="HelloWorld"></div> <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> <script type="text/javascript" src="js/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.widget.*"); dojo.require("dojo.widget.HelloWorld"); </script> </head> <title>Hello World Widget test</title> <body> <div dojoType="HelloWorld" text="you can set the text attribute"></div> <!--<dojo:HelloWorld text="you can set the text attribute"></dojo:button>--> </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: 10pt; }
注:css类名必须是唯一的
修改HeolloWorld.js,代码如下:
dojo.provide("dojo.widget.HelloWorld"); dojo.require("dojo.widget.HtmlWidget"); dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, { templateString: "<div class=\"caption\">${this.text}</div>", text: "",//default value templateCssPath: dojo.uri.dojoUri("src/widget/templates/HtmlHelloWorld.css") } );
5. 在js中使用Widget标签
本部分将说明如何用Dojo在js代码中使用HelloWorld标签,而传统的js方式已经不再适用。
传统方式操作Widget标签
如果想在程序中动态改变text “Hello World”,你会试着用传统的js方式来实现,但是这样做是徒劳的。传统方式的代码如下:
<html> <head> <script type="text/javascript" src=" js/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dojo.widget.HelloWorld"); </script> </head> <body onload="document.getElementById('HelloWorldTest').innerHTML='New text';"> <div id=" HelloWorldTest" dojoType="HelloWorld"></div> </body> </html>
这样的代码是没有任何效果的。下面就分析一下这段为何不会有作用。
A. Body中的onload属性失效
Body中的onload属性与Dojo是不兼容的,Dojo已经在事件方法中包括了onload的事件。Onload事件在Dojo下使用,代码如下:
<html> <head> ... <script> dojo.addOnLoad( function(){ alert("onload!"); } ); </script> </head>
B. Dojo Widget标签与DOM element的区别
Dojo Widget标签已经不再是一个DOM element。Dojo创建Widget标签时,已经去掉所有DOM模式下的所有属性,除了Dojo认识的属性。例如,id已经演化成了widgetId。如果需要用传统的方式操作属性,必须通过修改模板文件来实现。如果需要获取ID,修改模板文件代码如下:
<div id="${this.widgetId}">Hello World</div>
Dojo方式操作Widget标签
如果要用Dojo方式操作Widget标签,必须还要修改一些代码。修改后的HelloWorld.js代码如下:
dojo.provide("dojo.widget.HelloWorld");
dojo.require("dojo.widget.HtmlWidget");
dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,
{
templateString: "<div dojoAttachPoint=\"domNode\" >${this.text}</div>",
text: "",//default value
// dynamic setters
setHtml: function(htmlString) {
this.domNode.innerHTML = htmlString;
}
}
);
注:Dojo Widget标签使用attachment points来处理DOM element。在Dojo方式下,不需要id=”${this.widgetId}”,因为不会使用id来获取对象,而是使用attachment point。实际上attachment point是默认使用的。”domNode”是attachment points根元素
通过获取Widget标签对象实例,代码如下:
<html>
<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript"> dojo.require("dojo.widget.HelloWorld");
dojo.addOnLoad(function(){
dojo.widget.byId("someID").setHtml("New text");
});
</script>
</head>
<body>
<div id="someID" dojoType="HelloWorld"></div>
</body>
</html>
通过使用dojo.widget.createWidget()方法动态创建HelloWorld实例,代码如下:
<html>
<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.HelloWorld");
dojo.addOnLoad(
function(){
var newWidget = dojo.widget.createWidget(
"HelloWorld", // widgetType
{}, // widget attributes, for example {title: "Some Title"}
dojo.byId("widgetPlaceholder") // reference to a DOM node that
// will be REPLACED by new widget
);
}
);
</script>
</head>
<body>
<div id="widgetPlaceholder"></div>
</body>
</html>
6. Widget标签嵌套HTML
本部分讨论如何实现Widget标签的嵌套
A. 嵌套静态HTML
正如前面提到的Dojo创建Widget标签时移除所有的DOM element。所以在Dojo移除之前,必须改变所要的DOM element。通过Dojo提供fillInTemplate()方法实现。此方法可以操作HTML DOM element和已经生成的Widget标签。实现改变静态HTML的HelloWorld.js代码如下:
dojo.provide("dojo.widget.HelloWorld");
dojo.require("dojo.widget.HtmlWidget");
dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,
{
templateString: "<div dojoAttachPoint=\"domNode\">${this.text}</div>",
text: "",//default value
// dynamic setters
setHtml: function(htmlString) {
this.domNode.innerHTML = htmlString;
},
fillInTemplate: function(args, frag) {
// Getting original HTML element
var source = this.getFragNodeRef(frag);
// Moving all children of original element to
// the desired node of the new component
while(source.hasChildNodes()) {
var node = dojo.dom.removeNode(source.firstChild);
this.domNode.appendChild(node);
}
// Invoking original dojo fillInTemplate() method
dojo.widget.HelloWorld.superclass.fillInTemplate.call(this, args, frag);
}
}
);
以上代码将HTML DOM节点转移到需要的地方,另一种实现方法是设置Widet属性isContainter为true。
动态添加嵌套HTML
如何动态添加嵌套HTML实现方法要根据动态HTML的形式来决定:
l 嵌套HTML作为string提供,通过设置innerHtml属性实现。
l 嵌套HTML作为DOM节点提供,可以使用appendChild方法实现。
以上方式的实现代码如下:
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
setHtml: function(html) {
if (dojo.lang.isString(html)) {
this.domNode.innerHTML = html;
} else if (dojo.dom.isNode(html)) {
// Cleaning whatever was there before
dojo.dom.removeChildren(this.domNode);
// Adding new element
this.domNode.appendChild(html);
} else {
dojo.lang.assert(false, "setHtml called with incorrect type: " + (typeof html));
}
}
}
);
7. Widget标签嵌套Widget标签
嵌套静态Widget标签
有些情况下我们需要实现Widget标签的相互嵌套,例如Dojo TabContainer和Tree标签。要实现这样的Widget标签,你需要设置isContainer为true,而且要在模板中设置attachment point为”containerNode”,代码如下:
dojo.provide("dojo.widget.HelloWorld");
dojo.require("dojo.widget.HtmlWidget");
dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,
{
templateString: "<div dojoAttachPoint=\"containerNode\">${this.text}</div>",
text: "",//default value
isContainer: true
}
);
这种实现是依赖Dojo的,如果需要实现更加复杂的,必须要操作postCreate方法中的Children数组,数组中存了所有嵌套的静态Widget标签。
测试代码:
<html>
<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.Button");
dojo.require("dojo.widget.HelloWorld");
</script>
</head>
<title>Hello World Widget test</title>
<body>
<div dojoType="HelloWorld" text=" ad you can set the text attribute">
<div dojoType="Button">Submit</div>
</div>
<!--<dojo:HelloWorld text="you can set the text attribute"></dojo:button>-->
</body>
</html>
复杂应用请参考Dojo TabContainer和Tree标签。
动态添加Widget标签嵌套
动态添加Widget标签嵌套,需要在HelloWorld.js中实现addChild()方法,重写addChild()方法中还要调用父类的addChild()方法。实现动静态添加Widget标签嵌套的代码如下:
dojo.provide("dojo.widget.HelloWorld");
dojo.require("dojo.widget.HtmlWidget");
dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,
{
templateString: "<div dojoAttachPoint=\"titleNode\">${this.text}" +
"<br/><div dojoAttachPoint=\"containerNode\">"
+ "</div></div>",
text: "",//default value
isContainer: true,
postCreate: function() {
// adding statically
for(var i in this.children) {
this._addRow(this.children[i]);
}
},
addChild: function(child, overrideContainerNode,
pos, ref, insertIndex) {
this._addRow(child);
dojo.widget.HelloWorld.superclass.addChild.call(
this, child, overrideContainerNode);
},
_addRow: function(component) {
this.titleNode.appendChild(
document.createTextNode(component.widgetType));
this.titleNode.appendChild(
document.createElement("br"));
}
}
);
注:经测试发现,即使不实现addChild方法,同样可以动态添加Widget标签嵌套,但是在HtmlWidget类中也没有找到addChild方法的实现,这里有待进一步研究。
测试代码:
<html>
<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.Button");
dojo.require("dojo.widget.Checkbox");
dojo.require("dojo.widget.HelloWorld");
dojo.addOnLoad(function(){
var button = dojo.widget.createWidget("Button",
{caption: "Submit"});
dojo.widget.byId('someID').addChild(button);
var checkbox = dojo.widget.createWidget("Checkbox");
dojo.widget.byId('someID').addChild(checkbox);
});
</script>
</head>
<title>Hello World Widget test</title>
<body>
<div dojoType="HelloWorld" id="someID"></div>
<!--<dojo:HelloWorld text="you can set the text attribute"></dojo:button>-->
</body>
</html>
8. Dojo事件处理
本部分主要介绍使用Dojo的方式处理事件,在阅读本部分之前,最好先了解Dojo事件系统。首先需要在模板中定义dojoAttachEvent=”eventName: eventHandlerMethod;”属性。eventName是标准的DOM事件名称(例如:onClick),eventHandlerMethod则为事件调用函数。修改后的代码如下:
dojo.provide("dojo.widget.HelloWorld");
dojo.require("dojo.widget.HtmlWidget");
dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,
{
templateString: '<div dojoAttachPoint="domNode" dojoAttachEvent="onClick:onClickHandler;">Click here</div>',
onClickHandler: function(e) {
alert("clicked in onClickHandler");
this.onClick(e);
},
onClick:function (e) { //for dojo.event.connect
}
}
);
注:可以在标签中预定义某一事件的函数,如上例中的onClickHandler,同时也可以预留接口让用户绑定自定义函数。
测试代码:
<html>
<head>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.HelloWorld");
function HelloWorld_onClick() {
alert("Node clicked in HelloWorld_onClick");
}
dojo.addOnLoad(function(){
var hello = dojo.widget.byId("someID");
dojo.event.connect(hello, 'onClick', 'HelloWorld_onClick')
});
</script>
</head>
<title>Hello World Widget test</title>
<body>
<div dojoType="HelloWorld" id="someID"></div>
</body>
</html>
总结:
通过对本文的学习,初步了解了Dojo的Widget标签的简单使用和如何实现自定义Widget标签。
【转载地址】http://27091497.blog.163.com/blog/static/11806250200772210458268/
相关推荐
本文主要探讨的是在Dojo框架下进行Widget标签开发的技术细节,旨在帮助开发者更好地理解和利用Dojo构建可重用、模块化的Web组件。 首先,我们要了解什么是Widget。在Dojo中,Widget是UI组件的基础,它封装了HTML...
### 基于HTML5的Dojo Widget开发 #### 一、引言 随着Web技术的不断发展,HTML5已经成为新一代的Web标准,它不仅增强了对JavaScript的支持,还引入了许多新特性,例如音频视频标签、离线存储、Web Socket以及矢量...
在客户端开发中,Dojo ...Dojo 提供了丰富的 API 和 widget 支持,使得开发高效且易于维护的 Web 应用成为可能。通过深入理解 Dojo 的核心概念和用法,开发者可以充分利用其强大功能,构建出高性能、跨平台的应用程序。
例如,设置isDebug为true可以在开发过程中开启调试模式,baseScriptUri可以指定Dojo脚本的基础URI,parseWidgets控制是否自动解析页面中的Widget标签。通过正确配置djConfig,开发者能更好地优化Dojo的性能和功能。 ...
Widget支持自定义样式和事件处理,通过简单标签即可在页面中使用。 **常用包介绍** Dojo 1.1.1 包含Dojo、Dijit和DojoX三个一级命名空间: 1. **Dojo**:核心功能包,提供基础API和服务。 2. **Dijit**:包含所有...
Dojo是一个强大的JavaScript工具包,旨在加速Web应用程序的开发,尤其在处理复杂的交互和动态功能时。为了优化DOJO客户端的性能,以下是一些关键策略: 1. **编译合适的dojo文件**:由于DOJO框架庞大,包含许多不必...
2. 引入Dojo核心库:通过`<script>`标签引入`dojo.js`,这是Dojo的基础文件,可能已经包含了部分常用模块。 3. 声明需要使用的模块:使用`dojo.require()`来引入所需的包或模块,确保它们在运行时可用。 Dojo为了...
随着移动互联网技术的迅猛发展,为iOS等智能终端开发应用程序成为了开发者的重要技能之一。iOS,作为Apple公司推出的移动操作系统,已经广泛应用于iPhone、iPod Touch、iPad等设备中。iOS应用开发主要有原生应用...
- **parseWidgets**:是否自动解析页面中的Widget标签。 - **searchIds**:搜索标识符列表,用于快速定位DOM元素。 - **baseRelativePath**:基础相对路径,用于确定资源的相对位置。 - **libraryScriptUri**:库...
- Widget支持自定义样式表和内部事件处理,用户通过简单的HTML标签即可使用。 - Dojo提供了丰富的Widget组件,如表格、树、菜单等,方便开发者构建用户界面。 3. Dojo、Dijit和DojoX的包和功能: - Dojo核心功能...
通过学习这些核心概念,你可以更好地理解和使用Dojo组件,同时,结合提供的“DojoToolbox.air”,你将获得一个桌面环境下的开发辅助工具,使你的Dojo开发之旅更加顺畅。对于源码分析和工具使用的深入探究,将进一步...
【标签】:Dojo1.rar 【压缩包子文件的文件名称列表】:精通 Dojo.000 本文将深入探讨Dojo框架的核心概念和关键特性,帮助你精通这个强大的工具集。 ### 1. Dojo简介 Dojo 是一个开源的JavaScript工具包,始于...
Dojo还在尝试创建一种新的标签语言DojoML,期望在不改变DojoML和JavaScript语法的情况下,通过不同的渲染方式展现数据,比如SVG或桌面应用。DojoML解析器能接受HTML和SVG输入,从而构建降级响应式应用程序。 在AJAX...
- **`<button>` 标签**:使用 Dojo 的 widget 功能来创建一个按钮,通过设置 `dojoType` 和 `widgetId` 属性,指定了这是一个 Dojo 的 Button 类型的小部件,并为其分配了一个 ID。 2. **JavaScript 部分** ```...
- **熟悉Grails与Dojo的集成**:包括使用Dojo的标签、库和抽象层进行开发。 - **深入控制器与动作**:学习如何使用控制器处理Ajax请求,掌握`render()`方法、构建器和模板等关键概念。 - **获取实用技巧和资源**:...
Dojo 是一个强大的JavaScript工具库,它为Web开发提供了丰富的功能,包括UI组件、数据管理、AJAX交互以及模块化开发等。在这个“dojo例子之布局管理”中,我们将深入探讨Dojo如何帮助我们构建具有高效布局的网页应用...
### Dojo 学习知识点详解 #### 一、Dojo 概述 Dojo 是一个功能强大且灵活的开源 ...以上是对 Dojo 学习笔记中提到的核心概念和操作方法的详细介绍,希望能帮助你更好地理解和掌握 Dojo 这一强大的前端开发框架。
- **加载Dojo核心库**:通过`<script>`标签引入`dojo.js`,这是Dojo的核心文件,通常经过压缩,如果需要查看源码,可以使用未压缩的`dojo.js.uncompressed.js`。 - **声明所需模块**:使用`dojo.require()`来导入...