BTA Flexing

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

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


Advertisements

3 Responses to “Using Background image in flex 4 components”

  1. […] Using Background image in flex 4 components « BTA Flexing […]

  2. Thanks for the article. I was recently interested in this topic. Very interesting and informative. I wish more such articles on this portal.

  3. Mac Adobe said

    Mac Adobe…

    […]Using Background image in flex 4 components « BTA Flexing[…]…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: