Wednesday, July 29, 2009

Extending Flex buttons... can you help me?

**Edit - this has been solved thanks to the help of Marcus: view the entry here**

I never claimed to be a Flex expert... and this only proves why.

Back story: I am trying to extend a Flex button to be something I'm calling a legend button. Essentially it is a button that also doubles as a legend. When the toggle is on that line is on the chart, when the toggle is off that line is removed from the chart. The button 'color' and the line color have to match.

What I am currently trying to do: I am trying to extend the button component and add a Box (10pxx10px). What is happening however, is the box is showing up underneath the button itself, so when the button alpha is 100% (i.e. when toggle is on) you can't see the box.

Here's the 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;
}

}
}


Here's what they look like. Sad isn't it? :(

10 comments:

Marcus said...

Hi Angela,

I found your post about "Flex - Hide and show tab in tabnavigator" and it looks very interesting. I have to try it. :-)

I looked at your blog and you mentioned that you have a problem with extending a flex button to display a "legend" (post is from 29.July.2009). Do you still have this problem?

Maybe I can help you.

Thanks

Marcus

Ang said...

Sure do! I am thinking I am going to have to somehow make an icon dynamically using bitmapasset or something.

Marcus said...

It's not really clear to me, what you want to do. Do you want to display an image on the left side of the text when you toggle the button? Or some text?

Ang said...

Neither. If you look at the little picture in the post, you can see what I'm looking for. A square box with a fill of a color I pass it, so that it will match with the chart. What I have right now works, until you toggle the button on and it disappears because the box is being created underneath the button.

Marcus said...

hi,

the LegendButton is almost finished. :-)

Just a small positioning question. How should the icons be positioned if both icons were set:

legendIcon -> default icon -> textfield

or

default icon -> legendIcon -> textfield

And I need an e-mail address to send the complete LegendButton to you.

Best regards

Marcus

Ang said...
This comment has been removed by the author.
Marcus said...

mail is on the way

amy said...

Hi. I'm trying to extend a button in a similar way. The icon and text I add is sitting beneath the original skin. I can see it, but its opacity is really light. Do you have any idea what would cause this?

Ang said...

Marcus was nice enough to give me permission to post his solution on this blog! So hold tight Amy, I will post it shortly!

ArtMan said...

Hi,

I found your solution very nice,
i just want to offer an improvement.

using Containers such as Canvas , Box (VBox/HBox), Panels, etc.. are very
consumer of cpu, the rezones are they calculate many time and redraw them self in order to locate they children component in the right place in they layout.

i look at your and Marcus solutions. and i sew that you using legendIcon:Box and it easily can replace with more lighter component like UICompnent that drew it skin.

if i get time i will try to rewrite this component and make it lighter

Thanks!!

Ziv