How to create a custom Flex 4 button with 3 labels - apache-flex

Question

I would like to create a custom Button component with three labels: left-, center-, and right-justified. I can't just use the label justification property, because I want to use all 3 labels at the same time.
I'm familiar with creating custom components, but I've never tried to build one quite like this before...
Here's what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<s:Button
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
private var labelContentL:String;
private var labelContentC:String;
private var labelContentR:String;
public function set labelL(value:String):void
{
labelContentL = value;
}
public function set labelC(value:String):void
{
labelContentC = value;
}
public function set labelR(value:String):void
{
labelContentR = value;
}
public function get labelL():String
{
return labelContentL;
}
public function get labelC():String
{
return labelContentC;
}
public function get labelR():String
{
return labelContentR;
}
]]>
</fx:Script>
<s:Label id="l" width="100%" text="{labelContentL}" textAlign="left" paddingLeft="10" />
<s:Label id="c" width="100%" text="{labelContentC}" textAlign="center" />
<s:Label id="r" width="100%" text="{labelContentR}" textAlign="right" paddingRight="10" />
</s:Button>
The labels won't change after the button is created, so I'm not worried about the missing [Bindable] metadata.
I'm stuck right now, getting the following compiler error:
Multiple initializer values for default property, 'label', of type 'String'.
...for each of the 3 <s:Label> lines.
Based on this answer to a similar question, I tried adding label="" to my <s:Button> declaration, but that just adds another error.
How do I fix this?

Answer 1

Your problem is that a tag named label under the button tag isn't an item of type label, it's the label used on the button, and is of type string.
Why not do it as a skin, rather than a custom component?
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("ThreeLabelButton")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="disabled" />
<s:State name="down" />
<s:State name="over" />
<s:State name="up" />
</s:states>
<s:Rect bottomLeftRadiusX="5"
bottomRightRadiusX="5"
topLeftRadiusX="5"
topRightRadiusX="5"
top="0" left="0" right="0" bottom="0">
<s:fill>
<s:SolidColor color.up="#CCCCCC" color.over="#555555" color.down="#888888" />
</s:fill>
</s:Rect>
<mx:Label id="leftLabel" text="{hostComponent.leftText}" left="0" />
<mx:Label id="rightLabel" text="{hostComponent.rightText}" right="0" />
<mx:Label id="centerLabel" text="{hostComponent.centerText}" left="{(this.width - centerLabel.width) / 2}" />
</s:Skin>
This will work with this class:
import mx.controls.Label;
import spark.components.supportClasses.ButtonBase;
public class ThreeLabelButtonComponent extends ButtonBase
{
public function ThreeLabelButtonComponent()
{
super();
}
[SkinPart]
public var leftLabel:Label;
[SkinPart]
public var rightLabel:Label;
[SkinPart]
public var centerLabel:Label;
[Bindable]
public var leftText:String;
[Bindable]
public var rightText:String;
[Bindable]
public var centerText:String;
protected override function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if(instance === leftLabel)
{
leftLabel.text = leftText;
}
if(instance === rightLabel)
{
rightLabel.text = rightText;
}
if(instance === centerLabel)
{
centerLabel.text = centerText;
}
}
}