Setting bordercontainer backgroundimage from inside component - apache-flex

Question

For my flex project I am making, I'm trying to change the background of my website change to the image I have clicked on. The background in my main page I have set like this:
<s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="#Embed('assets/background.png')" borderAlpha="0">
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<mx:LinkBar styleName="mainnav" width="600" dataProvider="content" horizontalCenter="0" paddingLeft="20" paddingTop="125"/>
<s:Image top="5" bottom="5" horizontalCenter="50" source="assets/nav.png"/>
<mx:ViewStack id="content">
<mx:HBox id="home"
label="Home">
<component:home/>
</mx:HBox>
<mx:HBox id="bio"
label="Bio">
<component:bio/>
</mx:HBox>
<mx:HBox id="portfolio"
label="Portfolio">
<component:portfolio/>
</mx:HBox>
<mx:HBox id="contact"
label="Contact">
<component:contact/>
</mx:HBox>
</mx:ViewStack>
</s:BorderContainer>
Now from inside my component, I am trying to set the the background of the image you click on.
<fx:Script>
<![CDATA[
import mx.core.Application;
public function changeBackground(event:MouseEvent):void
{
Application.application.backgroundContainer.setStyle('backgroundImage', img1.source);
}
]]>
</fx:Script>
I call this function when you click on an image.
<mx:Image id="img1" source="assets/placeholder.jpg" click="changeBackground(event)"/>
But it doesn't work.
So I was wondering how this should be done?
Thank you,
Thomas

Answer 1

you can use BitmapFill and declare all your backgrounds first. Also, be sure your changeBackground function is public in your main application since it will be called from a component.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:component="component.*">
<fx:Script>
<![CDATA[
public function changeBackground(bitmapFillObj:BitmapFill):void
{
backgroundContainer.backgroundFill = bitmapFillObj;
}
]]>
</fx:Script>
<fx:Declarations>
<s:BitmapFill id="_bg1" source="#Embed('assets/bg1.jpg')"/>
<s:BitmapFill id="_bg2" source="#Embed('assets/bg2.jpg')"/>
</fx:Declarations>
<s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="#Embed('assets/bg1.jpg')" borderAlpha="0">
<component:home/>
</s:BorderContainer>
</s:WindowedApplication>
And now your component
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="click to show bg 1" click="FlexGlobals.topLevelApplication.changeBackground(FlexGlobals.topLevelApplication._bg1)"/>
<s:Button label="click to show bg 2" click="FlexGlobals.topLevelApplication.changeBackground(FlexGlobals.topLevelApplication._bg2)"/>
Your just have to adapt the code to your project, clicking on your images instead of buttons. Good luck!