Установка фонового изображения bordercontainer изнутри компонента - PullRequest
Новая
       14

Установка фонового изображения bordercontainer изнутри компонента

0 голосов
/ 30 ноября 2011

Для моего проекта flex, который я делаю, я пытаюсь изменить фон моего веб-сайта и изменить изображение, на которое я нажал.Фон на главной странице я установил следующим образом: 

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

Теперь внутри моего компонента я пытаюсь установить фон изображения, на котором вы щелкнете.* Я вызываю эту функцию, когда вы нажимаете на изображение. 

<mx:Image id="img1" source="assets/placeholder.jpg" click="changeBackground(event)"/>

Но она не работает.Мне было интересно, как это сделать?

Спасибо, Томас

1 Ответ

1 голос
/ 30 ноября 2011

Вы можете использовать BitmapFill и сначала объявить все свои фоны.Кроме того, убедитесь, что ваша функция changeBackground общедоступна в вашем основном приложении, поскольку она будет вызываться из компонента. 

<?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>

А теперь ваш компонент 

<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)"/>

Вам просто нужно адаптировать код к вашему проекту, нажимая на изображения вместо кнопок.Удачи!

...