mxml往另外的mxml传值的问题

今天碰到一个关于mxml往另外的mxml传值的问题。原本需要实现的是，通过在A.mxml的一个button来控制B.mxml上的一个图形组件的全部展开/全部收缩功能的。
例子如下：A.mxml
<mx:ApplicationControlBar xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" alpha="0.74" cornerRadius="0"  visible="true" dock="true" fontSize="12" height="31">
<mx:Button label="全部展开" fontSize="12" fontFamily="MSYH" click="onCollapseClick(event)" height="22"/>
<mx:Button id="btnExpand"  label="全部收缩" fontSize="12" fontFamily="MSYH"  click="onExpandClick(event)" />       
<mx:Script>
<![CDATA[ 
[Bindable]
private var appModel : AppModelLocator = AppModelLocator.getInstance();
private function onExpandClick(e:MouseEvent):void
{   
appModel.GraphExpand=true;
appModel.GraphCollapse=false;
dispatchEvent(new Event("GraphExpand",true,false));
}

private function onCollapseClick(e:MouseEvent):void
{
appModel.GraphExpand=false;
appModel.GraphCollapse=true;
dispatchEvent(new Event("GraphCollapse",true,false));
}
]]>
</mx:Script>
</mx:ApplicationControlBar>
B.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initial();"  right="0" bottom="3" top="3" horizontalAlign="left" verticalAlign="bottom" fontFamily="MSYH" fontSize="16" fontWeight="bold" left="213" borderColor="#6D8AB5" width="100%" height="100%" headerHeight="25" xmlns:ns1="org.un.cava.birdeye.ravis.graphLayout.visual.*" xmlns:ns2="syec.topo.view.ApplicationControlBar.*" >
<mx:Script>
<![CDATA[   
[Bindable]
private var model:AppModelLocator = AppModelLocator.getInstance();   

private function initial():void{      
this.addEventListener("GraphExpand",GraphExpand);
this.addEventListener("GraphCollapse",GraphCollapse);
BindingUtils.bindProperty(this,"GraphExpand",model,"GraphExpand");
BindingUtils.bindProperty(this," GraphCollapse",model,"GraphCollapse");
}

public  function   GraphExpand(b:Boolean):void{
vgraph.ExpandAll();
}

public  function   GraphCollapse(b:Boolean):void{
vgraph.CollapseAll();
}
]]>
</mx:Script>

<ns1:VisualGraph Expand="{model.GraphExpand}" Collapse="{model.GraphCollapse}" id="vgraph">
</ns1:VisualGraph>
</mx:Panel>

可以看到，在上面的代码中，采取了两种方案，橙色的方案一，办法很简单，直接在A.mxml里面派发一个事件，另外在B.mxml里面去捕捉这个事件，并且写下对应的处理方法即可。

蓝色的方案2,是我在项目里面的处理办法，新增一个的AppModelLocator类，代码如下：
package Model{
[Bindable]
public class  AppModelLocator {
public var GraphExpand:Boolean;
public var GraphCollapse:Boolean;
public static var appModel:AppModelLocator;

public function AppModelLocator():void{
if(appModel !=null){
throw new Error( "Only one ModelLocator instance should be instantiated" );
}
}

public  static function getInstance():AppModelLocator{
if(appModel==null){
appModel=new AppModelLocator();               
}
return appModel;
}
}
}
,由于vgraph控件里面的Expand和Clooapse方法和AppModelLocator类里面的Expand和Collapse属性绑定在一起了，所以当Expand和Collapse发生变化时，vgraph控件会重新实现Expand和Clooapse方法。

方案1和方案2的优缺点正好互补。方案一简单、方便。缺点是在大项目中，在MXML反复进行派发、捕获事件可能让你的代码变得耦合性非常严重。方案2利用了MVC的思想，把所有的数据存储在M中（AppModelLocator），利用单例模式，对mxml需要显示的数据进行了绑定，做到了页面和逻辑分离。如果对这样的设计模式感兴趣，请参阅Cairngorm学习.