Skip navigation
10chars
Currently Being Moderated

Using setStyle() to change container background from color to image

Feb 16, 2011 5:18 AM

Is there anyway to use setStyle() to change the background of a BorderContainer from a color to an image using as3?

 

I have a BorderContainer that contains a label that when clicked changes the containers color depending on an external variable which is easy enough but if that variable is a certain value I want to display a backgroundImage.  Is this possible?

 

At the moment I've trying to do it essentially like this but don't get any image when button 3 is clicked...

 

 


<?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" height="100%" width="100%">
 
     <fx:Script>
 
 
     <![CDATA[
 
     protected function buttonClickHandler(event:MouseEvent, val:int):void
     {
 
          if(val == 1){
                    display.setStyle("backgroundColor","#000000");
          }else if(val == 2){
               display.setStyle("backgroundColor","#ff0000");
          }else{
               display.setStyle("backgroundImage","image.png");
          }
 
     }
 
     ]]>
 
     </fx:Script>
 
 
     <s:BorderContainer id="display" width="50%" height="50%">
          <s:layout>
          <s:VerticalLayout horizontalAlign="center"/> 
          </s:layout>
 
          <s:Button label="A" click="buttonClickHandler(event,1)"/>
          <s:Button label="B" click="buttonClickHandler(event,2)"/>
          <s:Button label="C" click="buttonClickHandler(event,3)"/>
 
     </s:BorderContainer>
 
 
 
</s:WindowedApplication>
 
 
 
 
 
 
 
 
 
 
Replies
  • Currently Being Moderated
    Feb 16, 2011 6:06 AM   in reply to 10chars

    hehe looks like you beat me to it you don't need to make myImage bindable in this example though btw

     

    <?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"
                            height="100%" width="100%">
       
        <fx:Script>


            <![CDATA[
                [Embed('image.png')]
                private var imageClass:Class;
               
                protected function buttonClickHandler(event:MouseEvent, val:int):void
                {
                   
                     if(val == 1){
                        display.clearStyle("backgroundImage");
                        display.setStyle("backgroundColor","#000000");
                    }else if(val == 2){
                        display.clearStyle("backgroundImage");
                        display.setStyle("backgroundColor","#ff0000");
                    }else{
                        display.setStyle("backgroundImage", imageClass);
                    }
                }
               
            ]]>
           
        </fx:Script>
       
        <s:BorderContainer id="display" width="50%" height="50%">
            <s:layout>
                <s:VerticalLayout horizontalAlign="center"/>
            </s:layout>
           
            <s:Button label="A" click="buttonClickHandler(event,1)"/>
            <s:Button label="B" click="buttonClickHandler(event,2)"/>
            <s:Button label="C" click="buttonClickHandler(event,3)"/>
           
        </s:BorderContainer>
       
       
       
    </s:WindowedApplication>
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points