8 Replies Latest reply on Jul 2, 2009 8:44 AM by G009

    Setting Canvas Background Color issue

    CannotCompute Level 1

      For some reason I cannot set a color for my canvas background. I have tried using setStyle('backgroundColor', colorNumber); in actionscript and setting directly in the mxml with no success. It only takes the value that is set in the design mode of Flex.  Ideally I want to load in a color value from an xml file and use that color value, which I have been doing for other components, but for some reason the canvas will not work. Any ideas???

        • 1. Re: Setting Canvas Background Color issue
          G009 Level 1

          <mx:Canvas width="200" height="200" backgroundColor="{colorvalue}">

          ........

          </mx:Canvas>

           

          I am not sure but this should work. Read color value from xml and store it in say "[Bindable]public var colorvalue:Number".

          Try to keep value in 0x000000 format.

          • 2. Re: Setting Canvas Background Color issue
            CannotCompute Level 1

            Yeah that is what I am doing and still no results.... I have it working with other components but for some reason the canvas is being stubborn.

            • 3. Re: Setting Canvas Background Color issue
              *Prashant Shelke* Level 4

              <mx:Style source="/assets/css/project.css" />

              <mx:Canvas height="100%" width="100%" styleName="mainContainerCanvas" >


              in project.css


              .mainContainerCanvas
              {
                  cornerRadius    : 10;
                  borderStyle     : solid;
                  backgroundColor : #BECEE5;
                  borderColor     : #000000;
              }

              • 4. Re: Setting Canvas Background Color issue
                G009 Level 1

                Yes prashant your solution looks promising.

                • 5. Re: Setting Canvas Background Color issue
                  CannotCompute Level 1

                  The only problem with that is I want to change the color using at runtime depending on a value in a xml file.

                  • 6. Re: Setting Canvas Background Color issue
                    G009 Level 1

                    ok let me work on that. I have worked on other components and has changed there color. I'll post my code here.

                    • 7. Re: Setting Canvas Background Color issue
                      CannotCompute Level 1

                      I figured out my issue.  Partly my fault, but I still partly blame Flex for trying to be overly helpful.

                       

                      I had to delete a parameter in my <mx:states> that Flex automatically added when I changed its default color. The states must be read in after the the component has been initialized and then it would change it to the value in there.  Let the be a warning to you all that Flex automatically adds parameteres in your mx:states (if you choose to use them) and you must have that parameter clear in order to manually change that property at runtime.

                       

                       

                      DELETED: <mx:SetStyle target="{ViewCanvas}" name="backgroundColor" value="0x000000"/>

                      • 8. Re: Setting Canvas Background Color issue
                        G009 Level 1

                        Ok this is complete code, where i'm reading xml through wrapper which you can do it through HTTPservice. Make sure you put proper swf name while embeding.

                         

                        <!--------------------------------------------------------------mxml code---------------------------------------------------------------------->

                         

                        <?xml version="1.0" encoding="utf-8"?>

                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="create()" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">

                         

                        <mx:Script>

                        <![CDATA[

                        import mx.utils.ColorUtil;

                        import com.anychart.visual.fill.Fill;

                        import com.anychart.styles.Style;

                        import mx.collections.XMLListCollection;

                        import mx.rpc.events.ResultEvent;

                        import mx.controls.Alert;

                         

                        [Bindable]

                              public var inputdata:XMLListCollection;

                              [Bindable]

                             public var canvasData:String;

                             [Bindable]

                             public var list:XMLList;

                             [Bindable]

                             public var mycolors:Array = new Array();

                             public var count:int=0;

                             public var clrname:String;

                                

                            public function create():void{

                            //Reading data from wrapper

                            canvasData=mx.core.Application.application.parameters.canvasData;

                            //convert into xml      

                                list = new XMLList(canvasData);

                                //datasource

                                inputdata = new XMLListCollection(list);

                                for(var j:int=0;j<3;j++){

                            for each(var item:XML in inputdata){

                        mycolors[j] =item..name[j].toString();

                        }

                            }

                            }

                            public function showme():void{

                            var value:String=" ";

                            for(var i:int=0;i<3;i++){

                            value = mycolors[i]+"\n"+value;

                            }

                            Alert.show(value);    

                            }

                           

                            public function change():void{

                            if(count == 3){

                            count=0;

                            clrname=mycolors[count];

                            }

                            else{

                            clrname=mycolors[count];

                            }

                            Alert.show(count+" "+clrname); //This alert line is optional you can remove it all other lines are imp.

                            count++;

                            mycanvas.setStyle("backgroundColor",clrname);

                            }

                        ]]>

                        </mx:Script>

                         

                        <mx:Panel x="246.5" y="48" width="500" height="544" layout="absolute" backgroundColor="#E8E5E5">

                        <mx:Canvas id="mycanvas" x="55" y="40" width="370" height="436" backgroundColor="0xFFFFFF" cornerRadius="20">

                        <mx:Label x="51" y="55" text="This is Canvas" width="147" height="23" fontSize="17"/>

                        <mx:Button id="btn1" x="51" y="99" label="Show me" click="showme()"/>

                        <mx:Button id="btn2" x="152" y="99" label="Change"  click="change()"/>

                        </mx:Canvas>

                        </mx:Panel>

                         

                        </mx:Application>

                        <-------------------------------------------------------------------------------jsp code where swf embeded--------------------------------------------------------------------------->
                        <html lang="en">
                        <head>
                        <title></title>
                        <%
                            String canvasData = "<values><name>0xE4F9A0</name><name>0xA5BC4E</name><name>0x6693B0</name></values>";
                        %>
                        </head>
                        <body scroll="no">
                          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                        id="problem" width="100%" height="100%"
                        <param name="movie" value="problem.swf" />
                        <param name="quality" value="high" />
                        <param name="bgcolor" value="#869ca7" />
                        <param name="allowScriptAccess" value="sameDomain" />
                        <param name='FlashVars' value='canvasData= <%= canvasData %>'/>
                        <embed src="problem.swf" quality="high" bgcolor="#869ca7"
                        width="100%" height="100%" name="problem" align="middle"
                        play="true"
                        loop="false"
                        quality="high"
                        allowScriptAccess="sameDomain"
                        type="application/x-shockwave-flash"
                        FlashVars="canvasData= <%= canvasData %>">
                        </embed>
                        </object>
                        </body>
                        </html>