Flex Viewer解析-----结构(1)(3)

flexviewer解析,结构

com\esri\solutions\flexviewer\Controller.mxml

打开之后我们发现其显示部分很简洁：

<comp:Banner id="banner" status="{status}"/>

<mx:HBox id="menuContainer" horizontalGap="-25"

horizontalCenter="0" y="{banner.height - 20}"/>

其实其使用了一个定义好的组件Banner，这个组件才是这个控制条信息的主体部分。而control只是为这个组件提供必须的配置信息。

Banner组件位于components文件夹下，打开它，仔细查看其中的内容，我们就可以明白Viewer里面的B部分是怎么出来的了。

然后我们说说B部分的菜单是如何出来的。在Controller仅仅的两行设计代码里面我们可以看到有个叫做menuContainer的HBox，他就是负责显示菜单的。在程序的配置文件加载完成后，这个界面就会执行对菜单的配置，也就是下面的一个函数：

private function configureMenus():void

{

} for (var i:Number = 0; i < configData.configMenus.length; i++) { } var bw:Number = configData.configMenus.length * 90; if (bw > banner.minWidth) banner.width = bw; var menuId:String = configData.configMenus[i].id; var menuLabel:String = configData.configMenus[i].label; var menuIcon:String = configData.configMenus[i].icon; var menuItems:Array = configData.configMenus[i].items; var controllerMenu:ControllerMenu = new ControllerMenu(); controllerMenu.id = menuId; controllerMenu.menuLabel = menuLabel; controllerMenu.menuImage = menuIcon; controllerMenu.menuCollection = new ArrayCollection(menuItems); menuContainer.addChild(controllerMenu);

这里面使用了另外一个组件ControllerMenu，其定义位于Banner.mxml同目录下的ControllerMenu.mxml中，这个组件就是完成主菜单定义的主要控件。对于子菜单的定义我们在ControllerMenu中可以看到这句代码：

<mx:Repeater id="menuRepeater" dataProvider="{menuCollection}">

<comp:ControllerMenuItem itemId="{menuRepeater.currentItem.id}" itemLabel itemIcon itemRuleVisible itemAction ="{bel}" ="{menuRepeater.currentItem.icon}" ="{menuRuleVisible(menuRepeater.currentIndex)}"