I am trying to create a toggle button that will show a label and a colored box
dynamically. I thought extending the button component would be my best option.
I add a Box component and set it's background color to the color passed to the
button.
Everything almost works, except the Box seems to be underneath the button and
when it is toggled you can no longer see it (alpha is 100%).
I feel like I must be missing something very simple. Any help would be greatly
appreciated.
Here is my code:
package com.view
{
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import flash.text.TextLineMetrics;
import mx.containers.Box;
import mx.controls.Button;
import mx.core.UITextField;
public class LegendButton extends Button
{
[Bindable] public var legendColor:uint;
private var legendIcon:Box;
public function LegendButton()
{
super();
}
override protected function createChildren():void
{
if (!legendIcon)
{
legendIcon = new Box;
legendIcon.styleName = this;
legendIcon.setStyle('backgroundColor',legendColor);
legendIcon.width = 10;
legendIcon.height = 10;
addChild(legendIcon);
}
if (!textField)
{
textField = new UITextField();
textField.styleName = this;
addChild(flash.display.DisplayObject(textField));
}
super.createChildren();
}
protected override function
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
this.setStyle('paddingLeft',15);
this.setStyle('paddingRight',5);
legendIcon.move(5,5);
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
override protected function measure():void
{
if (!isNaN(explicitWidth))
{
var w:Number = explicitWidth;
w -= getStyle('horizontalGap') +
getStyle('paddingLeft') + getStyle('paddingRight');
textField.width = w;
}
super.measure();
}
override public function measureText(s:String):TextLineMetrics
{
textField.text = s;
var lineMetrics:TextLineMetrics =
textField.getLineMetrics(0);
lineMetrics.width = textField.textWidth + 4;
lineMetrics.height = textField.textHeight + 4;
return lineMetrics;
}
}
}
Angela
http://whatsmytitletoday.blogspot.com/
