Dojo entry

About dojo What is not described here, you can find it on Google.
Here is to build it as fast as possible The first hello world program.
1. Download the toolkit
http://dojotoolkit.org/downloads
< span style="color:rgb(64,64,64); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(214,200,251)"> There are two downloads on the page: dojo-release-1.2.3.tar.gz
The download contains: Dojo+Dijit+Dojox.
Among them, Dojo is the core function package, Dijit stores all the Widget components of Dojo, and DojoX is some extended or experimental functions.
2, import into the Web project< /span>
Create a new folder dojo under the project WebRoot, and copy the files after decompression dojo-release-1.2.3.tar.gz to dojo.
Directory structure:

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


3. Test whether the installation is successful: http://localhost:8080 / DojoTest /dojo/dijit/themes/themeTester.html
Server: http://localhost:8080
Project name: DojoTest
Can be accessed normally, which means the deployment is successful.
4. An example
Create an instance in the project, the test.html code is as follows:

Java code
  1. < wbr>
  2. test
  3. < li style="margin:0px 0px 0px 30px; padding:0px; border:0px; list-style:decimal"> type=“text/ javascript”src=“dojo/dojo/dojo.js”

  4. djConfig=“parseOnLoad: true”>
  5. < wbr>type=“text/css” span>>
  6. @import“dojo/dijit/themes/tundra/tundra.css”; span>
  7. type=“text/javascript”>
  8. dojo.require(“dojo.parser”);< wbr>
  9. dojo.require(“dijit.form.TextBox” );
  10. < wbr>dojo.require(“dijit.form.Button”);
  11. functioninit()< wbr>
  12. {
  13. dojo. connect(dijit.byId(“mybutton”).domNode,“onclick” span>,“login” );
  14. }
  15. functionlogin()
  16. {
  17. if( dijit.byId(< span style="word-wrap:normal; word-break:normal">“myname”).value==“goodguy”&&
  18. dijit.byId(“mypassword”).value==“goodgoodstudy”)
  19. alert(“DojoWorldwelcomeyou!”);< wbr>
  20. else
  21. { wbr>
  22. dijit.byId(< span style="word-wrap:normal; word-break:normal">“myname”).setValue( “”);
  23. dijit.byId(“mypassword”).setValue(“”);
  24. alert(“Dojodoesnotlikeyou!”);
  25. }
  26. }
  27. dojo.addOnLoad(init);
  28. < li style="margin:0px 0px 0px 30px; padding:0px; border:0px; list-style:decimal">

  29. < wbr>class=“tundra” >
  30. UserName:
  31. type=“text”length=“20”id=“myname”< /li>
  32. dojoType=“dijit.form.TextBox”> li>

  33. PassWord:
  34. type=“password”< wbr>length=“20” id=“mypassword”
  35. wbr>dojoType=“dijit.form.TextBox”>

  36. span>
  37. id=“mybutton”dojotype=“dijit.form.Button”>
  38. < wbr>Submit

  • span>


  • Java code
    1. djConfig=“parseOnLoad:true”

    < span style="color:rgb(64,64,64); font-family:simsun; font-size:14px; line-height:21px; background-color:rgb(214,200,251)"> means that after the page is loaded, The Dojo-enabled parsing module will check the Dojo tag attributes in the page (Dojo tag attributes refer to some tags defined by Dojo). Remember, these tags can only be parsed for browser recognition and execution after being processed. djConfig is a global configuration parameter for using Dojo pages. By assigning different values ​​to this parameter, you can control whether the Dojo parsing module in the page is running, whether the Dojo debugging module is working, and so on.

    Java code
    1. @import“dojo_path/dijit/themes/tundra/tundra.css” span>

    indicates the introduction of Dojo tundra style cascading style sheets.

    Java code
    1. dojo.require(“dojo.parser”)

    represents the introduction of Dijit’s analytical function module. This module will replace the Dojo tag attributes with tags that the browser can recognize and execute. What needs to be different from djConfig=”parseOnLoad:true” is that djConfig=”parseOnLoad:true” means that the parsing function will be executed after the page is loaded, but the introduction of the parsing function module depends on dojo.require(“dojo.parser”) to realise.

    Java code
    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. 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、运行测试。

    Java代码
    1.   
    2.        
    3.         test   
    4.         type=“text/javascript” src=“dojo/dojo/dojo.js”  
    5.             djConfig=“parseOnLoad: true”>   
    6.         type=“text/css”>   
    7. @import “dojo/dijit/themes/tundra/tundra.css”;   
    8.   

    9.         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.       ifdijit.byId(“myname”).value==“goodgu y” &&    
    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.      
    31.        
    32.     class=“tundra”>   
    33.         UserName:   
    34.         type=“text” length=“20” id=“myname”  
    35.             dojoType=“dijit.form.TextBox”>   
    36.         
        
    37.         PassWord:   
    38.         type=“password” length=“20” id=“mypassword”  
    39.             dojoType=“dijit.form.TextBox”>   
    40.         
        
    41.         id=“mybutton” dojotype=“dijit.form.Button”>   
    42.             Submit   
    43.         

      

  •        
  •   
  • Java代码

    Java代码
    1. djConfig=“parseOnLoad: true”  

    Java代码

    Java代码
    1. @import “dojo_path/dijit/themes/tundra/tundra.css”  

    Java代码

    Java代码
    1. dojo.req uire(“dojo.parser” 

    Java代码

    Java代码
    1. dojo.require(“dijit.form.TextBox”   
    2.  dojo.require(“dijit.form.Button”)   

    Java代码

    Java代码
    1. dojo.connect(dijit.byId(“mybutton”).domNode, “onclick”“login” )   

    Java代码

    Java代码
    1. dijit.byId(“myname”).setValue(“”)   

    Java代码

    Java代码
    1. type=“text” length=“20” id=“myname” dojoType=“dijit.form.TextBox”>   

    Java代码