Setting downIcon in Flex 4.7

Question

I Don't know how to set a downicon. In Flex 3 it was very easy because of the style property in the button. But how do you set a different downicon for a button in a Flex 4.7 mobile project?

Answer 1

Both method will help you. just try one by one..

BY Using First Method:

button have styleName name property and its have a skinProperty say DownIconSkin, by setting these property, you can set downIcon for button

By using this Second Method(Skin Of Button):

test.mxml

`

<?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"
           applicationDPI="160">

<fx:Script>
    <![CDATA[
        protected function btnSignButton_clickHandler(event:MouseEvent):void
        {
            trace('Hello, I am Clicked');
        }
    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button id="btnSignButton"
          label="Sign In"
          verticalCenter="0"
          horizontalCenter="0"
          skinClass="DownIconSkin"
          click="btnSignButton_clickHandler(event)"/></s:Application>

`

DownIconSkin.mxml

`

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

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

<!-- states -->
<s:states>
    <s:State name="disabled"/>
    <s:State name="down"/>
    <s:State name="over"/>
    <s:State name="up"/>
</s:states>

<!-- SkinParts
name=iconDisplay, type=spark.primitives.BitmapImage, required=false
name=labelDisplay, type=spark.core.IDisplayText, required=false
-->

<s:Label text="DownState"
         includeIn="down"/>
<s:Label text="upState"
         includeIn="up"/></s:Skin>

`

May this will help you... i am not added icon in it due to not have any icon. but label works then icon will definitely works