[patch][cla] Feature to allow widgets within templates

[morris]

LiuCougar? has implemented the ability to define widgets within your html templates.

It is best to look at the test to understand the abilities, but here is a rundown:

A) It allows you to define widgets within your template markup. The feature must be enabled for the template by defining widgetsInTemplate:true in your widget javascript (similar to how isContainer:true works).

B) It allows you to attach those subwidgets to your widget - just use dojoAttachPoint on the widget definition node and the code does the rest of the magic.

C) It allows you to attach events from the subwidgets to your widget - just use dojoAttachEvents.

D) It allows you to 'wrap' subwidgets that are containers, and have the subwidget act as the container within markup e.g. if you have a TabContainer? widget in a template and set dojoAttachPoint="subContainerWidget" then any child widgets (in markup only) get attached to the subwidget rather than the defined widget

This closes #566

[Tom Trenka]

Reviewed 9/22/2006, seems like a relatively good patch.

[billW]

Run test1 from ​http://archive.dojotoolkit.org/nightly/tests/widget/test_SubWidgets.html and get:

this.contentPane1 missing this.contentPane2 missing

so the dojoAttachPoint is not working for the subwidgets.

[liucougar]

this patch has not been merged into svn, so in nightly, it is still the old code

[liucougar]

(In [5843]) fixes #1483: Feature to allow widgets within templates (improved)

[[email protected]…]

i have try this feature,but find two unexpect situations.

---

my template code is something look like this

<div>
    <div dojoAttachPoint="subContainerWidget" dojoType="dojo:LayoutContainer" layoutChildPriority='none' id="main">
        <div dojoType="dojo:ContentPane" id="c1" layoutAlign="left">AAA</div>
        <div dojoType="dojo:ContentPane" id="c2" layoutAlign="left">BBB</div>
    </div>
</div>

then i use a stylesheet file to set the width and height of each node.When the widget display,i inspect into this part of the code and find out that only the height attribute get set,the width attribute of the inside contentpane is all be set to 0.

---

the second one is about the onClick event, the code is

<div>
    <div dojoAttachPoint="subContainerWidget">
        <div class="account">
    	    <div dojoType="DropDownButton" menuId='saveMenu' dojoAttachPoint="account_type"><img src="../src/gearon/widget/template/mobile.png"/>
            </div>
	</div>
	<div dojoType="PopupMenu2" id="saveMenu" toggle="wipe">
	    <div dojoType="MenuItem2" iconSrc="../src/gearon/widget/template/mobile-hidden.png" caption="Show it" onClick="dojo.debug('aaa')"></div>	
	    <div dojoType="MenuItem2" iconSrc="../src/gearon/widget/template/mobile.png" caption="Not to Show" onClick="dojo.debug('bbb')"></div>
	</div>		
    </div>
</div>

i define two menuitems here,and each time i click on the first icon,its onclick method will get invoked. But for the second icon,it just does nothing. By the way,if i omit the toggle attribute of the popupmenu2, none of these two item's onclick method get invoked.

[liucougar]

1. you sure your css file is correct? What about set the width/height in the template html rather than in css?

2. try to move the popupmenu one level up, like this:

<div>
    <div dojoAttachPoint="subContainerWidget">
        <div class="account">
    	    <div dojoType="DropDownButton" menuId='saveMenu' dojoAttachPoint="account_type"><img src="../src/gearon/widget/template/mobile.png"/>
            </div>
	</div>	
    </div>
    <div dojoType="PopupMenu2" id="saveMenu" toggle="wipe">
        <div dojoType="MenuItem2" iconSrc="../src/gearon/widget/template/mobile-hidden.png" caption="Show it" onClick="dojo.debug('aaa')"></div>
        <div dojoType="MenuItem2" iconSrc="../src/gearon/widget/template/mobile.png" caption="Not to Show" onClick="dojo.debug('bbb')"></div>
    </div>	
</div>

and you should not use onClick at all, dojoAttachEvent is your what you want here

[[email protected]…]

1.i am sure my css is correct,cause if there is a mistake,the height value will not get set.And i also try the inline style,and it get the same result.

2.I will have it try tomorrom. But why this maybe the problem. The DropDownButton? just refer to the PopupMenu? by id,and i think the menu will be append to the body node,so i think maybe it will not work also.But anyway I will do try it out tomorrow,and tell you the result.

[Tom Trenka]

This is a bug, not an enhancement; please file against #1525 from now on.

[(none)]

Milestone 0.4 deleted