<Create Your Own Widget Class/>
Creating a Widget Programmatically
var button1 = new dijit.form.Button(params, srcNodeRef);
eg.
new dijit.form.Button({ “class”: “large”, style: “color: red” }, dojo.byId(“someDiv”));
<div id=”someDiv” class=”large” style=”color:red”></div>

Creating a Widget declaratively
eg.
<div dojoType=”dijit.TitlePane” title=”Outer Pane”></div>

IMPORTANT:
startup()
Certain widgets require a startup() method to be called. Haha, java is here again just like GUI, rite?

accordion = new dijit.layout.AccordionContainer({}, dojo.byId(“accordionShell”));
accordion.addChild(new dijit.layout.ContentPane());
accordion.addChild(new dijit.layout.ContentPane());
accordion.addChild(new dijit.layout.ContentPane());
accordion.startup(); //after all the elements added, start up

Interacting with Widgets
Obtaining a Widget Reference
dijit.byId(“idOfWidget”)

<Write Your Own Widget Class/>
IMPORTANT: I know it’s cool hack the source code is cool, but that should be last thing you want to do if there is no suitable widget.

WHY the dojo div i put in is so different from what ends up in “view page source”?
Dojo replaces the simple nodes of our example with groups of HTML elements. That’s one of the jobs of the Dojo parser.

eg.

<div dojoType=”dijit.layout.AccordionPane” title=”pane 1″>
Text of Pane 1
</div>

dijit/layout/templates/AccordionPane.html:
<div class=’dijitAccordionPane’
><div dojoAttachPoint=’titleNode,focusNode’ dojoAttachEvent=’ondijitclick:_onTitleClick,onkeypress:_onKeyPress’
class=’dijitAccordionTitle’ wairole=”tab”
><div class=’dijitAccordionArrow’></div
><div class=’arrowTextUp’ waiRole=”presentation”>?</div
><div class=’arrowTextDown’ waiRole=”presentation”>?</div
><span dojoAttachPoint=’titleTextNode’>${title}</span></div
><div><div dojoAttachPoint=’containerNode’ style=’overflow: hidden; height: 1px; display: none’
dojoAttachEvent=’onkeypress:_onKeyPress’
class=’dijitAccordionBody’ waiRole=”tabpanel”
></div></div>
</div>

${title}
is replaced with the title=”…” attribute sent to the widget
dojoAttachPoint=’containerNode’
An attachPoint is a tag merged with user-provided HTML. It’s like a substitution variable for HTML.
what is attachPoint

//hm?? what the ** ??

eg.
sepecify dojoAttachPoint=’titleNode,focusNode’ so that you can use the reference in the widget (this.titleNode).

dojoAttachEvent=’onkeypress:_onKeyPress’
Connects an event to an event handler at that node.

Dijit.Declaration

declaratively create a widget
eg1.
<div dojoType=”dijit.Declaration”
widgetClass=”dojoc.widget.ImageAccordion”
mixins=”dijit.layout.AccordionPane”
><div class=’dijitAccordionPane’
><div dojoAttachPoint=’titleNode,focusNode’
dojoAttachEvent=’ondijitclick:_onTitleClick,onkeypress:_onKeyPress’
class=’dojocAccordionTitle’ wairole=”tab”
><div class=’dijitAccordionArrow’></div
><div class=’arrowTextUp’ waiRole=”presentation”>?</div
><div class=’arrowTextDown’ waiRole=”presentation”>?</div
><span dojoAttachPoint=’titleTextNode’><img alt=”${title}” src=”${src}”
></span></div
><div><div dojoAttachPoint=’containerNode’
style=’overflow: hidden; height: 1px; display: none’
dojoAttachEvent=’onkeypress:_onKeyPress’
class=’dojocImageAccordionBody’ waiRole=”tabpanel”
></div></div>
</div>
</div>
eg2.
<div dojoType=”dijit.Declaration” widgetClass=”simpleConnectedWidget” >
Just a plain ol’ piece of text
<script type=”dojo/connect” event=”dblclick”>
console.debug(“Ouch!  I’ve been double-clicked”);
</script>
</div>

Notes

* widgetsInTemplate is automatically set to true, so any widgets you place in the template will be automatically filled in.
* If you do not specify mixin, the widget class will be a subclass of dijit._Widget and mix in dijit._Templated. If you specify mixin, the first class listed must be a subclass of dijit._Widget. At least one of the mixins should itself mixin dijit._Templated, or you should supply dijit._Templated yourself as a mixin.
* Only one extension point implementation of preamble.

programatically create a widget(More flexible – dijit.declare )
one class -> multiple templates

