It seems Flex 3 controls don't allow their text labels to be multiline. For some reason this feature wasn't implemented.
Thanks to Alex's Multiline buttons example I created a custom class to that extend the CheckBox to allow more than one line of text.package packageName
{
import flash.text.TextLineMetrics;
import mx.controls.CheckBox;
public class MultilineCheckbox extends CheckBox
{
public var myLineMetric:TextLineMetrics;
public function MultilineCheckbox()
{
super();
}
override protected function createChildren():void
{
super.createChildren();
textField.multiline = true;
textField.wordWrap = true;
textField.width = this.explicitWidth - 20;
}
override protected function measure():void
{
if (!isNaN(explicitWidth))
{
var w:Number = explicitWidth;
w -= getStyle("horizontalGap") + getStyle("paddingLeft") + getStyle("paddingRight");
textField.width = w;
textField.y = 0;
}
if (this.myLineMetric == null)
super.measure();
this.height = myLineMetric.height + 4;
}
override public function measureText(s:String):TextLineMetrics
{
textField.text = s;
var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);
lineMetrics.width = textField.textWidth;
lineMetrics.height = textField.textHeight;
if (this.myLineMetric == null)
this.myLineMetric = lineMetrics;
this.height = myLineMetric.height + 4;
return this.myLineMetric;
}
}
} 1. package packageName 2. { 3. import flash.text.TextLineMetrics; 4. 5. import mx.controls.CheckBox; 6. 7. public class MultilineCheckbox extends CheckBox 8. { 9. public var myLineMetric:TextLineMetrics; 10. 11. public function MultilineCheckbox() 12. { 13. super(); 14. } 15. 16. override protected function createChildren():void 17. { 18. super.createChildren(); 19. 20. textField.multiline = true; 21. textField.wordWrap = true; 22. textField.width = this.explicitWidth - 20; 23. } 24. 25. override protected function measure():void 26. { 27. 28. if (!isNaN(explicitWidth)) 29. { 30. var w:Number = explicitWidth; 31. w -= getStyle("horizontalGap") + getStyle("paddingLeft") + getStyle("paddingRight"); 32. textField.width = w; 33. textField.y = 0; 34. } 35. 36. if (this.myLineMetric == null) 37. super.measure(); 38. this.height = myLineMetric.height + 4; 39. } 40. 41. override public function measureText(s:String):TextLineMetrics 42. { 43. textField.text = s; 44. var lineMetrics:TextLineMetrics = textField.getLineMetrics(0); 45. lineMetrics.width = textField.textWidth; 46. lineMetrics.height = textField.textHeight; 47. 48. if (this.myLineMetric == null) 49. this.myLineMetric = lineMetrics; 50. this.height = myLineMetric.height + 4; 51. return this.myLineMetric; 52. } 53. } 54. } 55.
Make sure you specify the width and don't specify the height to allow it to resize properly.
Usage example : <packageName:MultilineCheckbox id="MultiCheckBox"
label="LLLLLLLLLL OOOOOOO NNNNNNNN GGGGGGG TTTTTT EEEEEEEE XXXXXX TTTTT"
width="110">
</packageName:MultilineCheckbox> 1. <packageName:MultilineCheckbox id="MultiCheckBox" 2. label="LLLLLLLLLL OOOOOOO NNNNNNNN GGGGGGG TTTTTT EEEEEEEE XXXXXX TTTTT" 3. width="110"> 4. </packageName:MultilineCheckbox>
4 comments:
don't work for me with styles. do you have the same problems?
I found a simplified version that seems to accomplish the same result is:
package packageName
{
import flash.text.TextFieldAutoSize;
import mx.controls.CheckBox;
public class MultilineCheckBox extends CheckBox
{
public function MultilineCheckBox()
{
super();
}
override protected function createChildren():void
{
super.createChildren();
textField.wordWrap = true;
textField.autoSize = TextFieldAutoSize.LEFT;
}
}
}
I've created a newer version of this that fixes a couple of issues with dynamic sizing and styling of the Checkbox/RadioButton.
http://blog.slaingod.com/articles/2010/04/11/adobe-flex-multiline-checkbox-and-radiobutton
Craig's way works, but that kind of checkbox doesn't know its height according to other components.
Post a Comment