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>