Dojo Quick Start

The previous article, first turn over the dine, will only be updated here ~ ~ ~

Original Author: Kenny reprint please indicate from http://www.fyting.com, thank you

At the beginning of 2006, Dojo was very concerned about its development when he was 0.22, and could not be used in actual projects. As a result of the lack of documentation, it is always daunting to have a description of dojo. So far, the first Hello world has done a lot of things, such as widget components, custom script tags, plus what CSS files to introduce, Djconfig, Dojo.require and so on, so confusing, so complex, in the end dojo how to use it. I just want to think of dojo as a common JS class library, just like prototype. OK, let's talk less and see how to use Dojo. first, the introduction of Dojo.js

There are 4 subdirectories in the Dojo's release package.
Suppose you are like this directory structure:

Project
|
+–dojo-lib
| |
| +–dijit
| +–dojo
| +–dojox
| +–util
|
+–dojo_hello_world.html

The file to be introduced is the dojo.js in the subdirectory named "Dojo."

<script type= "Text/javascript" src= "/dojo-lib/dojo/dojo.js" >
</script>

start using Dojo

Now start using Dojo's first function: Dojo.byid
Dojo.byid is equivalent to the usual document.getElementById

<input type= "text" name= "username" id= "username" value= "Mark"/> <script "type=" 
> 
var username = Dojo.byid (&apos;username&apos;). Value 
alert (username); 
</script>

OK, is not the same as the ordinary JS library, without any mystery. Dojo.addonload

Now we want to deal with something in window.onload, like Ext.onready, which is called Dojo.addonload in Dojo.

Dojo.addonload (function () {   
    var username = Dojo.byid ('username'). Value   
    alert (username);   
});

Dojo.connect

Ok,window.onload is done, so how do you listen to normal DOM events? No problem, strong dojo.connect.

