熟悉EBS的朋友应该对Folder的功能很了解吧,不熟悉的朋友可经先预先了解一下,以下是我所实现的Folder功能(实现内容只有FOLDER中的一部分):
1)New file — 为表格创建一个模板,保存表格当前列的各种设置
2)Save file — 保存创建的模板
3)Open file — 打开创建过的模板
4)Delete file —删除已创建的模板
5)Change Prompt —修改列标题
6)Hide Field —隐藏列
7)Show Field —显示列
8)Widen Field —自动增加列宽
9)Shrink Field —自动缩小列宽
10)Move Right —列右移
11)Move Left —列左移
大家都知道,FLEX DataGrid提供了很多功能,允许用户改变列的顺序等。本次的实践将实现以上描述的功能,但不涉及数据库。若要将DataGrid列的信息保存到数据库中,会更复杂些,不过思路大致上是一样的。
1、先来看主应用程序
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:component="components.*"
creationComplete="init()"
fontSize="13">
<mx:Script>
<!--[CDATA[
import components.OpenWindow;
import components.ShowFieldWindow;
import mx.controls.dataGridClasses.DataGridColumn;
import components.PromptWindow;
import mx.events.ListEvent;
import mx.controls.listClasses.IListItemRenderer;
import components.FolderWindow;
import mx.controls.Alert;
import mx.managers.PopUpManager;
//创建datagrid列模板
var columnTemplate:ArrayCollection=new ArrayCollection();
//模板名称
var templateName:String;
//选中列的序号
var columnIndex:Number =-1;
private function init():void{
this.addEventListener('OpenEvent',openHandler);
this.addEventListener('SaveEvent',saveHandler);
this.addEventListener('NewEvent',newHandler);
this.addEventListener('DeleteEvent',deleteHandler);
this.addEventListener('ChangePromptEvent',changePromptHandler);
this.addEventListener('HideEvent',hideFieldHandler);
this.addEventListener('ShowEvent',showHandler);
this.addEventListener('WidenEvent',widenHandler);
this.addEventListener('ShrinkEvent',shrinkHandler);
this.addEventListener('MoveRightEvent',moveRightHandler);
this.addEventListener('MoveLeftEvent',moveLeftHandler);
}
private function itemClickHandler(event:ListEvent):void{
columnIndex = event.columnIndex;
}
//打开文件夹窗口
var openWin:OpenWindow = new OpenWindow();
private function openHandler(evt:Event):void{
openWin = OpenWindow(PopUpManager.createPopUp(this,OpenWindow,true));
openWin.chooseFlag = openWin.OPEN_FLAG;
openWin.winTitle = '打开文件夹';
openWin.grid.dataProvider = this.columnTemplate;
openWin.addEventListener("OpenFileEvent",openFileHandler);
}
private function openFileHandler(evt:Event):void{
var tempColumns:Array=new Array();
for(var i:Number=0; i<columnTemplate[openWin.rowIndex]['columns'].length; i++){
var datagridColumn:DataGridColumn = new DataGridColumn();
datagridColumn.dataField = columnTemplate[openWin.rowIndex]['columns'][i].dataField;
datagridColumn.labelFunction = columnTemplate[openWin.rowIndex]['columns'][i].labelFunction;
datagridColumn.headerText = columnTemplate[openWin.rowIndex]['columns'][i].headerText;
datagridColumn.width = columnTemplate[openWin.rowIndex]['columns'][i].width;
datagridColumn.visible = columnTemplate[openWin.rowIndex]['columns'][i].visible;
tempColumns.push(datagridColumn);
}
grid.columns = tempColumns;
folderTitle.text = columnTemplate[openWin.rowIndex]['name'];
grid.dataProvider = dg1;
}
//删除文件夹窗口
var deleteWin:OpenWindow = new OpenWindow();
private function deleteHandler(evt:Event):void{
deleteWin = OpenWindow(PopUpManager.createPopUp(this,OpenWindow,true));
deleteWin.grid.dataProvider = this.columnTemplate;
deleteWin.winTitle = '删除文件夹';
deleteWin.chooseFlag = deleteWin.DELETE_FLAG;
deleteWin.addEventListener('DeleteFileEvent',deleteFileHandler);
}
private function deleteFileHandler(evt:Event):void{
this.columnTemplate.removeItemAt(deleteWin.rowIndex);
}
//修改datagrid列标题
var promptWin:PromptWindow = new PromptWindow();
private function changePromptHandler(evt:Event):void{
if(columnIndex == -1){
Alert.show("请先选择其中一列!");
}else{
promptWin=PromptWindow(PopUpManager.createPopUp( this, PromptWindow , true));
promptWin.addEventListener("ChangePromptEvent",savePromptHandler);
}
}
private function savePromptHandler(evt:Event):void{
grid.columns[columnIndex].headerText = promptWin.prompt.text;
}
//新建模板名称:弹出窗口
var win:FolderWindow = new FolderWindow();
private function newHandler(evt:Event):void{
win=FolderWindow(PopUpManager.createPopUp( this, FolderWindow , true));
win.addEventListener("NewFileEvent",newFileHandler);
}
private function newFileHandler(evt:Event):void{
templateName = win.fileName.text;
saveTemplate();
}
//保存模板名称
private function saveHandler(evt:Event):void{
if(templateName){
saveTemplate();
}else{
win=FolderWindow(PopUpManager.createPopUp( this, FolderWindow , true));
win.addEventListener("NewFileEvent",newFileHandler);
}
}
//显示隐藏列
var showFieldWin:ShowFieldWindow = new ShowFieldWindow();
private function showHandler(evt:Event):void{
showFieldWin=ShowFieldWindow(PopUpManager.createPopUp( this, ShowFieldWindow , true));
showFieldWin.grid.dataProvider = hideColumnArray;
showFieldWin.addEventListener("ShowFieldEvent",showFieldHandler);
}
private function showFieldHandler(evt:Event):void{
var datagridColumn:DataGridColumn = new DataGridColumn();
datagridColumn.visible=true;
datagridColumn.width = showFieldWin.columnData.width;
datagridColumn.headerText = showFieldWin.columnData.headerText;
datagridColumn.dataField = showFieldWin.columnData.dataField;
//在指定列后面显示隐藏列(将grid.columns转换成ArrayCollection类型,利用ArrayCollection提供的方法实现隐藏列显示)
var tempColumns:ArrayCollection = new ArrayCollection(grid.columns);
tempColumns.addItemAt(datagridColumn,this.columnIndex+1);
grid.columns = tempColumns.toArray();
hideColumnArray.removeItemAt(showFieldWin.columnIndex);
}
//加宽列
private function widenHandler(evt:Event):void{
grid.columns[this.columnIndex].width=grid.columns[this.columnIndex].width+20;
}
//缩短列宽
private function shrinkHandler(evt:Event):void{
grid.columns[this.columnIndex].width=grid.columns[this.columnIndex].width-20;
}
//保存模板
private function saveTemplate():void{
var temp:Object=new Object();
var tempColumns:Array=new Array();
for(var i:Number=0; i<grid.columns.length; i++){
var obj:Object=new Object();
obj.headerText = grid.columns[i].headerText;
obj.dataField = grid.columns[i].dataField;
obj.width = grid.columns[i].width;
obj.labelFunction = grid.columns[i].labelFunction;
obj.visible = grid.columns[i].visible;
obj.columnIndex = i;
tempColumns.push(obj);
}
temp['name']=win.fileName.text;
temp['columns']=tempColumns;
columnTemplate.addItem(temp);
win = new FolderWindow();
templateName = null;
Alert.show("Save template: "+temp['name']);
}
//隐藏列
var hideColumnArray:ArrayCollection = new ArrayCollection(); //数据库保存时的deleteArray
private function hideFieldHandler(evt:Event):void{
if(columnIndex==-1){
Alert.show("请先选择其中一列!");
}else{
//删除该column前先将其信息保存
var obj:Object=new Object();
obj.index = columnIndex;
obj.headerText = grid.columns[columnIndex].headerText;
obj.dataField = grid.columns[columnIndex].dataField;
obj.width = grid.columns[columnIndex].width;
obj.labelFunction = grid.columns[columnIndex].labelFunction;
hideColumnArray.addItem(obj);
//通过Array转化成ArrayCollection实现column的移除
var a:ArrayCollection = new ArrayCollection(grid.columns);
a.removeItemAt(columnIndex);
grid.columns=a.toArray();
}
}
//列右移
private function moveRightHandler(evt:Event):void{
if(columnIndex == -1){
Alert.show("请选择其中一列!");
}else if(columnIndex+1 == grid.columns.length){
Alert.show("该列无法右移!");
}else{
var temp:Object=new Object();
temp = grid.columns[this.columnIndex+1];
var tempColumns:Array = grid.columns;
tempColumns[columnIndex+1] = tempColumns[columnIndex];
tempColumns[columnIndex] = temp;
grid.columns = tempColumns;
}
}
//列左移
private function moveLeftHandler(evt:Event):void{
if(columnIndex == -1){
Alert.show("请选择其中一列!");
}else if(columnIndex-1 == -1){
Alert.show("该列无法左移!");
}else{
var temp:Object=new Object();
temp = grid.columns[this.columnIndex];
var tempColumns:Array = grid.columns;
tempColumns[columnIndex] = tempColumns[columnIndex-1];
tempColumns[columnIndex-1] = temp;
grid.columns = tempColumns;
}
}
]]-->
</mx:Script>
<mx:ArrayCollection id="dg">
<mx:Object name="A" code="A1" des="A2" enabled="true"/>
<mx:Object name="B" code="B1" des="B2" enabled="false"/>
<mx:Object name="C" code="C1" des="C2" enabled="true"/>
<mx:Object name="D" code="D1" des="D2" enabled="true"/>
</mx:ArrayCollection>
<mx:ArrayCollection id="dg1">
<mx:Object name="A" code="A1" des="A2" enabled="true"/>
<mx:Object name="B" code="B1" des="B2" enabled="false"/>
<mx:Object name="C" code="C1" des="C2" enabled="true"/>
<mx:Object name="D" code="D1" des="D2" enabled="true"/>
<mx:Object name="E" code="E1" des="E2" enabled="true"/>
</mx:ArrayCollection>
<mx:DataGrid id="grid" dataProvider="{dg}" width="60%"
x="193" y="142" itemClick="itemClickHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Code" dataField="code"/>
<mx:DataGridColumn headerText="Description" dataField="des"/>
<mx:DataGridColumn headerText="Enabled" dataField="enabled"/>
</mx:columns>
</mx:DataGrid>
<component:FolderComponent width="100%" />
<mx:HBox x="193" y="112">
<mx:Image source="assets/folder.jpg" click="{dispatchEvent(new Event('OpenEvent'));}"/>
<mx:Label width="137" id="folderTitle" fontWeight="bold" />
</mx:HBox>
</mx:Application>
2、FolderComponent.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<!--[CDATA[
import mx.events.MenuEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
public var menuProvider:ArrayCollection = new ArrayCollection();
private function init():void{
var obj:Object = new Object();
obj.name="Folder";
obj.data="folder";
var objChild:ArrayCollection = new ArrayCollection();
var objChild1:Object = new Object();
objChild1.name="Open";
objChild1.data="open";
var objChild2:Object = new Object();
objChild2.name="Save";
objChild2.data="save";
var objChild3:Object = new Object();
objChild3.name="New File";
objChild3.data="new";
var objChild4:Object = new Object();
objChild4.name="Change Prompt";
objChild4.data="changePrompt";
var objChild5:Object = new Object();
objChild5.name="Hide Field";
objChild5.data="hideField";
var objChild6:Object = new Object();
objChild6.name="Show Field";
objChild6.data="showField";
var objChild7:Object = new Object();
objChild7.name="Widen Field";
objChild7.data="widenField";
var objChild8:Object = new Object();
objChild8.name="Shrink Field";
objChild8.data="shrinkField";
var objChild9:Object = new Object();
objChild9.name="Delete";
objChild9.data="delete";
var objChild10:Object = new Object();
objChild10.name="Move Right";
objChild10.data="moveRight";
var objChild11:Object = new Object();
objChild11.name="Move Left";
objChild11.data="moveLeft";
objChild.addItem(objChild1);
objChild.addItem(objChild2);
objChild.addItem(objChild3);
objChild.addItem(objChild9);
objChild.addItem(objChild4);
objChild.addItem(objChild5);
objChild.addItem(objChild6);
objChild.addItem(objChild7);
objChild.addItem(objChild8);
objChild.addItem(objChild10);
objChild.addItem(objChild11);
obj.children=objChild;
var obj2:Object = new Object();
obj2.name="Other";
obj2.data="2";
menuProvider.addItem(obj);
menuProvider.addItem(obj2);
menuProvider.refresh();
}
private function showMenu(event:MenuEvent):void{
//为不同的选项发布不同的事件
if(event.item.data=='open'){
this.dispatchEvent(new Event('OpenEvent',true));
}else if(event.item.data=='save'){
this.dispatchEvent(new Event('SaveEvent',true));
}else if(event.item.data=='new'){
this.dispatchEvent(new Event('NewEvent',true));
}else if(event.item.data=='delete'){
this.dispatchEvent(new Event('DeleteEvent',true));
}else if(event.item.data=='changePrompt'){
this.dispatchEvent(new Event('ChangePromptEvent',true));
}else if(event.item.data=='hideField'){
this.dispatchEvent(new Event('HideEvent',true));
}else if(event.item.data=='showField'){
this.dispatchEvent(new Event('ShowEvent',true));
}else if(event.item.data=='widenField'){
this.dispatchEvent(new Event('WidenEvent',true));
}else if(event.item.data=='shrinkField'){
this.dispatchEvent(new Event('ShrinkEvent',true));
}else if(event.item.data=='moveRight'){
this.dispatchEvent(new Event('MoveRightEvent',true));
}else if(event.item.data=='moveLeft'){
this.dispatchEvent(new Event('MoveLeftEvent',true));
}
}
]]-->
</mx:Script>
<mx:MenuBar id="folderMenu" dataProvider="{menuProvider}" width="100%" labelField="name" itemClick="showMenu(event)"/>
</mx:HBox>
3、FolderWindow.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"
showCloseButton="true" close="closeHandler()" layout="absolute" fontSize="13" title="创建文件夹">
<mx:Script>
<!--[CDATA[
import mx.managers.PopUpManager;
private function closeHandler(){
PopUpManager.removePopUp(this);
}
private function save():void{
this.dispatchEvent(new Event('NewFileEvent',true));
closeHandler();
}
]]-->
</mx:Script>
<mx:VBox width="100%">
<mx:Spacer width="100%" height="80"/>
<mx:FormItem width="100%" label="文件夹" labelWidth="80">
<mx:TextInput width="80%" id="fileName"/>
</mx:FormItem>
</mx:VBox>
<mx:Button label="确定" width="80" click="save()" x="290" y="186"/>
</mx:TitleWindow>
4、OpenWindow.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"
showCloseButton="true" close="closeHandler()" layout="absolute" fontSize="13" title="{winTitle}">
<mx:Script>
<!--[CDATA[
import mx.events.ListEvent;
import mx.managers.PopUpManager;
import mx.controls.Alert;
public var rowIndex:Number =-1;
public var columnData:Object=new Object();
public var chooseFlag:String;
public var OPEN_FLAG:String='OPEN';
public var DELETE_FLAG:String='DELETE';
public var winTitle:String;
private function closeHandler(){
PopUpManager.removePopUp(this);
}
private function save():void{
if(rowIndex == -1){
Alert.show("请先选择其中一行!");
}else{
if(chooseFlag == OPEN_FLAG){
this.dispatchEvent(new Event('OpenFileEvent',true));
}else if(chooseFlag == DELETE_FLAG){
this.dispatchEvent(new Event('DeleteFileEvent',true));
}
closeHandler();
}
}
private function itemClickHandler(evt:ListEvent):void{
rowIndex = evt.rowIndex;
}
]]-->
</mx:Script>
<mx:VBox width="100%">
<mx:DataGrid id="grid" itemClick="itemClickHandler(event)" width="80%">
<mx:columns>
<mx:DataGridColumn headerText="名称" dataField="name"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
<mx:Button label="确定" width="80" click="save()" x="290" y="224"/>
</mx:TitleWindow>
5、PromptWindow.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"
showCloseButton="true" close="closeHandler()" layout="absolute" fontSize="13" title="更改提示">
<mx:Script>
<!--[CDATA[
import mx.managers.PopUpManager;
private function closeHandler(){
PopUpManager.removePopUp(this);
}
private function save():void{
this.dispatchEvent(new Event('ChangePromptEvent',true));
closeHandler();
}
]]-->
</mx:Script>
<mx:VBox width="100%">
<mx:Spacer width="100%" height="80"/>
<mx:FormItem width="100%" label="提示" labelWidth="80">
<mx:TextInput width="80%" id="prompt"/>
</mx:FormItem>
</mx:VBox>
<mx:Button label="确定" width="80" click="save()" x="290" y="186"/>
</mx:TitleWindow>
6、ShowFieldWindow.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"
showCloseButton="true" close="closeHandler()" layout="absolute" fontSize="13" title="显示隐藏列">
<mx:Script>
<!--[CDATA[
import mx.events.ListEvent;
import mx.managers.PopUpManager;
import mx.controls.Alert;
public var columnIndex:Number =-1;
public var columnData:Object=new Object();
private function closeHandler(){
PopUpManager.removePopUp(this);
}
private function save():void{
if(columnIndex == -1){
Alert.show("请先选择其中一行!");
}else{
this.columnData['headerText'] = grid.selectedItem.headerText;
this.columnData['width'] = grid.selectedItem.width;
this.columnData['dataField'] = grid.selectedItem.dataField;
this.columnData['visible'] = grid.selectedItem
this.dispatchEvent(new Event('ShowFieldEvent',true));
closeHandler();
}
}
private function itemClickHandler(evt:ListEvent):void{
columnIndex = evt.rowIndex;
}
]]-->
</mx:Script>
<mx:VBox width="100%">
<mx:DataGrid id="grid" itemClick="itemClickHandler(event)" width="80%">
<mx:columns>
<mx:DataGridColumn headerText="列名" dataField="headerText"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
<mx:Button label="确定" width="80" click="save()" x="290" y="224"/>
</mx:TitleWindow>
代码就是以下这些,下面展示一下主要功能:
1)原始状态
2)调换列的顺序
3)保存该模板
4)隐藏列
5)保存模板
6)修改列标题
7)在指定列后面显示隐藏列
8)打开文件夹(显示保存过的模板)
9)删除已保存的模板
以上就是其中主要功能的演示图片,有兴趣的朋友可以自己试一下。