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.

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

    1. @Brian,

      It stopped because it is really hard to do with the beta SDKs. Often the API was changing so frequently I was constantly having to go back and recreate projects, update code, republish release SWFs and overwrite the originals. So instead of spending all that time maintaining old SWFs, I spent more time writing new content.

      Peter

  1. This doesn’t work in Flex Hero!!!!
    First there is no CSS style called icon!
    Second: CSS type selectors are not supported in components: ‘spark.components.Button’ !

  2. what use are examples that do not work and that are too difficult to go back to fix and to make to work … ads more confusion than worth … if the author can not be bothered to go back and fix his own stuff then what use is it all broken?

    1. FWIW, this does work in the latest publicly available Flex 4.5 beta build. But yes, I know that there are probably a few dozen (out of over 1400 examples on this blog) that are broken. That is part of the problem with publishing examples on beta SDKs. The alternative is that I don’t blog any examples until the features are signed off, or the SDK is released (which could mean no examples for months at a time).

      Peter

      1. Keep posting :).
        I support idea of posting screenshots (png) vs swf.

        Do you think it would be possible?

  3. Hi Peter,
    I have been using using your blog since last 10 months and it has never disappointed me. In fact I got the best I can say.., so please keep blogging and ignore the comments..

  4. I really appreciate all your work, it has solved so many of my code problems. I hope you post again someday. TY

  5. How about alignment of the icon?
    When i set iconplacement to top,
    icon stays at the left corner of my button.

Comments are closed.