Learning Dojo — 2. A quick tour – CHEN Jian's Java Blog

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>

Leave a Comment Cancel Reply