在Flex DataGrid 顯示檔案上傳進度

以下例子說明如何使用 flex datagrid 元件及 progressbar 顯示檔案上傳進度

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
verticalGap="0" layout="vertical" creationPolicy="all"
verticalAlign="middle" horizontalAlign="center" width="100%" 
height="100%">
<mx:Script><![CDATA[
import mx.collections.*;
import mx.controls.*;
import mx.events.*;
import mx.managers.*;
import mx.rpc.events.*;
import mx.rpc.remoting.*;
import mx.utils.*;
import flash.net.*;

private function openFileBrowse() : void {

function fileSelect(event:Event):void {
gridFileList.dataProvider=event.target['fileList'];
}


var fileList : FileReferenceList = new FileReferenceList();
fileList.addEventListener(Event.SELECT,fileSelect);
try {

fileList.browse( new Array(
new FileFilter("txt","*.txt")
) );
}
catch (e : Error) {

}
}


private function uploadFile() : void {

var request : URLRequest =
new URLRequest("http://yuoruploadpage");

request.contentType = "text/html; charset=big5";

if( gridFileList.dataProvider == null )
return;

for( var i : int = 0; i < gridFileList.dataProvider.length; i++ ) {

var fileRef: FileReference = gridFileList.dataProvider[i];
fileRef.upload(request, gridFileList.dataProvider[i]["name"]);
}
}


]]></mx:Script>

<mx:Panel width="750" height="100%" title="檔案上傳作業" paddingTop="3">

<mx:HBox width="100%" horizontalGap="0" height="50"
verticalAlign="middle" borderStyle="solid" paddingLeft="5">

<mx:Button label="選取上傳檔案" id="btnBrowse" click="openFileBrowse();"/>
<mx:Spacer width="5"/>
<mx:Button label="上傳檔案" id="btnUpload" click="uploadFile();"/>
<mx:Spacer width="5"/>

</mx:HBox>

<mx:DataGrid id="gridFileList" height="100%" width="100%">
<mx:columns>
<mx:DataGridColumn headerText="檔案名稱"
dataField="name" width="100"/>
<mx:DataGridColumn headerText="上傳進度" width="100">
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" >
<mx:Script><![CDATA[
import flash.events.ProgressEvent;

  override public function set data(value:Object):void {
   super.data = value;
   pb.maximum=0;
   pb.minimum=0;
   this.data.addEventListener(ProgressEvent.PROGRESS, progressHandler);
                                         
                                      }  
  private function progressHandler(event:ProgressEvent):void {
  pb.setProgress(event.bytesLoaded,event.bytesTotal);
  }
  
]]></mx:Script>
<mx:ProgressBar width="100%" mode="manual" id="pb" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

</mx:columns>
</mx:DataGrid>

</mx:Panel>

</mx:Application>

FLEX 共用底層

使用 Flex 開發程式,對於我而言,就是要做出類似 window AP 的效果.
window AP 通常有下面幾項特點

1.可以上下筆瀏覽資料
2.新增/刪除/修改/查詢 等功能,都做在同一個頁面上,即一個頁面就可以完成該子作業所有動作
3.所有該子作業資料都在一個頁面顯示

為了可以更方便快速開發程式,將系統結構做了以下的切割

1.與後端資料連結,封裝成元件
2.新增/刪除/修改/查詢/瀏覽 資料控制按鈕封裝成元件
3.系統 menu 資料是由後端資料庫得到,可因應每個人不同使用權限,顯示不同的 menu
4.系統有一個作業畫面載入容器,將作業畫面載入系統


因對系統結構做了上述的切割,我實作出一個底層系統,這個底層系統有下面特點

1.底層系統跟需求無關,也就是說,可以拿這個底層系統開發完全不同需求的系統
2.每個作業畫面可以單獨執行,方便開發與 debug
3.每個作業畫面由底層系統載入,底層系統與每個作業畫面,整合成完整系統

如何定義介面(續)

在定義需要介面初期，我希望這個介面能夠「共用」。所謂「共用」是希望能夠在往後的專案裡頭都能夠使用這個介面。

Flex 可輕易定義物件陣列。例如下

var arr:Array=new Array();

arr[0]=’abc’;

arr[1]=123;

arr[2]=new Date();

使用這樣的方式傳遞例如查詢使用的參數，只要一個變數就可以。剩下的工作，只要在中間層，使用相同的次序，就可以得到參數值。

上述方式與 hibernate 整合時，更顯助益。Hibernate 進行查詢時參數傳遞的方式也是使用物件陣列。例如在客戶檔要查詢姓名=’張三’，身分證號=’A123456789’

java 端

List list=getHibernateTemplate().find("from Customer where name=? and cid=? ",params);

flex 端查詢參數

var ro:RometeObject;

var params:Array();

arr[0]=’張三’;

arr[1]=’A123456789’;

ro.getData(params);

參數將一直傳遞至 hibernate 中間層，hibernate 查詢完後，回傳結果集。

使用物件陣列傳遞參數，讓定義共用介面變的非常容易。物件陣列讓參數個數沒有任何限制。相對的大大減少了 flex 與 java 間 method 的個數，共用性也因此變的可行。

如何定義flex 與 j2ee 的介面(interface)

上篇文章我提到使用 spring-framework+hibernate 實作中間層的部分,本篇就這個議題做進一步的探討.如何去定義 flex 與 j2ee 的 interface.也就是如何去定義 j2ee 端的interface或者是 method,讓 flex remoteobject 物件可以正確呼叫(invoke)無誤.

首先需說明 remoteobject 的一個特性,他無法分辨重載( overload),但可以分辨多型(polymorphic).
也 就是他分不清楚 func1(String str) / func1(Object obj) 的差別,但可以分辨 func1(String str) / func1(String str,Object obj).因此在定義 j2ee method時,需留意這點.

由於上述 remoteobject 的特性,我在 j2ee 定義讀取資料的 method 例如下

public Object getData(String ServiceID, String QryName, Object Param) {
...
}


public Object getData(String ServiceID, Object Param) {
...
}

flex 與 j2ee 的整合

由於 flex 可使用多種資料來源,例 XML,Web Service,pojo 等

剛開始在進行架構設計的時候,面臨了選擇.使用 xml,web service 當作資料來源,實作上會簡單一些,但考量到 performance 問題時,用pojo 似乎是唯一的選擇.

我使用了 spring-framework +hibernate 來實作中間層.使用 spring-framework 為的是彈性.因其可透過 xml 定義載入物件.這對於寫應用系統很方便.A 公司的業務人員與B公司業務人員業績計算公式肯定會不同.使用 xml 檔去定義A公司使用 A 物件,B公司使用 B 物件,系統不用重新編譯,只需要改變 xml 配置檔就好

曾經寫過小小的 EJB 實驗程式,對於EJB的複雜,感到厭倦.後來 hibernate 的出現,對於我而言,真是一大福音.

有了 spring-framework+hibernate ,系統的架構還是不完美.參考各種 design pattern,最後選用 Business Service Obect,Data Access Object 兩個 design pattern 填補架構空缺.