<script type= "Text/javascript" >   
function SayHello (event)   
{   
    alert ("Hello");   
}   
Dojo.addonload (function () {   
    var btn = Dojo.byid (&apos;hello&apos;);   
    Dojo.connect (btn, "onclick", SayHello);   
};   
</script>   
<input type= "button" id= "Hello" value= "Hello"/>

is the Event.observe ($ (' Btnadd '), "load", Doadd) similar to prototype?
The most annoying thing with prototype is that long bindaslistener, with Dojo.conncect, you can specify the current scope in the third parameter:

var name = "Mark"  
function SayHello ()   
{   
    alert ("Hello" + this.name);   
}   
var obj = {   
    name: "Karl"  
}   
dojo.addonload (function () {   
    var btn = Dojo.byid ('hello& apos;);   
    Dojo.connect (btn, "onclick", Obj,sayhello);/note the third and fourth parameters of this line   
});

OK, click on the button to output: Hello Karl
Here Dojo.connect's third argument becomes scope, and the handler function is the fourth, which actually
Dojo.connect (btn, "onclick", SayHello);
And
Dojo.connect (btn, "onclick", Null,sayhello);
Same.
More complex usage here does not introduce, write too much the more complicated, and then write the article in detail Dojo.connect, here only briefly describes how to bind DOM events. XMLHTTP Dojo.xhrget

OK, this is a simple DOM operation, and then the traditional Ajax project-xmlhttp
When using XMLHTTP, you need to be aware of the coding problem, so let dojo default to bind to Utf-8. Simply, you just need to change the label when you introduce Dojo.js:

<script type= "Text/javascript" src= "/dojo-lib/dojo/dojo.js" djconfig= "isdebug:true,bindencoding:&apos;" utf-8&apos; " >
</script>

A Djconfig property, very simple, the first isdebug is to say whether to open the Firebug console, the second is XMLHTTP use of the encoding. The second is the focus, the set is once and for all.

This time we are going to click on the Hello button and issue a XMLHTTP request:

function SayHello () {   
    dojo.xhrget ({   
        URL: "http://localhost/hello/sayHello.jsp",   
        handleas: "Text"   
        , Load:function (responsetext)   
        {   
          alert (responsetext);   
          Dojo.byid ("Divhello"). InnerHTML = ResponseText;   
        },   
        error:function (response)   
        {   
          alert ("error");   
    });   
}   
Dojo.connect (btn, "onclick", SayHello);

Look, enough at a glance.

URL is the URL ...
Handleas the contents of the acquisition as Text/html
callback function when load succeeds
callback function when error fails

What if you want to pass in the parameters?

var params = {   
    username:' Mark'   
    id:'105'  
}   
Dojo.xhrget ({   
    URL: "http://localhost/hello/sayHello.jsp",   
    content:params,   
    //...   
});

Note that the content parameter, the parameter you want to pass in is an associative array/object,dojo will automatically parse the arguments out and use the Post method.
Dojo.xhrget-> Dojo.xhrpost
and the rest.
Dojo.xhrput
Dojo.xhrdelete JSON

So if I want to change the type of data I get, like JSON. Xml.
Modify Handleas, such as:
Handleas: "JSON"

Dojo.xhrget ({   
    URL: "http://localhost/hello/sayHello.jsp",   
    handleas: "JSON",   
    load:function (JSON)   
    {   
        alert (json.name)   
    }   
    //...   
});

Handleas: "json-comment-filtered" uses the annotation notation/**/to include the JSON data, recommending the use of the
Handleas: "Json-comment-optional" first tries to use Json-comment-filtered, if you execute an error, then use the normal JSON format to parse
Handleas: "JavaScript" Dojo tries to execute the data returned by the server as JavaScript and passes the result as a parameter to the load function
Handleas: "XML" XML object. Note that the XML in Mozilla and IE is different, and the recommended use of Sarissa

As for the conversion of JSON and object, in http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/ Other-miscellaneous-function/converting-json has a form that should be able to find what you need. want to submit a form directly

That's it:

Dojo.xhrget ({   
    URL: "http://localhost/hello/sayHello.jsp",   
    form:dojo.byId ("Form1")   
    //...   
});

To solve the notorious caching problem under IE, Preventcache will help you automatically generate a timestamp

Dojo.xhrget ({   
    URL: "http://localhost/hello/sayHello.jsp",   
    preventcache:true  
    //...   
});

Dojo.hitch Scope/context

Since the XMLHTTP is used, a common problem is the scope/context of the callback function. In prototype, MooTools we often function.bind, in dojo, the things that do the same thing are called Dojo.hitch

var handler = {name:' Mark&apos, Execute1:function () {dojo.xhrget ({url: "Http://localhost/hello/sayHello . JSP, Handleas: "Text", Error:function (text) {CONSOLE.D   
                IR (this);   
    alert (this.name);//output Undefined, here this represents the current IO parameter}//...});   
    }, Load:function (text) {alert (this.name);   
            }, Execute2:function () {dojo.xhrget ({url: "http://localhost/hello/sayHello.jsp") Handleas: "Text", Error:dojo.hitch (this, "load")//output Mark//error:dojo.hitch (this , this.load);   
    As with the previous sentence, you know why you use the method name instead of the reference? Save a long string of this.xxx//...}; }
}

OK, the basic things solved, there are many commonly used functions are not introduced, such as: Dojo.query,dojo.foreach,dojo.marginbox,dojo.contentbox and so on
This is nothing. Turn the Dojo.js.uncompressed.js source code, Dojo's documentation is nothing good to expect. object oriented, defining class

Next, let's look at dojo.
How to define class

：

Dojo.declare ("Customer", null,{   
    constructor:function (name) {   
        this.name = name;   
    },   
    say:function () {    
        alert ("Hello" + this.name);   
    },   
    getdiscount:function () {   
        alert ("Discount is 1.0");   
    }   
)   
;
var customer1 = new Customer ("Mark");   
Customer1.say ();

Declare has three parameters:

First Class name
A reference to the second parent class
A third ...

the name of the constructor is called "Construnctor." Let's take a look at how to inherit:

Dojo.declare ("VIP", customer,{   
    getdiscount:function () {   
        alert ("Discount is 0.8");   
    }   
);   
var VIP = new VIP ("Mark");   
Vip.say ();   
Vip.getdiscount ();

So, how do you invoke the method of the parent class? Using the This.inherited method

Dojo.declare ("VIP", customer,{   
    getdiscount:function () {   
        this.inherited (arguments);   
        This.inherited ("Getdiscount", arguments);   
    }   
);

about Constructors:

The parent class constructor is always invoked automatically, so look at the following example:

Dojo.declare ("Customer", null,{   
    constructor:function (name) {   
        this.name = name;   
        Alert ("base class");   
    },   
    say:function () {   
        alert (this.name);   
    }   
})
; Dojo.declare ("VIP", customer,{   
    constructor:function (age) {   
        this.age = age;   
        Alert ("Child Class");   
    },   
    say:function () {   
        alert ("Name:" + this.name);   
        Alert ("Age:" + this.age);   
    }   
});
var VIP = new VIP ("123");//1   
Vip.say ();//2

1 will print out two alert statements, first the constructor of the parent class, and then the subclass.
2 will output "Name:123″" Age:123″

Personally, this feature is not good, because JavaScript in this weak type of language, it is impossible to determine the constructor in the parameters are passed to whom, such as the above statement execution, name= "123″,age=" 123″, which is the correct. This problem is troublesome in the use of Dojo grid model, defining a model like this: new Dojox.grid._data. Table (null,null,data); If I want to expand this model, it's even more troublesome that all the subclass constructors are messed up by the parent class. So the recommended approach is to use associative arrays as parameters to the constructor, just like the keyword parameters in Python.

Constructor:function (args) {   
    var args = args | | {};   
    THIS.name = Args.name;   
    This.age = Args.age;   
}

multiple inheritance, mixin

When it comes to inheritance, the question of multiple inheritance comes again. Dojo supports multiple inheritance, precisely, mixin. Remember the second parameter of Dojo.declare, which is the parameter that represents the parent class, which can be an array, the first element of the array as the parent of the declared class, and the other as mixin. The subclass automatically obtains all the methods of the parent class and mixin, followed by the same method of mixin to overwrite the previous method

Dojo.declare ("Customer", null,{   
    say:function () {   
        alert ("Hello Customer");   
    },   
    getdiscount:function () {   
        alert ("Discount in Customer");   
    }
)
;
dojo.declare ("Mixinclass", null,{   
    say:function () {   
        alert ("Hello mixin");   
    foo: function () {   
        alert ("foo in Mixinclass");   
    }   
});   
Dojo.declare ("VIP", [customer,mixinclass],{   
});   
var VIP = new VIP ();   
Vip.getdiscount ();   
Vip.foo ();   
Vip.say ()//output "Hello mixinclass"

Other useful functions are dojo.mixin and Dojo.extend, as the name suggests, one is acting on the object instance, one is for extending class, turning documents and source code. Package Mechanism

After saying the class inheritance mechanism in dojo, we have to talk about the package mechanism.
Mainly used to have
Dojo.require
Dojo.provide
Dojo.registermodulepath Dojo.require

Dojo.require is the introduction of the corresponding path file under the JS file, now there are many library to do so. Now let's assume we're going to use
Project/dojo-lib/dojo/string.js

The top-level directory in dojo is the upper level of the directory where dojo.js resides, that is, "project/dojo-lib/," and dojo.js is placed in the
Project/dojo-lib/dojo/dojo.js
So here we are:
Dojo.require ("dojo.string");
For example, to refer to another directory:
Project/dojo-lib/dojox/dtl/_base.js, then this: Dojo.require ("Dojox.dtl._base");

Project/dojo-lib/dojox/grid/grid.js Dojo.require ("Dojox.grid.Grid");

Frankly, it's very similar to require like Ruby. Dojo.provide

How to write a package yourself, then use Dojo.provide. For example, to write in:
Project/dojo-lib/com/javaeye/fyting/package1.js
So in the corresponding package1.js, the first line needs to write this:
Dojo.provide ("Com.javaeye.fyting.package1″");

Like the package statement in Java, right. Dojo.registermodulepath

What if I write JS files do not want to and dojo together how to do it, then use Registermodulepath. Suppose you want to put the following:
Project/js/com/javaeye/fyting/package2.js

Package2.js and the above package1.js the same way, do not need to make special changes, so on line:
Dojo.provide ("Com.javaeye.fyting.package2″");

In use, you need to nominate the location of this package2.js,
Dojo.registermodulepath ("com", ".. /.. /js/com ");
Just be aware that the relative path here is relative to the dojo.js.

Let's assume that all of the Com.javaeye start with JS are put together, and the com.microsoft is placed in another place, in order to prevent conflict, you can:
Dojo.registermodulepath ("Com.javaeye", ". /.. /js/com/javaeye ");
Dojo.registermodulepath ("Com.microsoft", ". /.. /javascript/com/microsoft ");

Generally speaking, the package mechanism is to develop large-scale projects must, but caused debugging difficulties, using Dojo.require to introduce JS error, do not know what the reason, so the best to manually introduce the test of the Js,dojo is so doing. and the JS framework of the implementation of a variety of methods to inherit, but also caused debugging difficulties, Dojo also throws an error, and the lack of Java-like error statck, do not know where the source of the error. So, look forward to JS native support these ^ ^
The complete code file is in the attachment, one is contained dojo-1.0.2, one is not Dojo's