kiss note

<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);)