Using Background image in flex 4 components

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……..

Advertisements