Multi Line Buttons in FlexBuilder / FlashBuilder

Recently I have been working on a project where I have to dynamically make a bunch of forms based on Questions and Answers from a SQL database.  This was going along nicely till I requested some real data that was to be used and the answers were much more verbose then I had anticipated causing the radio buttons to not display the text for the answer. What I needed was a multiline radion button.

There is no way to make a multi line button in flex out of the box which is a bit of a shame.

I started extending the button class to make it work how I needed while chatting with Rob Parkhill I got a few minutes into coding my own solution when Rob pointed me to this http://blogs.adobe.com/aharui/2007/04/multiline_buttons.html post by Alex Harui which did exactly what I needed.

The demo shows both the new Multiline Radio button and the same code creating the standard radio button.



Here is the structure for the demo:

The code:
<br /> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" width="440" height="360"><br /> <mx:Script><br /> <![CDATA[ import mx.controls.RadioButton; import components.*; private function init():void{ var aLongString:String = "Now you may ask, why doesn't this " + "functionality come built-in with Flex? The answer is " + "that text-flow is slow and doesn't really work well " + "with the Flex layout system. That's because there " + "really is no way to determine the size of a block " + "of text unless it is only one line or has line-breaks " + "in it or you know its width. In fact, to use this " + "example, you need to specify the width of the " + "radiobuttons, so it defines a width so we can " + "calculate the height."; var btn:RadioML = new RadioML(); btn.width = 250; btn.label = aLongString; btn.id = "newBtn"; myForm.addChild(btn); var btnOld:RadioButton = new RadioButton(); btnOld.width = 250; btnOld.label = aLongString; btnOld.id = "newBtn"; myForm.addChild(btnOld); } ]]><br /> </mx:Script><br /> <mx:Panel width="348" height="302" layout="absolute"><br /> <mx:Form id="myForm" x="0" y="0" /><br /> <br /> <mx:HRule width="100%" x="0" y="189"/><br /> <br /> <mx:Form id="myFormOldBtn" x="0" y="228" /><br /> </mx:Panel><br /> <br /> </mx:Application><br />