flex使用布局容器

flex使用布局容器

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="525" height="400"
viewSourceURL="src/LayoutContainers/index.html"
>
<!--容器纳提供全局导航和应用程序-->
<mx:ApplicationControlBar dock="true">
 <mx:Label text="ApplicationControlBar" fontFamily="Verdana" fontWeight="bold" fontSize="12"/>
 <mx:Spacer width="100%"/>
 <mx:Button label="Log out"/>
</mx:ApplicationControlBar>

<mx:Panel layout="horizontal" title="Panel" width="100%" height="100%">
<!---->
 <mx:HDividedBox width="100%" height="100%">
  <mx:Panel width="100%" height="100%" headerHeight="0" borderStyle="solid" shadowDistance="0">
   <mx:Label text="Panel (without header)" fontWeight="bold" />
   <mx:Form>
    <mx:FormHeading label="First form" />
    <mx:FormItem label="Name:">
     <mx:TextInput width="100"/>
    </mx:FormItem>
    <mx:FormItem label="Email:">
     <mx:TextInput width="100"/>
    </mx:FormItem>
   </mx:Form>
  </mx:Panel>
  <mx:Panel width="100%" height="100%" headerHeight="0" borderStyle="solid" shadowDistance="0">
   <mx:Label text="Panel (without header)" fontWeight="bold" />
   <mx:Form>
    <mx:FormHeading label="Second form" />
    <mx:FormItem label="Name:">
     <mx:TextInput width="100"/>
    </mx:FormItem>
    <mx:FormItem label="Email:">
     <mx:TextInput width="100"/>
    </mx:FormItem>
   </mx:Form>
  </mx:Panel>
 </mx:HDividedBox>
<!--提交-->
 <mx:ControlBar horizontalAlign="center">
  <mx:Label text="ControlBar in Panel" fontWeight="bold"/>
  <mx:Spacer width="100%"/>
  <mx:Button label="Prev"/>
  <mx:Button label="Finish"/>
 </mx:ControlBar>
</mx:Panel>

</mx:Application>