4 Replies Latest reply on Aug 15, 2011 12:53 PM by miguel8312

    spark components children compared to mx components children

    miguel8312 Level 3

      Guys

      Im wondering why  when you have children on a halo component in this case canvas component and you resize the component say from 100px to 20px do the children dissapear. But if you do the same with a spark component the component resizes but the children are left behind on the screen. I think pictures is worth a thousand words look at these application

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
       <fx:Style source="TEstComponents.css"/>
       <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:Parallel>
         <s:Resize id="resize" heightTo="0" target="{IconContainer}" />
         <s:Resize id="resize2" heightTo="0" target="{IconContainer2}" />
        </s:Parallel>
        
       
       
       </fx:Declarations>
       
       
       <fx:Script>
         <![CDATA[
         
          private function sizeContainer():void {
           
           resize.play();
         }
          
          private function sizeContainer2():void {
           
           resize2.play();
          } 
          
          
          
        ]]>
       </fx:Script>
       
       <s:Group x="0" y="-3" width="100%" height="100%">
        
      <mx:Canvas x="250" y="225" id="g1"   borderVisible="true" borderStyle="solid">
       <!--<s:layout>
        <s:HorizontalLayout/>
       </s:layout>-->
       
       <mx:Canvas id="IconContainer" x="0" y="69" width="318" height="41" borderStyle="solid">
         <s:Button id="temp" x="6" y="3" chromeColor="#8E8A8A" click="sizeContainer();" color="#292626" label="run with canvas"/>
       
       </mx:Canvas>
       
      </mx:Canvas>
       
       
        
        <mx:Canvas x="250" y="101" id="g2"   borderVisible="true" borderStyle="solid">
         <!--<s:layout>
         <s:HorizontalLayout/>
         </s:layout>-->
         
         <s:BorderContainer id="IconContainer2" x="0" y="69" width="318" height="41" borderStyle="solid">
          
          <s:backgroundFill>        
           <!--0 rotation creates left to right gradient--> 
           <s:LinearGradient rotation="270">         
            <s:GradientEntry color="#CFCFCF"/>    
            <s:GradientEntry color="#F5F5F5"/>       
           </s:LinearGradient>   
          </s:backgroundFill> 
          
          <s:Button id="run2" label="run with spark container" click="sizeContainer2();" chromeColor="#B4A7A7"/>
         </s:BorderContainer>
         
        </mx:Canvas>
      </s:Group>
      
      </s:Application>
      


      very simple two containers with a simple resize animation one resizes and children dissapears the other  leaves the children behind? what is the reason for that? how can i make the spark bordercontainer behave more like the canvas? or what im doing wrong conceptually.

      Thanks in advance for any help.

      Miguel