Setting bordercontainer backgroundimage from inside component

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!