Setting the icon placement on a Spark Button control in Flex Hero

In a previous example, “Setting an icon on a Spark Button in Flex Hero”, we saw how you can set the icon on a Spark Button in Flex Hero by setting the icon style.

The following example shows how you can set the icon placement on a Spark Button control in Flex Hero by setting the iconPlacement style.

The following example(s) require Flash Player 10 and the beta Adobe Flex Hero SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex Hero SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/12/18/setting-the-icon-placement-on-a-spark-button-control-in-flex-hero/ -->
<s:Application name="Spark_Button_iconPlacement_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Button {
            icon: Embed("assets/asterisk_orange.png");
        }
    </fx:Style>
 
    <s:Button id="btn1"
            label="iconPlacement=left"
            iconPlacement="left" />
    <s:Button id="btn2"
            label="iconPlacement=right"
            iconPlacement="right" />
    <s:Button id="btn3"
            label="iconPlacement=top"
            iconPlacement="top" />
    <s:Button id="btn4"
            label="iconPlacement=bottom"
            iconPlacement="bottom" />
 
</s:Application>

You can also set the iconPlacement style in an external .CSS file or <Style> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/12/18/setting-the-icon-placement-on-a-spark-button-control-in-flex-hero/ -->
<s:Application name="Spark_Button_iconPlacement_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Button {
            icon: Embed("assets/asterisk_orange.png");
        }
        s|Button#btn1 {
            iconPlacement: left;
        }
        s|Button#btn2 {
            iconPlacement: right;
        }
        s|Button#btn3 {
            iconPlacement: top;
        }
        s|Button#btn4 {
            iconPlacement: bottom;
        }
    </fx:Style>
 
    <s:Button id="btn1"
            label="iconPlacement=left" />
    <s:Button id="btn2"
            label="iconPlacement=right" />
    <s:Button id="btn3"
            label="iconPlacement=top" />
    <s:Button id="btn4"
            label="iconPlacement=bottom" />
 
</s:Application>

Or you can set the iconPlacement style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/12/18/setting-the-icon-placement-on-a-spark-button-control-in-flex-hero/ -->
<s:Application name="Spark_Button_iconPlacement_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import spark.components.IconPlacement;
 
            protected function init():void {
                btn1.setStyle("iconPlacement", IconPlacement.LEFT);
                btn2.setStyle("iconPlacement", IconPlacement.RIGHT);
                btn3.setStyle("iconPlacement", IconPlacement.TOP);
                btn4.setStyle("iconPlacement", IconPlacement.BOTTOM);
            }
        ]]>
    </fx:Script>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Button {
            icon: Embed("assets/asterisk_orange.png");
        }
    </fx:Style>
 
    <s:Button id="btn1"
            label="iconPlacement=left" />
    <s:Button id="btn2"
            label="iconPlacement=right" />
    <s:Button id="btn3"
            label="iconPlacement=top" />
    <s:Button id="btn4"
            label="iconPlacement=bottom" />
 
</s:Application>

This entry is based on a beta version of the Flex Hero SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Hero SDK.

Latest Images

Trending Articles

Latest Images