Как создать пользовательскую кнопку Flex 4 с 3 метками

Question

Я хотел бы создать пользовательский компонент Button с тремя метками: слева, по центру и по правому краю.Я не могу просто использовать свойство выравнивания меток, потому что хочу использовать все 3 метки одновременно.

Я знаком с созданием пользовательских компонентов, но никогда не пытался создать такой, какэто раньше ...

Вот что у меня есть:

<?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>

Ярлыки не изменятся после создания кнопки, поэтому я не беспокоюсь по поводу пропавших без вести [Bindable] metadata.

Я застрял прямо сейчас, получая следующую ошибку компилятора:

Несколько значений инициализатора для свойства по умолчанию, 'label', типа 'String'.

... для каждой из 3 <s:Label> строк.

Исходя из этого ответа к аналогичному вопросу, я попытался добавить label="" к своему <s:Button> декларация, но это просто добавляет еще одну ошибку.

Как мне это исправить?

Answer 1

Ваша проблема в том, что тег с именем label под тегом кнопки не является элементом типа label, это метка, используемая на кнопке, и имеет тип string.

Почему бы не сделать это как скин, а не как пользовательский компонент?

<?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>

Это будет работать с этим классом:

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