Dojo 入门

  • Post author:
  • Post category:其他



关于dojo是什么这里不再叙述,大家可以在Google上找找。




这里是想最快速度构建好第一个hello world程序。




1、下载工具包















http://dojotoolkit.org/downloads













页面上有两个download:dojo-release-1.2.3.tar.gz













下载含:Dojo+Dijit+Dojox的。













其中 Dojo 是核心功能包 , Dijit 中存放的是 Dojo 所有的 Widget 组件,而 DojoX 则是一些扩展或试验功能。




2、导入到Web项目中










项目WebRoot下新建一个文件夹dojo,把解压dojo-release-1.2.3.tar.gz后的文件复制到dojo中。










目录结构:


  1. —WebRoot
  2. ——dojo
  3. ———dojo
  4. ———dijit
  5. ———dojox




3、测试是否安装成功:


http://localhost:8080


/


DojoTest


/dojo/dijit/themes/themeTester.html




服务器:http://localhost:8080




项目名称:DojoTest




能够正常访问,表示部署成功。




4、一个实例










项目中创建一个实例,test.html代码如下:




Java代码


  1. <html>







  2. <head>











  3. <title>test</title>











  4. <script

    type=


    “text/javascript”



    src=


    “dojo/dojo/dojo.js”

















  5. djConfig=


    “parseOnLoad:

    true”


    ></script>











  6. <style

    type=


    “text/css”


    >




  7. @import






    “dojo/dijit/themes/tundra/tundra.css”


    ;



  8. </style>











  9. <script

    type=


    “text/javascript”


    >








  10. dojo.require(


    “dojo.parser”


    );








  11. dojo.require(


    “dijit.form.TextBox”


    );








  12. dojo.require(


    “dijit.form.Button”


    );








  13. function

    init()








  14. {










  15. dojo.connect(dijit.byId(


    “mybutton”


    ).domNode,


    “onclick”


    ,


    “login”


    );








  16. }








  17. function

    login()








  18. {












  19. if


    (

    dijit.byId(


    “myname”


    ).value==


    “goodguy”



    &&












  20. dijit.byId(


    “mypassword”


    ).value==


    “goodgoodstudy”


    )











  21. alert(


    “Dojo

    World

    welcome

    you!”


    );












  22. else












  23. {












  24. dijit.byId(


    “myname”


    ).setValue(


    “”


    );












  25. dijit.byId(


    “mypassword”


    ).setValue(


    “”


    );












  26. alert(


    “Dojo

    does

    not

    like

    you!”


    );










  27. }








  28. }








  29. dojo.addOnLoad(init);






  30. </script>







  31. </head>







  32. <body



    class


    =


    “tundra”


    >











  33. UserName:











  34. <input

    type=


    “text”



    length=


    “20”



    id=


    “myname”

















  35. dojoType=


    “dijit.form.TextBox”


    >











  36. <br>











  37. PassWord:











  38. <input

    type=


    “password”



    length=


    “20”



    id=


    “mypassword”

















  39. dojoType=


    “dijit.form.TextBox”


    >











  40. <br>











  41. <div

    id=


    “mybutton”



    dojotype=


    “dijit.form.Button”


    >















  42. Submit











  43. </div>







  44. </body>



  45. </html>





Java代码





  1. djConfig=


    “parseOnLoad:

    true”










表示在页面加载完成以后,启用 Dojo 的解析模块对页面中的 Dojo 标签属性(Dojo 标签属性是指由 Dojo 定义的一些标记,这些标记只有在被处理以后,才能为浏览器识别执行)进行解析。djConfig 是使用 Dojo 页面的一个全局配置参数。通过对这个参数不同的赋值,可以控制页面中 Dojo 的解析模块是否运行, Dojo 的调试模块是否工作等。




Java代码





  1. @import





    “dojo_path/dijit/themes/tundra/tundra.css”








表示引入 Dojo tundra 风格的层叠样式表。




Java代码





  1. dojo.require(


    “dojo.parser”


    )






表示引入 Dijit 的解析功能模块。该模块将会把 Dojo 标签属性替换成浏览器可以识别执行的标记。需要与 djConfig=”parseOnLoad:true” 相区别的是,djConfig=”parseOnLoad:true” 表示确定在页面加载完成以后执行解析功能,但解析功能模块的引入要靠 dojo.require(“dojo.parser”) 来实现。




Java代码





  1. dojo.require(


    “dijit.form.TextBox”


    )










  2. dojo.require(


    “dijit.form.Button”






    )








表示引入 Dojo 风格的文本输入框和按钮的功能模块。




Java代码





  1. dojo.connect(dijit.byId(


    “mybutton”


    ).domNode,



    “onclick”


    ,



    “login”






    )







表示将按钮的点击事件和 login 函数联系起来,当点击 id 为 mybutton 的按钮时,执行 login 函数。




Java代码





  1. dijit.byId(


    “myname”


    ).setValue(


    “”






    )







表示调用 id 为 myname 的 Dojo 文本框的 setValue 函数,将文本框里面的内容清为空。




Java代码





  1. <input

    type=


    “text”



    length=


    “20”



    id=


    “myname”



    dojoType=


    “dijit.form.TextBox”






    >









中的 dojoType=”dijit.form.TextBox” 表示在页面中文本输入框是 Dojo 风格的。需要注意的是,通过声明 dojoType=”dijit.form.TextBox” 这种方式来实现某些 Dojo 功能的使用,其表现形式上如同声明一个 HTML 标签的属性(如同 width=”10px”),因此在本文中称其为 Dojo 标签属性。在页面加载完成以后,Dojo 的解析模块会将 Dojo 标签属性转化为浏览器能够识别执行的标记。






5、运行测试。