Learning Dojo - 2. A quick tour _Web前端

Learning Dojo -- 2. A quick tour
1. Three steps for installing Dojo

<style type="text/css">
    @import "/dojoroot/dijit/themes/tundra/tundra.css";
    @import "/dojoroot/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="/dojoroot/dojo/dojo.js"  djConfig="parseOnLoad: true,isDebug:true"></script>

<body class="tundra">...

<script>
    dojo.require("dojo.parser");  <!-- similar with "import java.util.List" -->
</script>

2. Some userful Controls you may want to try
   TabContainer, ContentPane, ValidationTextBox

3.Ajax
   a. Features -- Cross-Browser Compatibility and prvoiding easy-to-use APIs on top of XHR
   b. Data format in Ajax:
        i.Dojo prefers "Hash Literal" such as {name:"john", sex:"male"}
       ii.Yes, JSON is preferred to XMl
   c. Three Ajax modules
       i.dojo.data -- Deal with data
      ii.dojo.xhr* -- Sending requests/Handling response
     iii.dojo.io.script -- request/response for cross-domain services

    d.XHR Example

              dojo.xhrGet({
         // URL for our proxy that calls the rating service 
         url: "services/someurl.xml",
         content: { query: "someparamer"},      
         timeout: 10000,

         // Set this to parse response into XML
         handleAs: "xml",

         // Function run when web service returns with the answer
         load: function(response) {
           ...
         },
        error: commonError 
     });

e.UI Control Example: dojo.data + widget

      <div dojoType="dojo.data.ItemFileReadStore" 
        jsId="wishStore" url="services/cigar_wish_list.json">
    </div>
    

    
    <table id="grid" dojoType="dojox.grid.Grid" store="wishStore" 
         query="{ wishId: '*' }" clientSort="true">
        <thead>
           <tr>
              <th field="description" width="15em">Cigar</th> 
              <th field="size">Length/Ring</th> 
              <th field="origin">Origin</th> 
              <th field="wrapper">Wrapper</th> 
              <th field="shape">Shape</th> 
           </tr>
        </thead>        
    </table>