FLEX实践：自定义弹出窗口与主页面的交互（仿造EBS的LOV窗口）

bobbai

　　自定义类LovColumn.as
　　package Class
{
public class LovColumn
{
  public var columnName:String;
  public var dataField:String;
  public var visible:Boolean=true;
  public function LovColumn()
  {
  }

}
}
　　自定义组件：LovComponent.mxml
　　<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
showCloseButton="true"
close="cancel()"
borderColor="#C6D7F5"
themeColor="#009DFF"
cornerRadius="10"
creationComplete="init()">
<mx:Script>
<![CDATA[
import Class.CarVO;
import Class.LovColumn;
import mx.collections.ArrayCollection;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.managers.*;
import mx.controls.*;

public var titleName:String;
public var columnArray:ArrayCollection=new ArrayCollection();
public var sourceArray:ArrayCollection=new ArrayCollection();
[Bindable]public var resultObject:Object=new Object();
[Bindable]public var mainApp:Object = null;
private function init():void{

  this.title=titleName;

  for(var i:Number=0;i<columnArray.length;i++){
   var column:DataGridColumn= new DataGridColumn();
   column.headerText = columnArray.columnName;
   column.dataField =columnArray.dataField;
   column.visible=columnArray.visible;
   dg.columns=dg.columns.concat(column);
  }
dg.dataProvider=sourceArray;
}

private function submit():void{
  resultObject=sourceArray[dg.selectedIndex];
  mainApp.resultObject=this.resultObject;
  cancel();
}
private function cancel():void{
  PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:DataGrid id="dg" x="10" y="10">

</mx:DataGrid>
<mx:Button x="359" y="250" label="Submit" click="submit()"/>

</mx:TitleWindow>
　　main.mxml
　　<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13"
backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#EAFCD1, #C9D6FE]" creationComplete="init()">

<mx:Script>
<![CDATA[
  import myComponent.LovComponent;
import Class.CarVO;
import Class.LovColumn;
import mx.collections.ArrayCollection;
import mx.managers.*;
import mx.controls.*;

var columnArray:ArrayCollection=new ArrayCollection();
var sourceArray:ArrayCollection=new ArrayCollection();
[Bindable]public var resultObject:Object=new Object();
private function init():void{
var lovColumn:LovColumn=new LovColumn();
  lovColumn.columnName="Car Name";
  lovColumn.dataField="name";

  var lovColumn2:LovColumn=new LovColumn();
  lovColumn2.columnName="Aviliable";
  lovColumn2.dataField="available";
  lovColumn2.visible=false;
  columnArray.addItem(lovColumn);
  columnArray.addItem(lovColumn2);

  var car:CarVO=new CarVO();
  car.name="Ford";
  car.available=true;
  var car1:CarVO=new CarVO();
  car1.name="Nissa";
  car1.available=true;
  var car2:CarVO=new CarVO();
  car2.name="BUICK";
  car2.available=false;
  sourceArray.addItem(car);
  sourceArray.addItem(car1);
  sourceArray.addItem(car2);
}

private function search():void{
  var lovComponent:LovComponent=LovComponent(PopUpManager.createPopUp(this,LovComponent,false));
lovComponent.mainApp = this;
  lovComponent.titleName="Car Search Window";
  lovComponent.columnArray=this.columnArray;
  lovComponent.sourceArray=this.sourceArray;
  lovComponent.resultObject=this.resultObject;
  lovComponent.width=500;
  lovComponent.height=400;
  PopUpManager.centerPopUp(lovComponent);

}

]]>
</mx:Script>
<mx:Label x="385" y="124" text="Result:"/>
<mx:TextInput x="459" y="122" id="carName" text="{resultObject.name}"/>
<mx:Button x="618" y="122" label="..." width="43" click="search()" cornerRadius="5" fillAlphas="[1.0, 1.0]" fillColors="[#FCF2D8, #F7F9FC]"/>

</mx:Application>
　　运行结果：