Dojo 基础入门(二)
2008-03-31 12:51
295 查看
1. 简单示例
我们对任何事物的了解都是从感性认识开始的,所以在这里我们也用一个经典的“Hello world!”示例来表现Dojo的使用。1.1. 页面样式
很简单,页面上一个按钮,点击按钮后,跳出一个显示Hello World信息的对话框。
1.2. 代码分析
<html> <head> <title>Hello World</title> <style type="text/css"> @import "../dojoroot/dojo1.0.2/dijit/themes/tundra/tundra.css"; @import "../dojoroot/dojo1.0.2/dojo/resources/dojo.css" </style> <!--(1)--> <script type="text/javascript" src="../dojoroot/dojo1.0.2/" djConfig="parseOnLoad: true, isDebug: true"></script><!--(2)--> <script type="text/javascript"> dojo.require("dojo.parser"); <!--(3)--> dojo.require("dijit.form.Button"); <!--(4)--> </script> <script type="text/javascript"> dojo.addOnLoad(function(){ dojo.connect(dojo.byId('helloBtn'), 'onclick', function(){ alert("Hello world!"); } ) });<!--(5)--> </script> </head> <body class="tundra"> <button dojoType="dijit.form.Button" id="helloBtn">Say Hello</button><!--(6)--> </body> </html> |
@import "../scripts/dojo-1.0.2/dijit/themes/tundra/tundra.css";
@import "../scripts/dojo-1.0.2/dojo/resources/dojo.css"
</style>
引入css样式表的定义文件,示例使用的是dojo自带的css样式。可替换成我们自定义的样式文件。
(2) <script type="text/javascript" src="../scripts/dojo-1.0.2/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
① 确定dojo.js文件的相对路径,由此确定使用dojo的方式编程,这是必需的。
② djConfig="parseOnLoad: true" 与(3)中的 dojo.require("dojo.parser");一起配合来使页面能使用Dojo的解析架构。
③ djConfig是Dojo内置的一个全局对象,可以通过它来控制Dojo的行为。在本示例中,isDebug是djConfig的一个属性,设置是否为debug模式,如果为真,则console.debug的输出有效,这在开发时很有用,在发布时建议设置为false。
(4) dojo.require("dijit.form.Button");声明将要使用的dojo的组件类型。类似Java中的import语句
(5) <script type="text/javascript">
dojo.addOnLoad(function(){
dojo.connect(dojo.byId('helloBtn'),
'onclick',
function(){
alert("Hello world!");
}
)
});
</script>
① dojo.addOnLoad表示在HTML页面加载后执行脚本程序
② dojo.connect用于连接事件处理器(某一个函数)到一个元素或者一个对象。
(6) <button dojoType="dijit.form.Button" id="helloBtn">Say Hello</button>这是在页面中定义一个要使用的按钮控件,由dojoType属性指明可复用到的dojo组件类型是dijit.form.Button
1.3. 实现方式
1.3.1. 标签式实现
在页面中声明组件的方式可以像上面的示例一样,直接在标签中用dojoType对应的属性值来表明该组件对应的类型以及可实现的功能。除此之外还有另一种实现方式,编程实现。
1.3.2. 编程实现
标签式实现需要在页面开发的时候,就要确定组件的类型、传入的参数,编程方式与之相比较就具有了更大的灵活性,参数可以动态生成以及页面与业务逻辑分离等多种好处。下面我们用编程方式来举例来实现之前Hello World页面同样的功能。
<html> <head> <title>Hello World</title> <style type="text/css"> @import "../dojoroot/dojo1.0.2/dijit/themes/tundra/tundra.css"; @import "../dojoroot/dojo1.0.2/dojo/resources/dojo.css" </style> <!--(1)--> <script type="text/javascript" src="../dojoroot/dojo1.0.2/" djConfig="parseOnLoad: true, isDebug: true"></script><!--(2)--> <script type="text/javascript"> dojo.require("dojo.parser"); <!--(3)--> dojo.require("dijit.form.Button"); <!--(4)--> </script> <script type="text/javascript"> function constructHelloBtn(){ var btnOutDiv=dojo.byId("btnOutDiv"); helloBtnDiv=document.createElement("div"); var helloBtn=new dijit.form.Button({id:"helloBtn",label:"Say Hello"},helloBtnDiv); btnOutDiv.appendChild(helloBtn.domNode); return helloBtn; } dojo.addOnLoad(function(){<!--(5)--> var helloBtn=constructHelloBtn(); <!--(7)--> dojo.connect(dojo.byId('helloBtn'), 'onclick', function(){ alert("Hello world!"); } ) }); </script> </head> <body class="tundra"> <div id="btnOutDiv"></div><!--(6)--> </body> </html> |
先看(6),标签式实现要确定该组件的dojoType,以及参数,比如id。而编程方式实现只是定义一个html div组件作为将来放置动态生成的dojo组件的外层容器,唯一的id是为了将来查找该div做准备。
(5)处还是dojo.addOnLoad函数,表示在HTML页面加载时执行脚本程序,与之前代码不同的是,多了var helloBtn=constructHelloBtn();语句来构建一个按钮组件的实例。深入到自定义的constructHelloBtn()函数内部,我们可以看到,首先查找到在(6)处定义的div容器,之后新建一个dijit.form.Button的实例,其中设置id,label参数。这里是简单实现,我们可以想见其他诸如参数从某个配置文件动态读取后传入的方式。最后是把生成的该组件实例放入到外层div容器中用以显示。
相关文章推荐
- Dojo 基础入门(五)
- Dojo 基础入门(六)
- JAVA基础之dojo快速入门
- Dojo 基础入门(一)
- Dojo 基础入门(三)
- Dojo 基础入门(四)
- 8-Python3从入门到实战—基础之数据类型(集合-Sets)
- HTML基础入门
- JAX-RS入门 一 :基础
- github+hexo搭建自己的博客网站(一)基础入门
- 【广告算法工程师入门 15】机制设计-基础知识
- python入门基础教程推荐
- Dojo入门:初识Dojo
- java注解入门的简单介绍与示例(框架基础)
- Vue入门基础(火柴)
- 【存储入门必读】存储基础知识
- 蓝鸥iOS从零基础到精通就业-OC语言入门 对象内存管理1
- 微信小程序入门基础(2)—视图层
- Ajax 对象 xmlhttp --dojo Quick Start/dojo入门手册2
- [nodejs入门]第一篇,javascript基础(1)