Button widget to provide better support for icons

[[email protected]…]

Currently, when using the button widget, if you want to add an icon to the button, you have to declare in markup:

<button dojoType="dojo:Button" dojoAttachPoint="dapMyButton" dojoAttachEvent="onClick:doStuff">

<img src="../images/stuff.gif" /> <span style="font-size:x-small; color: black">Do Stuff</span>

</button>

Would it be better to have the icon and caption defined as an attribute in the button element, e.g.

<button dojoType="dojo:Button" dojoAttachPoint="dapACSPResyncButton" dojoAttachEvent="onClick:doStuff" dojoIcon="../images/stuff.gif" dojoCaption="Do Stuff">

</button>

Currently, if you call setCaption, you have to pass in markup if you want the icon to remain in the button div because the code does:

setCaption: function(content){ 
this.caption=content; 
this.containerNode.innerHTML=content; 
this.sizeMyself(); 
},

This mixing of view and control is not too pretty, and when evaluating button captions means you have to have code such as:

if( this.myButton.caption == "<img src='../images/stuff.gif' /><span style='font-size:x-small; color: black'>Do Stuff</span>" )
{
...
}

Could we treat the icon and caption as properties on the button, e.g.

setCaption: function(content){ 
this.caption=content; 
this.captionNode.innerHTML=content; 
this.sizeMyself(); 
}, 

setIcon: function(content){ 
this.icon=content; 
this.iconNode.innerHTML=content; 
this.sizeMyself(); 
}, 

Maybe, this is another 'class' of button, e.g. IconButton? so that the base Button widget can remain as a simple container that you can put markup into?

[Douglas Hays]

I can see a limited need for a subclass of Button that just replaces the text w/o affecting the icon - but the current Button widget is intended to be the core base class - I would suggest that if you create the subclass to contribute it back to the community widget repository that is being created for 0.9. The current setCaption was intended for iconless buttons since usually the icons are related to the text and they shouldn't get out-of-sync.