eg.
dojoc/layout/ImageAccordion.js
// all packages need to dojo.provide() _something_, and only one thing
dojo.provide(“dojoc.widget.ImageAccordion”);
// AccordionContainer is the module with dijit.layout.AccordionPane
dojo.require(“dijit.layout.AccordionContainer”);
// our declared class
dojo.declare(“dojoc.widget.ImageAccordion”,
// we inherit from this class, which in turn mixes
// in _Templated and _Layout
[ dijit.layout.AccordionPane ],
// class properties:
{
templatePath: dojo.moduleUrl(“dojoc”,”layout/templates/ImageAccordion.html”),
// Necessary to keep Dijit from using templateString in AccordionPane
templateString: “”,
// src: String
//      src url for AccordionPaneExtension header
src: “”
});

dojoc/widgets/template/ImageAccordion.html:
<div class=’dojocImageAccordion’
><div dojoAttachPoint=’titleNode,focusNode’
dojoAttachEvent=’ondijitclick:_onTitleClick,onkeypress:_onTitleKeyPress,onfocus:_handleFocus,onblur:_handleFocus’
class=’dojocImageAccordionTitle’ wairole=”tab”
><img alt=”${title}” src=”${src}”
></div
><div><div dojoAttachPoint=’containerNode’
style=’overflow: hidden; height: 1px; display: none’
class=’dojocImageAccordionBody’ waiRole=”tabpanel”
></div></div>
</div>

<The Widget Life-cycle/>

onstructor
Your constructor method will be called before the parameters are mixed into the widget, and can be used to initialize arrays, etc.
parameters are mixed into the widget instance
This is when attributes in the markup (ex: <button iconClass=…>) are mixed in
postMixInProperties
If you provide a postMixInProperties method for your widget, it will be invoked before rendering occurs, and before any dom nodes are created. If you need to add or change the instance’s properties before the widget is rendered – this is the place to do it.
buildRendering
_Templated provides an implementation of buildRendering that most times will do what you need. The template is fetched/read, nodes created and events hooked up during buildRendering. If you dont mixin _Templated (and most OOTB dijits do) and want to handle rendering yourself (e.g. to really streamline a simple widget, or even use a different templating system) this is where you’d do it.
————> widget rendered
postCreate
This is typically the workhorse of a custom widget. The widget has been rendered (but note that sub-widgets in the containerNode have not!)
startup
If you need to be sure parsing and creation of any child widgets is complete, use startup.
destroy
Implement destroy if you have special tear-down work to do (the superclasses will take care of most of it for you; be sure to call this.inherited(arguments);)

<dojo functions/>

1.  dojo.require(“dojo.fx”);
//This registers a function to be run when the document (and all required dependencies) are ready
2. dojo.addOnLoad(function(){
console.log(“document ready!”);
});
similarly,
var init = function(){
console.log(“document ready!”);
}
3. dojo.addOnLoad(init);

4. dojo.byId -  get DomNode
5. digit.byId – get widget

6. dojo.query – returns a list of Dom nodes based on CSS selector

eg.  // every element in the page with the class “blueButton” assigned
dojo.query(“.blueButton”).forEach(function(node, index, arr){
console.debug(node.innerHTML);
});

7.dojo.forEach
eg.disable all the select tags
dojo.forEach(
dojo.query(“select”, document),
function(selectTag) {
selectTag.disabled = true;
}
);
// >= 1.0 only.
dojo.query(“select”, document).forEach(“item.disabled = true;”);

8. dojo.connect

eg. connect event to js event handler
function helloPressed(){
alert(‘You pressed the button’);
}

function init(){
button = dojo.byId(‘helloButton’);
dojo.connect(button, ‘onclick’, ‘helloPressed’);
}

eg.bind mult connections when exampleObj.bar() gets called, exampleObj.foo() will be called.
var exampleObj = {
counter: 0,
foo: function(){
alert(“foo”);
this.counter++;
},
bar: function(){
alert(“bar”);
this.counter++;
}
};

dojo.connect(exampleObj, “foo”, exampleObj, “bar”);

<OO -Object Orientied/>
OO,think is as Java.

pass Functions as Variables
eg.

function applyTwoParameterFn(a, b, function){
return function(a,b);
}
console.debug(applyTwoParameterFn(1, 2, Math.max)); //not as strict as java in terms of type/variables checking.

<delcare a class/> – woo… pretty much like java
dojo.declare(“ClassName”, null, {/*class body*/});

dojo.declare(“Person”, null, {
constructor: function(name, age, currentResidence){
this.name=name;
this.age=age;
this.currentResidence=currentResidence;
},
moveToNewState: function(newState){
this.currentResidence=newState;
}
});
eg. create person class and instantialize it

