Search Flex Samples

Setting an icon in a Button control

There are two general methods for embedding an icon into a Button control. The first method involves creating a variable in the Flex application, and using the [Bindable] and [Embed] meta data. You specify the path to the icon in the source parameter of the Embed meta data and then to use the icon in a Button, you use data binding, which in this case would look like icon="{Icon}". The second method, embeds the icon inline in the Button tag itself, by using @Embed() and specifying the path to the image file as a parameter.
See the full code after the jump.




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

backgroundColor="white">

<mx:Script>

<![CDATA[

[Bindable]

[Embed(source="assets/bug.png")]

private var Icon:Class;

]]>

</mx:Script>

<mx:Button label="[Embed(source='assets/bug.png')]"

icon="{Icon}" />

<mx:Button label="@Embed('assets/bug.png')"

icon="@Embed('assets/bug.png')" />

</mx:Application>

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples