UPDATE:  The new Flex 4.5 Hero has this feature built in, as described in this recent post.

Well, the old Button class used to have an icon style (it was called skin or upSkin) so I decided to bring back the icon style so I’d be able to reuse the same skin and pass a different icon to each instance.

Usage:

The IconButton class:

package cs
{
        // icon style
	[Style(name="icon",type="*")]
 
	public class IconButton extends Button
	{
	}
}

Now the generic icon button skin (IconBtnSkin):

	<fx:Metadata>
		[HostComponent("cc.IconButton")] 
	</fx:Metadata>
 
	<s:states> 
		<s:State name="up" /> 
		<s:State name="over" /> 
		<s:State name="down" /> 
		<s:State name="disabled" /> 
	</s:states>  
 
	<!-- icon -->
	<s:BitmapImage source="{hostComponent.getStyle('icon')}" />

To use, just use the skin with the IconButton class, and set the icon style to the asset of choice:

	<cc:IconButton skin="IconBtnSkin" icon="myAsset">

You can also couple the skin with the IconButton class explicitly by setting the skinClass from the constructor:

	setStyle("skinClass", "skins.IconBtnSkin");

Occasionally we need to trace values of objects, whether these are flash display objects or your own classes and VOs.   Simply outputting an object to trace will generate an output like [Object Object] without any useful info about the contents of the object.

Enter mx.Utils and its helper classes. ObjectUtil is a nifty little class that contains some helper functions (check it out on Adobe live docs) and the static toString() implementation offers to ‘pretty print’ any object.

Simply type:

        // assume myObject is defined elsewhere
 
        trace(ObjectUtil.toString(myObject));

and replace your object as the function argument.

Short example:

        var point:Point = new Point(100, 100);
        trace(ObjectUtil.toString(point));
 
    //Will output:
    (flash.geom::Point)
         length = 141.4213562373095
         x = 100
         y = 100

Try it out!

The Flex framework button class (mx.Button) has a default skin – the halo button skin. I needed a button with no background or highlight – basically a clickable text. Simply setting the background alpha to zero seem to have no effect.

So since the halo skin is being shown anyway, lets try to remove it from the button tag in mxml:

<mx:Button skin='null' />

This will result in a build error:

Initializer for ‘skin’: cannot parse value of type Class from text ‘null’.

To fix it, put the null inside curly brackets:

<mx:Button skin='{null}' />

Alternatively, we can turn to CSS and define a style for the button:

.myButtonStyle {
	skin:	ClassReference(null);
}

Now just use the the style in the button:

<mx:Button id="myButton" styleName='myButtonStyle' />

The same can be achieved in actionscript code with this line, placed in the script tag:

myButton.setStyle('skin', null);

Download the full source code here.

UPDATE:

For Flex 4, the Spark model requires skin so this approach will not work. Simply create a new spark skin for button and remove all drawing except for the label. Name the skin ‘TransparentButtonSkin’ and in your button set the skinClass the TransparentButtonSkin you just created.