Dojo 基础入门(二) -

hanshuai1232000

浏览: 90833 次
性别:
来自: 广州

最近访客更多访客>>

bp_qd

donenei

dearbayd

小高你好

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Dojo 基础入门(二)

博客分类：

dojo

Dojo CSS 编程脚本 HTML

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> 



        <script type="text/javascript" src="../dojoroot/dojo1.0.2/"

                djConfig="parseOnLoad: true, isDebug: true"></script>





        <script type="text/javascript">

            dojo.require("dojo.parser"); 

            dojo.require("dijit.form.Button"); 





        </script>





        <script type="text/javascript">



            dojo.addOnLoad(function(){

                dojo.connect(dojo.byId('helloBtn'),

                'onclick',

                function(){

                    alert("Hello world!");

                }

                )

            });





        </script>

    </head>



    <body class="tundra">

            <button dojoType="dijit.form.Button" id="helloBtn">Say Hello</button>

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

③     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> 



        <script type="text/javascript" src="../dojoroot/dojo1.0.2/"

                djConfig="parseOnLoad: true, isDebug: true"></script>





        <script type="text/javascript">

            dojo.require("dojo.parser"); 

            dojo.require("dijit.form.Button"); 





        </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(){



                var helloBtn=constructHelloBtn();   



                dojo.connect(dojo.byId('helloBtn'),

                'onclick',

                function(){

                    alert("Hello world!");

                }

                )

            });





        </script>

    </head>



    <body class="tundra">

            <div id="btnOutDiv"></div>

    </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容器中用以显示。

分享到：

Dojo 基础入门(三) | Dojo 基础入门(一)

2010-04-02 11:06
浏览 1337
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Dojo 基础入门(二)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Dojo 基础入门(二)

评论

发表评论

相关推荐

Div 属性

Dojo 基础入门(六)

Dojo 基础入门(三)

Dojo 基础入门(一)

Dojo 基础入门(四)

Dojo 基础入门(五)

dojo中的DojoAttachPoint

dojo中的this

dojo中 this.inherited(arguments);

最近访客更多访客>>