CODEWITHSUNDEEP
actionscript-3apache-flexflex4
spring
spring

Reputation: 18497

loading Skin images dynamically

(another of my never ending questions...)

I need an image component with states which behaves like a ToggleButton. Rather than build from scratch I thought I would try subclassing ToggleButton and defining a custom Flex skin. I don't have much experience with skinning and have cobbled together the code below.

It seems to work well – binding BitmapImages in the skin to BitmapData loading in the button instance: <s:BitmapImage source="{hostComponent.upImageData}"

Am I on the right track with this approach? Is there a more standard approach to this sort of thing?

ToggleButton Skin

<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"
                   minWidth="21" minHeight="21" 
                   alpha.disabledStates="0.5">
    <fx:Metadata>[HostComponent("components.EventButton")]</fx:Metadata>

    <!-- host component -->
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>

    <s:BitmapImage source="{hostComponent.upImageData}" 
                   includeIn="up, disabled"
                   left="0" right="0" top="0" bottom="0" />

    <s:BitmapImage source="{hostComponent.overImageData}" 
                   left="0" right="0" top="0" bottom="0" 
                   includeIn="over"/>

    <s:BitmapImage source="{hostComponent.downImageData}" 
                   left="0" right="0" top="0" bottom="0" 
                   includeIn="down, upAndSelected, overAndSelected, downAndSelected"/>
</s:Skin>

ToggleButton

<?xml version="1.0" encoding="utf-8"?>
<s:ToggleButton xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          xmlns:skins = "skins.*"
          skinClass="skins.EventSkin"
          creationComplete="creationCompleteHandler(event)">

    <fx:Script>
        <![CDATA[

            [Bindable]
            public var upImageData:BitmapData;

            [Bindable]
            public var overImageData:BitmapData;

            [Bindable]
            public var downImageData:BitmapData;

            [Bindable]
            public var disabledImageData:BitmapData;

            // image loading code removed

        ]]>
    </fx:Script>
</s:ToggleButton>

Upvotes: 0

Views: 226

Answers (2)

Brian
Brian

Reputation: 3914

As another option, you should be able to use the state variable syntax:

<s:ToggleButton icon.up="{upIcon}"
        icon.over="{overIcon}"
        icon.down="{downIcon}"
        icon.disabled="{disabledIcon}"
        icon.upAndSelected="{upAndSelectedIcon}"
        icon.overAndSelected="{overAndSelectedIcon}"
        icon.downAndSelected="{downAndSelectedIcon}"
        icon.disabledAndSelected="{disabledAndSelectedIcon}" />

See this Apache mailing list thread for more discussion on this.

Upvotes: 1

Crabar
Crabar

Reputation: 1857

Yep, you are going in right way. The "Skin mechanism" is really powerful and flexible tool. I had similar task about year ago and I solved it in the same way (just with standard ToggleButton and custom skin). All changes in visual representation of spark component might to be in skin class.

Upvotes: 1

Related Questions