Learning Dojo - 2. A quick tour

2012-11-09

Learning Dojo-- 2. A quick tour1. Three steps for installing Dojostyle typetext/css@import /d

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 name="code"><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>

热点排行

Web前端

Learning Dojo - 2. A quick tour