var matt= new Person(‘Matt’, 25, ‘New Mexico’);

<Arrays and Objects as Member Variables/>
eg.
dojo.declare(“my.classes.bar”, my.classes.foo, {
constructor: function() {
this.someData = [ ]; // each object has it’s own array
},
someData: [1, 2, 3, 4], // doesn’t do what I want: ends up being static
numItem : 5, // one per bar
strItem : “string”, // one per bar
statics: { counter: 0, somethingElse: “hello” } // static variables
});

IMPORTANT:
Why is this true for arrays and objects, but not primitives? It’s because, like most OOP languages, JavaScript uses object references. For example, given:

x = { fruit: “apple” };
y = x;

Now x and y both refer to the same object. Modifying x.fruit will also affect y.fruit.

<inheritance/> – haha, it is java
dojo.declare(“Employee”, Person, {
constructor: function(name, age, currentResidence, position){
// remember, Person constructor is called automatically as the parent
this.password=”";
this.position=position;
},
login: function(){
if(this.password){
alert(‘you have successfully logged in’);
}else{
alert(‘please ask the administrator for your password’);
}
}
});
initialize the subclass
var kathryn=new Employee(‘ Kathryn ‘, 26, ‘Minnesota’, ‘Designer’);

Calling Superclass Methods
someMethod: function() {
// call base class someMethod
this.inherited(arguments);
// now do something else
}

<Mixins/> – multiple inheritance, hmm… java doesn’t do this.
eg. blizzard class will inherit VanillaSoftServe, MandMs, CookiDough
dojo.declare(“VanillaSoftServe”,null, {
constructor: function() { console.debug (“mixing in Vanilla”); }
});
dojo.declare(“MandMs”,null, {
constructor: function() { console.debug(“mixing in MandM’s”); },
kind: “plain”
});
dojo.declare(“CookieDough”,null, {
chunkSize: “medium”
});
dojo.declare(“Blizzard”, [VanillaSoftServe, MandMs, CookieDough], {
constructor: function() {
console.debug(“A blizzard with “+
this.kind+” M and Ms and “+
this.chunkSize+” chunks of cookie dough.”
);
}
});

PS. VanillaSoftServe is the only superclass of Blizzard, others two just mixed in. Does not make sense to me, thinking it as three superclasses makes more sense

<Understanding The Parser/>
Not sure why dojo doc always tries to complicate this part. Parser is just create widget object for your source node.

pretty straight forward:
* locating the nodes with dojoType attributes in the page
* taking the attributes assigned to them and passing them into the constructor as properties on the configuration object
* passing the source node for the widget as the second parameter to the constructor
constructor: function(args, node){}

<modules/>
modularization – namespace, collection of your widgets
function sum() {
var sum1; object level var
sum2; globel var
}

Module Helpers
eg.
var imgNode = document.createElement(“img”);
imgNode.src = dojo.moduleUrl(“explosive.space”,”images/kaboom.gif”);

once the module is binded with the gif. It doesn’t matter where the code snippet is located relative to kaboom.gif.Yeah!!!

Use requireIf to save runtime.
dojo.requireIf(dojo.isIE, “explosive.space.BlueScreenOfDeathCatcher”);

One Sentence定义: Dojo是Javascript的一个框架（开源工具包）。

快速安装:

三种方法：

1. 无安装，直接使用AOL’S 的DOJO(Content Distribution Network)或者google api.
2. 本地安装最新的编译后的dojo.
3. 本地维护dojo源码，编译。

总的来说，使用dojo，都需要编译和装载dojo.xd.js.

1. 使用 CDN/Google提供的dojo.  – <推荐>:  想初次体验dojo的初学者

<script type=”text/javascript” src=”http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js”></script>

<script type=”text/javascript” SRC=”http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js”></script>

2. 本地使用编译过的dojo – <推荐>大多数开发人员

传统方法： 下载编译好的dojo，放在本地服务器使用。

2.1 http://dojotoolkit.org/downloads下载编译最新版本的dojo

2.2 解压到你自己的项目文件夹下，简单起见，把解压后dojo-版本号文件夹改为dojo。Eg.我把解压后的dojo文件夹放在我项目根目录下（apache server）。浏览器中访问http://localhost/dojo/dijit/themes/themeTester.html， 如果能够看到dojo 测试页面，说明安装成功。

3. 编译源代码，DIY版本dojo – <推荐>高级Javascript开发人员

需要更改，维护源程序，使用自定义级别的dojo. IBM, Google很多大公司自己维护自己的dojo版本以及release.

通过repository (http://svn.dojotoolkit.org/src/)下载源程序,自己维护编译。