RE: [flexcoders] Creating a Flex 4 button skin - need examples

Peter DeHaan Wed, 24 Mar 2010 17:24:04 -0700

The Spark BitmapImage component only supports embedded images in Flex 4.0.
You could use mx:Image instead if you want to use dynamically loaded images, or 
you could check out Steven Shongrunden's blog post, 
http://flexponential.com/2010/03/17/using-non-embedded-images-in-a-spark-bitmapimage/
 and see if that helps.


Peter



From: [email protected] [mailto:[email protected]] On Behalf 
Of dorkie dork from dorktown
Sent: Wednesday, March 24, 2010 5:14 PM
To: [email protected]
Subject: Re: [flexcoders] Creating a Flex 4 button skin - need examples



Thanks Peter. That worked as is but when I removed the embed directive it 
seemed does not show anything. I tried this:

    <s:BitmapImage source="assets/images/close_button.png"
                   source.over="assets/images/close_button.png"
                   source.down="assets/images/close_button.png"
                   width="13" height="13" minHeight="13" minWidth="13"/>

Thanks for your help so far. Any idea to get this to work without embedding?
On Wed, Mar 24, 2010 at 4:49 PM, Peter DeHaan 
<[email protected]<mailto:[email protected]>> wrote:

Not sure if it is the best/correct way, but this seemed to work for me based on 
my 2 second testing...

Short answer:

    <s:BitmapImage source="@Embed('assets/images/close_button_up.png')"
            source.over="@Embed('assets/images/close_button_over.png')"
            source.down="@Embed('assets/images/close_button_down.png')" />



Long answer:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
        
xmlns:s="library://ns.adobe.com/flex/spark<http://ns.adobe.com/flex/spark>"
        xmlns:mx="library://ns.adobe.com/flex/mx<http://ns.adobe.com/flex/mx>">

    <fx:Style>
        @namespace s 
"library://ns.adobe.com/flex/spark<http://ns.adobe.com/flex/spark>";
        @namespace mx 
"library://ns.adobe.com/flex/mx<http://ns.adobe.com/flex/mx>";

        s|Button#closebutton {
            skinClass: ClassReference("ClButtonSkin");
        }
    </fx:Style>

    <s:Button id="closebutton"
            left="12"
            top="11"
            buttonMode="true"
            useHandCursor="true"
            mouseChildren="false"/>

</s:Application>




<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009";
        
xmlns:s="library://ns.adobe.com/flex/spark<http://ns.adobe.com/flex/spark>"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009";
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized.
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];

            override public function get colorizeExclusions():Array {
                return exclusions;
            }

            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }

            override protected function updateDisplayList(unscaledWidth:Number, 
unscaledHeight:Number) : void {
                var cr:Number = getStyle("cornerRadius");

                if (cornerRadius != cr) {
                    cornerRadius = cr;
                }

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }

            private var cornerRadius:Number = 2;
        ]]>
    </fx:Script>

    <s:BitmapImage source="@Embed('assets/images/close_button_up.png')"
            source.over="@Embed('assets/images/close_button_over.png')"
            source.down="@Embed('assets/images/close_button_down.png')" />

    <!-- layer 8: text -->
    <s:Label id="labelDisplay"
            textAlign="center"
            verticalAlign="middle"
            maxDisplayedLines="1"
            horizontalCenter="0" verticalCenter="1"
            left="10" right="10" top="2" bottom="2" />

</s:SparkSkin>

From: [email protected]<mailto:[email protected]> 
[mailto:[email protected]<mailto:[email protected]>] On 
Behalf Of dorkie dork from dorktown
Sent: Wednesday, March 24, 2010 4:28 PM
To: [email protected]<mailto:[email protected]>
Subject: [flexcoders] Creating a Flex 4 button skin - need examples



If my button skin was like this in Flex 3:

<fx:Style>

Button.closebutton {
upSkin: Embed(source="assets/images/close_button_up.png");
downSkin: Embed(source="assets/images/close_button_over.png");
overSkin: Embed(source="assets/images/close_button_down.png");
selectedUpSkin: Embed(source="assets/images/close_button_up.png");
selectedDownSkin: Embed(source="assets/images/close_button_up.png");
selectedOverSkin: Embed(source="assets/images/close_button_up.png");
}
</fx:Style>

<s:Button style="closebutton"
left="12"
top="11" buttonMode="true" useHandCursor="true" mouseChildren="false"/>

Now, I've tried to do the same thing in a Flex 4 button skin and there
is SOOOO much code and all of it is FXG. I've read it and understand
it but when I've created my own and stripped all the FXG out there are
issues with resizing, issues with positioning (on mouse over) and
more.

Will someone please create an example equivalent to what the Flex 3
code above is doing?

ddfd

RE: [flexcoders] Creating a Flex 4 button skin - need examples

Reply via email to