Buttons with icons & preset properties
December 12, 2006 2 Comments
Ever wanted custom buttons in flex with set height & width? Ever wanted buttons with icons in them? If yes, then read on. 🙂 One of the problems I had encountered in my current project is rooted from the philosophy that Flex follows with regards to the height and width of a widget. Coming from a web development background, I am so used to thinking the height and width of a widget as styling attribute than a property. The real problem with this? Developers in the team code in height and width which fits perfectly for the screen they are currently working on. End result? It’s a Usability person’s nightmare.
How did I go about it? Well, it wasn’t as hard I thought it would be 😉 . Lemme list the steps down as a few simple points.
- Extending mx.controls.Button
- Set preferred height, width etc. here. You can set all the attributes you wish here.
- Embed all your icon files here.
- Then in the constructor take in a button type and use the required icon class.
- Call the custom button in your mxml like the normal button.
- That’s it! Still looks complicated? Just check out the sample source files.
So much for being afraid of extending framework widgets for all these days. If you are a newbie, this should help you get over the initial shyness of extending widgets. So, here’s a sample script that does just that. This is for newbies like me who have a clear idea of what they want but not sure how to get there 🙂 . If you are an advanced flex developer, feel free to drop in advice/suggestion/comments on whether this can be done in a better way. Special thanks to Eashwar Natarajan for helping me out.
[Note: What’s with the blinding orange-yellow colour in the sample? Nothing. Just trying to make things colourful 🙂 ]
[ Demo & Source ]