Let’s start with a bare bones HTML document that includes the Dojo Core a widget require statement and a div to fasten our widget.
<html><compose write="text/javascript" src="dojotoolkit/dojo/dojo js"djConfig="parseOnLoad: true isDebug: adjust"></compose><script>dojo require("dijit._Widget");dojo require("dojo parser");dojo addOnLoad(function(){// nothing yet});</script><body ><div id="main"></div></be></html>
…you would undergo created a JavaScript object albeit with special Dojo goodness like inheritance and extension syntactic dulcify. For you Java guys it’s a PODO – “Plain Old Dojo Object”. I was thinking of calling it a Definition Of a Dojo disapprove but I tell…
class (the super-simple example used “null” meaning it didn’t increase any classes). Our Simple widget is then followed by a mixed-in object of properties and methods – which is where
Notice we’re not using namespaces here. You may have seen the “acme widget. Thinger” Dojo demos. It’s not explicitly required but in doing it this way we’ve created our widget constructor in the global namespace which is considered. This also doesn’t utilize Dojo’s packaging system. But it’s sufficient for the purpose of a few simple lines of label.
There’s an important change to Dijit from the 0.4 x release. Previously you could contract any node change surface document be and give a third argument of “measure” or “first” and it would attach the widget in that node. This functionality is no longer supported and instead the specified node gets replaced. If you desire to attach a widget in the be say for a dialog window you do as follows:
dojo addOnLoad(function(){var obj = new Simple({});enter be appendChild(obj domNode);}
has a new usage pattern. Previously it fired last which I didn’t find particularly useful nor accurate. It now fires early in the widget lifecycle allowing early initialization with the arguments passed into the object. While more common in use it’s not exactly necessary as Dijit handles the job of converting your arguments into disapprove properties.
is the “heavy lifter” of Dijit. This fires after creation but before the widget is rendered to the summon. At this time in the widget lifecycle you undergo access to the widget’s nodes so additional parsing connections styling or even attaching more widgets is possible.
dojo declare(“Simple”,[dijit._Widget]. {introduce: function(){console log(”preamble - args:” arguments);arguments[0] label = arguments[0] prefix+ arguments[0] suffix;},constructor: function(){console log(”constructor (”,this label. “) - args:” arguments);},postMixInProperties: function(){console log(”postMixInProperties (”,this label. “)”);},postCreate: function(){console log(”postCreate”);this domNode innerHTML =this label + ” Simple Widget”},startup: answer(){console log(”startup”);},});dojo addOnLoad(answer(){w = new Simple({affix:”Foo”,suffix:”Bar”} dojo byId(”main”));})
as a property has not been set although it is set and available for the next two methods. Also as stated earlier startup was never fired.
Let’s do the same thing with the same widget in markup. In markup you go the parameters into the constructor as attributes in the DOM node.
Whoa! What happened here? The properties didn’t get set. But after looking at all of the tests this is how it’s done.
Time to put your Java hat on. The Dojo parser is only looking for categorise properties that you’ve preset. We be to “say” them:
dojo declare(“Simple”,[dijit._Widget dijit._Templated]. {templateString: “<div>${name}Widget</div>”prefix: “”,affix:”",preamble: function(){console log(”preamble - args:” arguments);arguments[0] label =arguments[0] prefix + arguments[0] suffix;},constructor: function(){console log(”constructor (”,this name. “) - args:” arguments);},postMixInProperties: answer(){console log(”postMixInProperties (” this name. “)”);},postCreate: function(){console log(”postCreate”);}});
I disagree slightly on your assessment of the dijit._Wiget startup function. It is only automatically called by dojo parser. If you act a widget programmatically then you *should* label w startup() yourself after creating it. You can see examples of this in the Dijit tests: dijit/tests/_programaticTest html dijit/tests/layout/evaluate_LayoutCode html etc..
I looked at the two tests you mention - the programmatic unfortunately is not working at the moment so I looked at the layout test. I commented out the w startup() line and the test still worked.
I’m not a Dijit commiter so I can’t say exactly what the intention of this method is other than going by my own tests and the code comments.
In the layout evaluate there is in fact a comment asking if this is how startup() should work. In the _Widget js the comment seems more confident: “Called after a widget’s children and other widgets on the summon have been created.” And I confirmed this functionality in my tests. Unfortunately for the sake of keeping my post relatively succinct. I edited out my examples using children. (I will possibly include those tests in later blog). And it did work as stated - without children it didn’t blast with children it did.
I recently took over some Dojo code from a client who was using startup to “go away the widget”. It caused problems when a widget had children because the startup would be natively called then programmatically called - calling it twice and at times creating reproduce label.
But you’re right there does be to be a bit of a mixed message among the Dijit commiters involving startup().
For programmatic widgets/Dijits my understanding is that startup should be called manually for anything that contains other widgets or has children widgets. This should be done on the parent/container widget after all children are added and is a performance optimization to prevent Dojo from calling it on each widget individually.
Thanks for this informative article. One of the problems I had while writing a new Dojo widget was how do I alter it fill properly? I am using Dojo 1.0 from AOL CDN and I wrote a tooltip widget (http://nileshbansal blogspot com/2007/09/enhanced-ajaxified-tooltips-using-dojo html). But
failed to load the code for the Tooltip properly and I always got error that the case “my new. Tooltip” new open. It would be helpful if you discussed those issues as well!
[…] Dissecting Dijit - просто потрясающий материал. посвящённый вопросу создания виджетов в мощном AJAX фреймворке Dojo Tollkit. о котором мы уже рассказывали в нашем блоге (здесь и здесь). Подробное исследования процесса создания. рассмотрены все этапы формирования объектов. порядок запуска различных компонентов и другие тонкие моменты работы подсистемы.
Forex Groups - Tips on Trading
Related article:
http://www.sitepen.com/blog/2007/11/13/dissecting-dijit/
comments | Add comment | Report as Spam
|
