2 Replies Latest reply: Feb 16, 2011 6:06 AM by _spoboyle RSS

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

    10chars

      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>
      
      
      
      
      
      
      
      
      
      
        • 1. Re: Using setStyle() to change container background from color to image
          10chars Community Member

          OK, sorry think I've fixed the problem by embedding the image using the call:

           

          [Embed(source="image.png")]
          [Bindable]
          public var myImage:Class;
          
          ...
          
          display.setStyle("backgroundImage",myImage);
          
          

           

          and then using display.clearStyle() to remove the image if I want the go back to displaying a color   It seems to work ok, noot sure if this is the best/correct way of doing it though?

          • 2. Re: Using setStyle() to change container background from color to image
            _spoboyle Community Member

            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>