There are a few dark little secrets to the Button control in Flex 2 that can trip a designer up. It took me 2 1/2 hours to figure this shiz out so I just HAVE to blog it. I’m running on fumes, and this is the 3rd blog entry in the past 30 minutes, but my fingers never tire; they’re always willing to move furiously. They know I have words I need to get out, and fast because there is so much to do and so little time. My head feels like lead… it keeps swaying… wtf, am I at sea?
The mx.controls.Button class utilizes a mx.core.UITextField for it’s text label. This class basically wraps TextField, and add some CSS & measurement support so it’s easier to work with. By default, a Button’s label is bold.
This may seem minor, but if you try to embed a font, and apply the style to the button, it won’t work. You’ll apply the same style to Label’s, and see it work just fine, and go, ‘WTF?“. You can use a horrible hack, and utilize the mx_internal namespace, call getTextField on the Button, and call embedFonts on it to true. You can then apply this to every event a Button emits, and duct tape that mofo into submission. This looks & works horrible.
The problem stems from the fact that when you are embedding a font, you aren’t always embedding the bold version of it. Some fonts don’t have bold equivalents, and some are specifically to be made bold, but aren’t seen as bold by some tools. Lame.
The fix? 3 lines of CSS.
Let me stop and just say right quick that Flex 2’s implementation of CSS is off the hook! It’s come a long way from Flex 1.5. I spent 4 hours the other day in CSS. That’s right… 4 hours in Firefox & CSS skinning & incorporating a design. Not MXML, not ActionScript, but CSS! Insanity. It feels so much like web design, but… something’s different… oh yeah, I know! My design actually, you know, works the same in every browser and looks like I intended with no compromises!
Anyway, you overwrite the Button’s main style attributes. You ensure he’s embedding fonts, you set his font weight to normal, and you set his default font, like so:
Button { embedFonts: true; fontWeight: normal; fontFamily: oldSkool; } @font-face { src:url("PAPYRUS.TTF"); fontFamily: oldSkool; }
This is a big deal because a lot of components use Button. You’ll have the same font problems with them as well, such as TabBar/TabNavigator, and LinkButton/LinkBar to name a few. Doing the above vs. using a custom style ensures that all LinkButtons and Tab’s will now use your font. w00t!
:: collapses ::