文档章节

Dojo 基础入门(二)

w
 waking999
发布于 2017/05/24 13:30
字数 1070
阅读 1
收藏 0

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>

(1) <style type="text/css">

            @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的解析架构。

     djConfigDojo内置的一个全局对象,可以通过它来控制Dojo的行为。在本示例中,isDebugdjConfig的一个属性,设置是否为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>

标识(1)(2)(3)(4)的形式、含义与之前完全一致,这里不再赘述。我们把关注点主要集中在(5)(6)(7)上。

先看(6),标签式实现要确定该组件的dojoType,以及参数,比如id。而编程方式实现只是定义一个html div组件作为将来放置动态生成的dojo组件的外层容器,唯一的id是为了将来查找该div做准备。

(5)处还是dojo.addOnLoad函数,表示在HTML页面加载时执行脚本程序,与之前代码不同的是,多了var helloBtn=constructHelloBtn();语句来构建一个按钮组件的实例。深入到自定义的constructHelloBtn()函数内部,我们可以看到,首先查找到在(6)处定义的div容器,之后新建一个dijit.form.Button的实例,其中设置id,label参数。这里是简单实现,我们可以想见其他诸如参数从某个配置文件动态读取后传入的方式。最后是把生成的该组件实例放入到外层div容器中用以显示。

 

本文转载自:http://blog.csdn.net/kswaking/article/details/2232662

共有 人打赏支持
w
粉丝 0
博文 23
码字总数 0
作品 0
澳大利亚
Dojo入门与dojo项目配置方案(一)

何为dojo Toolkit Dojo Toolkit(以下简称dojo)是一个javascript语言实现的、跨浏览器的DHTML(Dynamic HTML)工具包。Dojo ToolKit包括了构建大规模Ajax驱动的web应用程序所需要的一切。所...

tkorays
2014/01/01
0
0
Dojo Mobile 1.7 入门

最新版的移动 Web 开发框架 Dojo Mobile 1.7,是 Dojo Toolkit 的一个扩展。本文将使您了解如何从主干网址下载 Dojo 1.7,以及如何在您的应用程序中使用 Dojo Mobile。您还将探索它提供的各种...

IBMdW
2012/12/18
4K
8
Dojo入门与dojo项目配置方案(二)

用了一段时间dojo后,渐渐发现它的强大。越来越喜欢它的一个函数是declare。Declare可以用来创建自定义类,以实现模块化设计。正是这种模块化的思想让dojo开发变得简便。这里面我介绍一个doj...

tkorays
2014/01/05
0
0
深入浅出 Javascript API(一)--基本框架

Javascript API是ArcGIS Server 9.3新增的一套API框架,为创建WebGIS应用提供了轻量级的解决方法,在客户端利用ags所提供的服务,就能实现地图应用和地理功能。 还记得ArcIMS Blueviewer示例...

文艺小青年
2017/03/02
0
0
手把手教你Dojo入门

如果仅仅是为了练习Dojo,或者进行测试,可以参考下面的步骤。下面的文件均是在Windows下测试 需要的工具 1 Tomcat服务器:下载地址 选择适合自己的机器型号,即可 2 Dojo的工具包:下载地址 ...

青夜之衫
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

弹性工作制的魔咒

简评:你找到了一份完美的工作 —— 可以提前离开公司,还可以在晚上从家里回复邮件。既然如此,你为什么还会有那么强的负罪感呢? 或许是弹性工作制魔咒在作祟。 很多享受弹性工作制的人会始...

极光推送
2分钟前
0
0
KAFKA介绍(分布式架构)

Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统术语: Kafka将消息以...

明理萝
7分钟前
0
1
os::NodeHandle::subscribe回调函数绑定对象

void Foo::callback(const std_msgs::Empty::ConstPtr& message){}Foo foo_object;ros::Subscriber sub = handle.subscribe("my_topic", 1, &Foo::callback, &foo_object); 参考: ht......

itfanr
9分钟前
0
0
React16.4 开发简书项目 从零基础入门到实战

React16.4 开发简书项目 从零基础入门到实战 关注我的订阅号下载 React16.4 开发简书项目 从零基础入门到实战

蜗牛奔跑
12分钟前
0
0
day57-20180815-流利阅读笔记-待学习

社恐怎么办?这个漫画或许能治愈你 毛西 2018-08-15 1.今日导读 近日,芬兰漫画家卡罗利娜·科尔霍宁创作的绘本《芬兰人的噩梦》在中国大火。一时间书中的主人公马蒂成为了人们茶余饭后热议的...

aibinxiao
16分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部