我为人人,人人为我

PLM,PDM制造业的制胜法宝
posts - 16, comments - 9, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

Dojo HelloWorld实现

Posted on 2007-07-29 13:17 Glen 阅读(1324) 评论(3)  编辑  收藏 所属分类: Ajax学习

Dojo HelloWorld实现

本文是对dojohelloworold的翻译和学习原文地址(http://dojo.jot.com/WikiHome/HelloWorld)。

1.安装Dojo

首先请创建工程HelloWorldTutorial,再创建如下的目录

    - HelloWorldTutorial/

    |

    |---- js/

          |

          ---- dojo/

 

然后请下载dojo(http://dojotoolkit.org/download/ )并将其解压缩到dojo目录下,这样在项目中引用成功了,安装后目录如下

    - HelloWorldTutorial/

    |

    |-- js/

          |

          -- dojo/

               |

               -- build.txt

               -- CHANGELOG

               -- demos

                    |

                    -- ..

               -- dojo.js

               -- dojo.js.uncompressed.js

               -- iframe_history.html

               -- LICENSE

               -- README

               -- src/

                    |

                    -- ..

 

2.开始Dojo之旅

现在我们需要创建一个引用dojoHelloWorld.html页面,代码片段如下:

<html>

    <head>

       <title>Dojo: Hello World!</title>

       <!-- SECTION 1 -->

       <script type="text/javascript" src="js/dojo/dojo.js"></script>

    </head>

 

    <body>

    </body>

</html>

 


s
cript脚本部分负责引用所有dojo的基础函数。

 

3.创建一个Widget按钮

创建一个“Hello World!”的widget按钮,而且我们可以通过默认(mouseOut, mouseOver, and mouseDown)鼠标事件来改善用户体验。

SECTION 2的代码片段让dojo加载资源,dojo.requirejavaimport功能相似。

<script type="text/javascript">

            // Load Dojo's code relating to widget managing functions

            dojo.require("dojo.widget.*");

 

            // Load Dojo's code relating to the Button widget

            dojo.require("dojo.widget.Button");

</script>

 

前一句dojo.require代码用来加载dojo的管理功能函数,而并加载dojo.widget下所有的功能。而第二句代码仅仅是加载Button控件。(注:但是通过测试发现无论注释掉那一句,页面功能都不受影响)。

将下面代码加入到html页面的body元素中:

 

<button dojoType="Button" widgetId="helloButton">Hello World!</button>

 

dojoType是关键属性,通过设置不同的属性值控制dojo的处理此控制的方式,这里我们使用的是“Button”,但是我同样可以使用input控件。只要dojoType存在,着两种方式的效果是一样的。使用input控件时,按钮的text值必须通过caption属性来设定。

注:示例中使用的widgetId属性是可选,如果没有设置widgetIdDojo同样识别id

 

4.事件绑定

 

Dojo的事件系统能更有效的绑定事件。首先必须加载事件包,将上面的SECTION 2 处的代码改成:

  

<!-- SECTION 2 -->

    <script type="text/javascript">

        dojo.require("dojo.event.*");

       dojo.require("dojo.widget.*");

       dojo.require("dojo.widget.Button");

    </script>

 

 

 

写一个简单的函数共button事件调用,代码如下:

 

function helloPressed()  {

            alert('You pressed the button');

        }

 

你理所当然的会想到通过onclick属性来绑定事件,但是这样做却一点效果也没有,不用担心,dojo当然会有自己的一套办法。为什么要加载event包,作用就是要这里体现,代码如下:

   

function init(){

       var helloButton = dojo.widget.byId('helloButton');

         dojo.event.connect(helloButton, 'onClick', 'helloPressed')

    }

    dojo.addOnLoad(init);

 

最后一句的代码和onload的时间一样,加上这句才不会让你前功尽弃。

Dojo加载了init函数后,页面才会正确的展示给大家。Dojo解析后的页面,原本的dom模型已被修改,只有通过dojo.widget.byId才能获取页面元素。

 

5.读取服务器端数据

通过alert弹出信息只是万里长征的第一步,后面的风景的跟美丽。怎样从服务器端取出数据才是我们最关心的功能,通过使用dojo.io.bind包,我们可以方便的实现这样的功能(bind包详细信息请参考http://dojotoolkit.org/docs)

回掉函数用来处理服务器端的返回的数据,代码如下:

 

function helloCallback(type, data, evt){

        if (type == 'error')

          alert('Error when retrieving data from the server!');

        else

          alert(data);

      }

 

三个参数都很重要,缺一不可! Type表示请求成功与否,成功:'load' ,失败:'error'data保存了服务器端返回来的数据;第三个参数保存了dojo的事件对象。下一步要设定服务端请求,修改helloPressed函数,代码如下:

 

function helloPressed(){

         dojo.io.bind({

                       url: 'response.txt',

                       handler: helloCallback

                    }))

 }

 

上面的代码设定了请求的url及回调函数。

最后新建 response.txt. 输入'Welcome to the Dojo Hello World Tutorial'.执行效果如图

 

6.使用GET方法向服务端发送数据

获取静态数据还是相对简单,但是现实生活中的做用不大。因此我们要向服务端发送点什么,才更具有说服力。在html文件的body节点中添加如下代码:

 

<form id="myForm" method="get">

Please enter your name: <input type="text" name="name">

</form>

 

在同一目录下新建HelloWorldResponse.jsp,代码如下:

<%

  response.setContentType("text/plain");

%>

Hello <%= request.getParameter("name") %> , welcome to the world of Dojo!

再一次修改helloPressed函数

function helloPressed(){

       dojo.io.bind({

                       url: 'HelloWorldResponse.jsp',

                       handler: helloCallback,

                       content: {name: dojo.byId('name').value }

                    });

    }

 

以上代码中加入了新的属性-contentcontent用来向服务端发送任意参数值(name:参数名称,dojo.byId('name').value:参数值),参数名称可以任意给定。

 

7.使用POST方法向服务端发送数据

真实的应用中都是通过表单来提交一组数据,这时我们就需要使用POST方法。实现很简单,首先将Form中方法改成POST,再修改helloPressed方法就大功告成了,代码如下:

function helloPressed(){

       //绑定要请求的urlform

        dojo.io.bind({

                       url: 'HelloWorldResponsePOST.jsp',

                       handler: helloCallback,

                       formNode: dojo.byId('myForm')

                    });

    }

 

 

总结

通过对dojo经典案例helloworld的学习和翻译,算是dojo初步入门。



做人简单一点好


评论

# re: Dojo HelloWorld实现  回复  更多评论   

2007-08-08 01:20 by lizhenjie
真的非常感谢

# re: Dojo HelloWorld实现  回复  更多评论   

2007-10-19 16:34 by 111
受益匪浅·~~好东西·~

# re: Dojo HelloWorld实现  回复  更多评论   

2009-05-14 13:31 by 李若修
dojo.io.bind();
这个有很大的问题,1.0以后的版本和以前有很大区别了,看了DEMO之后才看到,所以说你这个helloworld基本淘汰了
希望你能更改内容

只有注册用户登录后才能发表评论。


网站导航: