How to create a custom Flex 4 button with 3 labels

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;  
        }
    }
}