1. Dijit Layout Widget Internals Bill Keese 2/1/1010

2. Containers

3. People mean different things by "container"

4. ContentPane - rich text container Document 0 <button dojoType=dijit.form.Button

5. _Container - Structured Container...

6. _widgetsInTemplate templates/businessCard.html: Name: ${name} Email:

7. Dijit's definitions containerNode isContainer _Container (and _Contained) internal vs. external widgets (_supportingWidgets) children vs. descendants

8. Embedded vs. Contained widgets A widget can embed sub-widgets which seem like they are part of the original widget:

9. Embedded widgets A widget can embed sub-widgets which seem like they are part of the original widget: ● stored in this._supportingWidgets ● not returned by getChildren() ● These widgets are "hidden" from app designer using the widget.

10. Child widgets Children widgets exist from app designer's point of view:...

11. Child widgets - containerNode ● A widget defined as "having children" must define a containerNode: ● myTitlePane.html: ● ${title} ● containerNode getChildren()

12. Widget Hierarchy ● startup(): called after initialization and DOM placement ● isContainer: contract that parent will call startup on children ● _Container implements isContainer ● ContentPane implements isContainer too (more later)

13. Layout Widgets

14. resize() interface ● resize(newSize?, curSize?) – resize(newSize): change margin-box size and re-layout – resize(): query current size and layout – resize(null, curSize): notifies widget that it's been resized... widget has to layout Resize() can only be called when widget visible and in DOM.

15. Layout Containers ● structured hierarchy of widgets ● top down sizing ● isLayoutContainer contract ● ContentPane implements isLayoutContainer...

16. BorderContainer 1000x800 TabContainer 490x800 ContentPane 488x750 TabContainer 490x800 ContentPane 488x750 Layout Widgets: Top Down Sizing ● top widget sizes children, recursively ● avoid *Box() calls

17. startup(), resize(), isLayoutContainer TabContaine r Border Container startup() resize(sz) startup: function(){ if(!(parent && parent.isLayoutContainer)){ this.resize(); this.connect(dojo.isIE ? this.domNode : dojo.global, 'onresize', function(){ this.resize(); }); } ● startup() on page load ● resize() on first show() ● isLayoutContainer

18. ContentPane

19. ContentPane - rich text container Document 0 <button dojoType=dijit.form.Button

20. ContentPane/rich text container: startup() and resize() ContentPane Layout Container #1 style="width: 300px; height: 300px;" Layout Container #2 style="width: 300px; height: 300px;" startup(), resize()

21. ... or: myEditor.html: div dojoType=dijit.Editor> ContentPane: layout widget wrapper

22. ContentPane: layout widget wrapper (sizing) ContentPane (style=width: 300px; height: 300px;") Layout Container (no style setting) startup(), resize({w: 298, h: 298})

23. ContentPane: problems manually setting DOM (FAQ) myContentPane.domNode.appendChild( myLayoutWidget.domNode); myLayoutWidget.startup(); ● myLayoutWidget detects parent is ContentPane ● resize() will not be called

24. ContentPane: popup children ● Menu.domNode is attached to ● ContentPane.destroyRecursive() needs to remember list of widgets ● but this also needs to work: myContentPane.domNode.appendChild( myWidget.domNode); myContentPane.destroyRecursive();