Monthly Archives: May 2010

Learning Dojo — 7. dojo.data

1. It’s
reading/writing data,  of course

2.
Members

  a.
Attributes

    i. data store: get data from data source

   ii. data source: some url

  iii. item = row

        identity = id

        label   = the "name" of an item (e.g. "companyName = ‘IBM’ ") 

        attribute/value = column/value

  b.
Operations

        query = where sql operation

       fetch  = get data

        request = sort/limit

3.
4 features

   a. Read

   b. Write

   c. Identity => Random Access by Id

   d. Notification => hook the data with events

A widget example

  

 
    <div dojoType="dojo.data.ItemFileReadStore" 
         url="datasources/genetox.json"
         jsId="genetoxStoreDeclarative"
         />   



<div dojoType="dijit.form.FilteringSelect"
                store="genetoxStoreDeclarative"
                searchAttr="docno"
                labelAttr="substance"
                name="subname"
                query="{ date: '1995*' }"
                />

Learning Dojo — 5. Remote Scripting (AJAX)

1.
Remote Scripting is not just AJAX . There are 3 ways.

   a.XHR(AJAX) -> Same-Origin Limited

   b.iframe    -> Same-Orignin Limited; It can post a file.

   c.Loading a script element ->  Not limited to Same-Origin Policy

2.
XHR with dojo

     a. Example

     dojo.xhrGet({
    url: "demo/id2",
    handleAs: "json",
    handle: handler4
  });

     b. Some notes

        i.handleAs: text/json/xml

       ii.preventCache

      iii.It can also cooperate with forms

3.
Loading a script element

    a.dojo supports this with JSONP

    b.API: dojo.io.get()… The syntax is almost the same with XHR

4.
iframe

    a.How does it work?

         i.A hidden iframe is used

        ii.The handler is triggerd for "onload" event of this iframe

       iii.it always returns HTML content

    b.How does dojo help with this?

        I don’t care for now

  

    

Learning Dojo — 4. DOM APIs

1.
Select Node API

  a.dojo.byId()

  b.dojo.query("div.question p")

      i.The parameter here should apply to CSS3 Selector

     ii.This function always returns a NodeList, even if there is only one node selected

2.
Attributes Operation

   dojo.attr(), dojo.hasAttr(), dojo.removeAttr() …

3.
CSS Operation

  dojo.style(), dojo.hasClass(), ….

4.
Insert/Remove Nodes

   dojo.place(newNode, parentNode, "last");…

Tips

  1.You may find
dojo.toggleClass very usefule

   if (error) {
  dojo.addClass(someNode, "displayAsError");
} else {
  dojo.removeClass(someNode, "displayAsError");
}

   //becomes...

  dojo.toggleClass(someNode, "displayAsError", error);

Learning Dojo — 3.3 Asynchronous Programming

1.
Handling dom events

  a.Define the event handler

        function alertSomeEvent(){
  		alert("someEvent");
  	}

  b.Connect some event to the handler

   	function connect(){
  	    dojo.connect(dojo.byId("someButton"),"click", alertSomeEvent);  	   
  	}

  c.Register this connection when dom tree initialization is done

        

dojo.addOnLoad(connect);

2.
Handling user-defined events

   It’s similar with handling dom events, only that the events here user-defined functions

3.
Publish-Subcribe Framework

    <!--I'm going to publish this topic when I am clicked -->
    <button onclick="javascript:dojo.publish('someTopic')">publish</button>


    //A topic handler will handle this topic
     dojo.subscribe("someTopic", handleSomeTopic);

    //And it will handle the topic like this,
       	function handleSomeTopic(){
  	  alert("some topic is published");
  	}}


  

4.
Advanced Topic

   Do the research by yourself if you need them

    a.Bubbling/Capturing  (Event Propagation)

    b.dojo.Deferred  (multi-thread programming)

Learning Dojo — 3.2 OO APIs

1. dojo.hitch:  Takes a function as the parameter and execute it

   var alerter = {
      doAlert: function(){
         alert("something");
      }
   }

   dojo.hitch(alerter, doAlert);

2. Array methods: dojo.forEach(), dojo.every(), and so on

3. Type methods: dojo.isString(), dojo.isArray()…

4. Object Coping: dojo.mixin(), dojo.clone()…

Learning Dojo — 3.1 Core features of the Dojo language

1. Module(Package) name <==> the javascript file’s  path/filename

2. A module is always DEFINED in a single file, althought its implemenation can go into several files

3. The "dojo" module has to be loaded before any other modules, and it’s not loaded by "dojo.require", but by the script tag

   

<script type="text/javascript" src="xxx/dojo/dojo.js"/>

4. You are required to only load those modules that you are going to use

5. To use non-standard Dom attributes or not to use them? This is a question

  

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>

      

Learning Dojo — 1. Introduction

Notes for reading ‘
Mastering Dojo

===========================================

1. We’ve had wonderful technologies for server-side development, and
now it is the turn of the client-side.

2.Dojo is such a framework, which will
dismantle the gap between browser-based applications and desktop applications.

3.Features of Dojo

  a.
Fix browser defects, such as browser compatibility problems and memory leaks in IE

  b.
HTML UI Controls

  c.
Dom Querying

  d.
Packaging (like Java)

4.Three parts of Dojo

   a.
Core Dojo

   b.
Djijt  — UI Controls

   c.
Dojox  — Extension, including more controls and something else.