Flex Examples
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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex Hero SDK, see http://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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
You use to always have running swf’s on your blog. How come thats stopped, it was real handy.
@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
I get you. But what about just a screenshot of the component/app your demo-ing? That would be very good as well.
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’ !
This does work in the latest Flex Hero/4.5. I verified in Flex 4.5 (build 19786) from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero
Please download the latest SDK and try again.
Peter
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?
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
Don’t listen to this ungrateful ****, youre doing a great job, thanks a lot
Keep posting :).
I support idea of posting screenshots (png) vs swf.
Do you think it would be possible?
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..
I think Setting an icon on a Spark Button in Flex Hero is a bit difficult.Let me try it….
I really appreciate all your work, it has solved so many of my code problems. I hope you post again someday. TY
I am really thankful to you,you have done a great job and it had helped me a lot in my projects.
Peter,
There is a plug in now that allows people to syntax highlight their code in the comments called WP Syntax Highlighter. See here,
http://www.judahfrangipane.com/blog/2011/01/16/stagewebview-uicomponent/comment-page-1/#comment-203632
Link to the WordPress plugin page,
http://wordpress.org/extend/plugins/wp-syntaxhighlighter/
grt job, with few experiments with your above code i learnt a lot. thanks peter..
amazing….great help…
thanks again for sharing useful information
Today it has been more than an year since your last update. Anything I might have missed?
How about alignment of the icon?
When i set iconplacement to top,
icon stays at the left corner of my button.