Question

我想通过扩展一个Spark类来创建一个自定义的可重用组件，以便它有一个复选框和一个标签，显示为Show Image。选中复选框后，将显示图像而不是标签。 Image路径应作为API公开。我们如何扩展spark.components.Button以使其具有labe或image复选框（图像路径应该是动态的）。

我尝试按如下方式扩展Button类，但不确定如何在其中创建复选框以及如何将图像路径作为参数传递给它。

package myClasses
{
    import spark.components.Button;

    public class ImageCheckBox extends Button
    {
        public function ImageButton()
        {
            super();
            this.buttonMode = true;
        }
    }
}

我想在应用程序中使用类似下面的自定义组件。

<myClasses:ImageCheckBox skinClass="mySkins.HelpButtonSkin" path="...."" label="Show Image" />

Answer 1

像这样的东西

package myClasses {
import flash.events.Event;

import spark.components.CheckBox;
import spark.components.Image;
import spark.components.Label;
import spark.components.supportClasses.SkinnableComponent;

public class ImageCheckBox extends SkinnableComponent {
    [SkinPart(required=true)]
    public var checkBox:CheckBox;

    [SkinPart(required=true)]
    public var labelComp:Label;

    [SkinPart(required=true)]
    public var image:Image;

    private var pathChanged:Boolean = false;
    private var _path:String;
    public function get path():String {
        return _path;
    }

    public function set path(value:String):void {
        if (_path != value) {
            _path = value;
            pathChanged = true;
            invalidateProperties();
        }
    }

    private var labelChanged:Boolean = false;
    private var _label:String;
    public function get label():String {
        return _label;
    }

    public function set label(value:String):void {
        if (_label != value) {
            _label = value;
            labelChanged = true;
            invalidateProperties();
        }
    }

    public function ImageCheckBox() {
        super();
        setStyle("skinClass", ImageCheckBoxSkin);
    }

    override protected function partAdded(partName:String, instance:Object):void {
        super.partAdded(partName, instance);

        if (instance == checkBox) {
            checkBox.addEventListener(Event.CHANGE, checkBoxChangeHandler)
        }
        else if (instance == labelComp) {
            labelComp.text = label;
        }
        else if (instance == image) {
            image.source = path;
        }
    }

    override protected function partRemoved(partName:String, instance:Object):void {
        super.partRemoved(partName, instance);

        if (instance == checkBox) {
            checkBox.removeEventListener(Event.CHANGE, checkBoxChangeHandler)
        }
    }

    override protected function getCurrentSkinState():String {
        return checkBox.selected ? "selected" : super.getCurrentSkinState();
    }

    override protected function commitProperties():void {
        if (labelChanged) {
            labelChanged = false;
            labelComp.text = label;
        }

        if (pathChanged) {
            pathChanged = false;
            image.source = path;
        }

        super.commitProperties();
    }

    private function checkBoxChangeHandler(event:Event):void {
        invalidateSkinState();
    }
}}

皮肤

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx">

<!-- host component -->
<fx:Metadata>
    <![CDATA[
    /**
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("myClasses.ImageCheckBox")]
    ]]>
</fx:Metadata>

<s:states>
    <s:State name="normal"/>
    <s:State name="selected"/>
</s:states>

<s:HGroup width="100%" height="100%" gap="3">
    <s:CheckBox id="checkBox"
                verticalCenter="0"
                height="100%"/>
    <s:Label id="labelComp"
             verticalCenter="0" verticalAlign="middle"
             width="100%" height="100%"
             visible.normal="true" includeInLayout.normal="true"
             visible.selected="false" includeInLayout.selected="false"/>
    <s:Image id="image"
             verticalCenter="0"
             width="100%" height="100%"
             fillMode="scale" scaleMode="letterbox"
             visible.normal="false" includeInLayout.normal="false"
             visible.selected="true" includeInLayout.selected="true"/>
</s:HGroup>

我想创建一个自定义复选框，在标签和图像之间切换

1 个答案: