Flex 使用module 父子窗口传值 .

[flash=200,200]
一、module

1 overview

module是可以由application加载和卸载的swf文件。通过将application分解成若干个module，可以减小application文件的大小，并减少首次加载的时间。module不能独立于application运行，也不能加载到浏览器窗口，只能通过application加载

2 write

可以通过AS代码或MXML标签定义module

MXML方式：

<?xml version="1.0"?>
<!-- modules/moduletest.mxml -->
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" >
<mx:Label text="Module Test"/>
</mx:Module>

AS方式：必须继承mx.modules.ModuleBase或mx.modules.Module

// modules/asmodules/SimpleModule.as
package {
import mx.modules.ModuleBase;

public class SimpleModule extends ModuleBase {
public function SimpleModule() {
trace("SimpleModule created");
}

public function computeAnswer(a:Number, b:Number):Number {
return a + b;
}
}
}

3 compile

可使用命令行mxmlc编译模块。

module的大小依赖于它所包含的组件和类，如果module链接了与application类重叠的类则module会比较大，要减小module的大小，需要把module指向由application包含的具体类。module只包含它需要的类，框架代码及其他依赖代码包含在application中。若用命令行编译，需要为application创建一个linker report，并把这个report放入module的编译选项中

mxmlc: -link-report=report.xml MyApplication.mxml

mxmlc: -load-extern=report.xml MyModule.mxml

4 load

<?xml version="1.0"?>
<!-- modules/ASModuleLoaderApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.modules.*;

public function createModule(m:ModuleLoader, s:String):void {
if (!m.url) {
m.url = s;
return;
}
m.loadModule();
}

public function removeModule(m:ModuleLoader):void {
m.unloadModule();
}
]]>
</mx:Script>

<mx:Panel title="Module Example" >
<mx:VBox id="vb1" label="Column Chart Module">
<mx:Button label="Load" click="createModule(chartModuleLoader, l1.text)" />
<mx:Button label="Unload" click="removeModule(chartModuleLoader)" />
<mx:Label id="l1" text="Module1.swf"/>
<mx:ModuleLoader id="chartModuleLoader"/>
</mx:VBox>
</mx:Panel>
</mx:Application>



二：窗口传值

子窗口定义

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="296" height="379">
<mx:Script>
<![CDATA[

[Bindable]
public var functionXml:XML; //定义子窗口属性

]]>
</mx:Script>
</mx:Application>

父窗口定义

import mx.managers.PopUpManager;



private function openFunc(event:MouseEvent):void
{
var child:ChildWindow= ChildWindow(PopUpManager.createPopUp(this,ChildWindow,true));

child.functionXml = XML({xmlData}); //为子窗口传值
}


[/flash]

<?xml version="1.0"?>
<!-- modules/URLModuleLoaderApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="srcview/index.html">

<mx:Panel title="Module Example"
height="90%"
width="90%"
paddingTop="10"
paddingLeft="10"
paddingRight="10"
paddingBottom="10">

<mx:Label width="100%"
color="blue"
text="Select the tabs to change the panel."/>

<mx:TabNavigator id="tn"
width="100%"
height="100%"
creationPolicy="auto">

<mx:VBox id="vb1"
label="Column Chart Module">

<mx:Label id="l1"
text="ColumnChartModule.swf"/>
<mx:ModuleLoader url="ColumnChartModule.swf"/>

</mx:VBox>

<mx:VBox id="vb2"
label="Pie Chart Module">

<mx:Label id="l2"
text="piehchartmodule.swf"/>
<mx:ModuleLoader url="piechartmodule.swf"/>

</mx:VBox>

<mx:VBox id="vb3"
label="Line Chart Module">

<mx:Label id="l3"
text="linehchartmodule.swf"/>
<mx:ModuleLoader url="linechartmodule.swf"/>

</mx:VBox>

</mx:TabNavigator>
</mx:Panel>

</mx:Application>


linechartmodule.mxml


<?xml version="1.0"?>
<!--ColumnChartModule.mxml -->
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
height="100%">

<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection=new ArrayCollection([

{Month: "Jan", Profit: 2000, Expenses: 1500},
{Month: "Feb", Profit: 1000, Expenses: 200},
{Month: "Mar", Profit: 1500, Expenses: 500}]);

]]>
</mx:Script>

<mx:ColumnChart id="myChart"
dataProvider="{expenses}">

<mx:horizontalAxis>

<mx:CategoryAxis dataProvider="{expenses}"
categoryField="Month"/>

</mx:horizontalAxis>

<mx:series>

<mx:ColumnSeries xField="Month"
yField="Profit"
displayName="Profit"/>

<mx:ColumnSeries xField="Month"
yField="Expenses"
displayName="Expenses"/>

</mx:series>

</mx:ColumnChart>

<mx:Legend dataProvider="{myChart}"/>

</mx:Module>