BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Archive for September, 2010

Using Background image in flex 4 components

Posted by Shardul Singh Bartwal on September 5, 2010

Flex 4 components are not having any property like backgroundImage.
Now showing image in the background of any component like canvas, vbox etc is not so simple as it was in flex 3.0.
Below is the example for achieving this.

Main Application

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
>

<fx:Script>
<![CDATA[
protected function btn_click(evt:MouseEvent):void {
this.setStyle("skinClass", MySkinClass);
}

]]>
</fx:Script>

<s:Button label="Change Back Ground Image" click="btn_click(event);"/>

</s:Application>

MySkinClass.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"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>
[HostComponent("spark.components.supportClasses.SkinnableComponent")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>

<s:BitmapImage source="@Embed('image1.jpg')"  smooth="true" left="0" right="0"  top="0" bottom="0"  />

</s:Skin>

enjoy flexing……..


Posted in Flex 4 | 3 Comments »