如何利用Flash Builder4.0创建VDividedBox

1、首先，在新建的Flex项目下的src中的默认包下新建Flex应用程序“VDividedBox.mxml”，如下图所示：

2、在Flex应用程序中，插入

<mx:VDividedBox width="100%" height="100%"></mx:VDividedBox>

如下图所示：

3、在VDividedBox添加两个HBox

<mx:HBox width="100%" height="50%" borderColor="0x00FF00" borderStyle="solid" 

borderVisible="true">

</mx:HBox>

<mx:HBox width="100%" height="50%" borderColor="0x0000FF" borderStyle="solid" 

borderVisible="true">

</mx:HBox>

如下图所示：

4、为了区别不同的模块，再在每个HBox添加Accordion

<mx:Accordion width="100%" height="100%">

</mx:Accordion>

如下图所示：

5、在每个Accordion添加三个NavigatorContent

<mx:Accordion width="100%" height="100%">

<s:NavigatorContent label="AAAA

</s:NavigatorContent>

<s:NavigatorContent label="BBBB

</s:NavigatorContent>

<s:NavigatorContent label="CCCC

</s:NavigatorContent>

</mx:Accordion>

<mx:Accordion width="100%" height="100%">

<s:NavigatorContent label="aaaa

</s:NavigatorContent>

<s:NavigatorContent label="bbbb

</s:NavigatorContent>

<s:NavigatorContent label="cccc

</s:NavigatorContent>

</mx:Accordion>

如下图所示：

6、运行Flex应用程序，如下图所示：