How to change paddingLeft and paddingRight of spark.components.Button?

Question

The class 'Button' in package mx.controls has the style 'paddingLeft' and 'paddingRight'. But now I don't want to use this old Halo theme anymore, I'm moving everything to Spark.

However, I can't find these padding styles in spark.components.Button, and the documentation http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Button.html doesn't show that spark Button has those styles.

Any ideas?

Answer 1

You have to do a specific button skin inherit the default one and add your rule inside of it.

Answer 2

It's actually pretty simple. I'm pretty new to flex and (without doing anything else) after reading this post:

http://inflagrantedelicto.memoryspiral.com/2010/01/skinning-a-spark-button-in-flex-4/

I created a spark button with custom left and right padding in less than a minute. Thanks to Joseph Labrecque for his wonderful blog!

All you have to do in Flash Builder is right-click on the folder you want to create a new button skin inside of, then select New MXML Skin. This opens the window you see in described in the link above. The Package name will already be filled in (you can change it if you didn't right-click on the right folder above). Enter a name (e.g. CustomButton in the blog) for the skin class. For Host Component, select Browse, then select Button-Spark Components. The "create-a-copy-of" checkbox should be selected by default. Then click Finish.

Now all you have to do is open the file (it should open by default after you create it), then modify layer 8's Label section. For me, it was line 219. Change left="10" to whatever placement you want (e.g. set to 0 for no padding). Similar for right="10". You can change the textAlign, and introduce paddingLeft or paddingRight, etc. inside the same label. Save file when finished.

Then inside your spark button mxml reference in your main file, simply add a skinclass="CustomButton" to the line of code. For example, change this:

<s:button label="myOldButton" ... />

to this:

<s:button label="myCustomButton" skinclass="CustomButton" ... /> 

That's it!