Buttons with icons & preset properties

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.

Ah yes! There is this other problem – Icons. I had to embed icons for the Button which again, I didn’t want all the developers to be doing this and embedding image files across multiple screens. I wanted something that’s generic and usable by everyone. Coming from a JavaScript world my first thought process was to have a mxml with a button in it with set properties. I wasn’t quiet happy with that approach as that might limit the power the Button in many ways. So after discussing with one of my team members, we decided that extending the mx.controls.Button was the way to go.

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.

  1. Extending mx.controls.Button
  2. Set preferred height, width etc. here. You can set all the attributes you wish here.
  3. Embed all your icon files here.
  4. Then in the constructor take in a button type and use the required icon class.
  5. Call the custom button in your mxml like the normal button.
  6. 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 ]


2 Responses to Buttons with icons & preset properties

  1. kanu kukreja says:

    can’t we do the same thing without embedding a image in button, i.e. dynamically getting images from XML.

  2. Joshua says:

    This looks really helpful, but the link to the Demo & Source is giving me a “Forbidden” error?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: