2 Replies Latest reply on Dec 29, 2011 12:12 AM by Mac_06

    Child alignment in custom component Flex 3

    Mac_06 Level 2

      Hi,

        

      I am newbie to Flex and stuck on very essential point.

      I am trying to align children in custom component as horizontally center and vertically middle but in result it is not aligning them at all.

       

       

      This is my custom componet 'LoadingPanel.mxml' under component package which childrens I want to align center.

       

      <?xml version="1.0" encoding="utf-8"?>
       
      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
                   width="100%"
                   height="100%"                                   
                   title="DCP v1.1" horizontalAlign="center" verticalAlign="middle">
           
           
           <mx:Panel backgroundColor="#BB3030" width="300" headerHeight="15">
                 
                 <mx:ProgressBar id="bar"
                                      indeterminate="true"
                                      labelPlacement="top"
                                      minimum="0"
                                      visible="true"
                                      maximum="100"
                                      label="Loading..." 
                                      direction="right"
                                      mode="manual"
                                      width="100%"
                                      trackHeight="14"
                                      
                                      color="#FFFFFF"/>
           </mx:Panel>
           </mx:Panel>
      
      

       

      Here is my main application where I am using this custom component

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx: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" xmlns:component="component.*">
           <fx:Declarations>
                 <!-- Place non-visual elements (e.g., services, value objects) here -->
           </fx:Declarations>
           <component:LoadingPanel/>
      </mx:Application>
      
      

       

      I also tried to give alignment in custom component instantiation.

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx: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" xmlns:component="component.*">
           <fx:Declarations>
                 <!-- Place non-visual elements (e.g., services, value objects) here -->
           </fx:Declarations>
           <component:LoadingPanel horizontalAlign="center" verticalAlign="middle"/>
      </mx:Application>
      
      

       

      I am pretty sure, there must be any way to do it but it is hard luck for me.

       

      Thanks

      Mac