Tuesday, 3 February 2009

Creating a multiline button in flex

I'm currently working on a charity website Wigout with some colleagues, raising money and awareness for breast cancer. The downloads sections needed some links which would enable the user to save content such as jpg printable posters, raffle tickets and so on. Although I could have used a number of methods to provide the user with a means of saving content, those who know me know im stubborn. I have been meaning to dabble with/ investigate the flex framework for a while now: this was my first 'toe dip' into this world.

Although maybe overkill, to solve the problem I have created a custom component ; a multiline button extending the button component provided with Flex.
I guess there may be a number of reasons why you may like to do this, obviously this inherits the properties and methods of the button, for example I have a nice colour change when a user rolls over the text, making it more obvious that this is a link. I could also add some events, such as switching the text once the button has been pressed, providing an indication that the file has been downloaded.


Above: 2 is a normal button; 3 is my shiny multiline button at work (button fill and border alpha is 0)

A quick search in Google brings up Alex's (adobe) blog showing a method for creating multiline radio buttons by extending the radio button class. Essentially ive used this pattern as suggested to apply to the button component, with a few minor changes.

override protected function createChildren():void
{
if (!textField)
{
textField = new NoTruncationUITextField();
textField.styleName = this;
textField.width=this.width-8;
addChild(textField as DisplayObject);
}


I needed to specify that the text field would be the same width (slightly less) than its container: the button, otherwise it reverted to a small default value. The original code "addChild(textField);" wouldn't work for me, producing the error:
1067: implicit coersion of a value of type mx.core:UITextField to an unrelated type Flash.display:DisplayObject
I cast it as a Display object which solved this issue. Although I admit im not entirely sure why I managed to get this error and Alex did not, difference in sdk's or flashplayer?

As far as changes go thats it, so full credit to Alex for providing a nice pattern. This also shows how easy it is to work with Flex with its powerful and customisable/ flexible framework. I can't wait to get stuck in some more...

No comments: