3 Replies Latest reply on Mar 8, 2010 10:58 AM by Flex harUI

    UIComponent not respecting layout

    alexandre.roitman Level 1

      Hello,

       

      I have created a MXML Group component that receives data and populate with movieclips 5 different mx:UIComponen. Here is my Group declaration:

      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/halo" width="260" height="160"
           initialize="init()">
      

       

      These are my UIComponents:

       

      <s:VGroup>
           <mx:UIComponent id="randBottle1" click="bottleClicked(event)" />
           <mx:UIComponent id="randBottle2" click="bottleClicked(event)"/>
           <mx:UIComponent id="randBottle3" click="bottleClicked(event)"/>
           <mx:UIComponent id="randBottle4" click="bottleClicked(event)"/>
           <mx:UIComponent id="randBottle5" click="bottleClicked(event)"/>
      </s:VGroup>
      

       

       

      And the init() function, that waits for a response from the server and populates the 5 UIComponents:

      private function init():void
                     {
                          UIMessage.Instance.addEventListener("userLoggedIn", retrieveData);
                     }
                     
                     private function retrieveData(e:Event):void
                     {
                          getRandomBottlesResult.token = randBottleService.GetRandomBottles(5);
                     }
                     
                     private function randomBottlesResultHandler(e:ResultEvent):void
                     {
                           bottles = e.result as ArrayCollection;
                           var mc1:MovieClip = new bottle2();
                           randBottle1.addChild(mc1);
                           var mc2:MovieClip = new bottle2();
                           randBottle2.addChild(mc2);
                           var mc3:MovieClip = new bottle2();
                           randBottle3.addChild(mc3);
                           var mc4:MovieClip = new bottle1();
                           randBottle4.addChild(mc4);
                           var mc5:MovieClip = new bottle1();
                           randBottle5.addChild(mc5);
                           
                           bottlesMove.play();
                     }
      
      
      

       

      The thing is that all the movieclips show up in the same location. They are not in vertical layout. The same phenomen occurs in another component that has several UIComponents populated by movieclips and despite being inside a HGroup are added to the stage in the same place.

       

      Can anyone tell me if I'm doing something wrong?

      Thanks