Flex progressBar为用户提供一个可视化进度提示,例如在上传文档或者下载文档时显示相关进度。progressBar除了可以手动设置相关进度(其mode为manual)外,还可以利用事件触发时时改变相关进度。在利用FileReference(或FileReferenceList)进行上传文档时,往往会使用progressBar来监听进度。通常这块使用一个弹出界面,当下次上传文档时,再创建该文档上传页面(这样即可以实现progressBar的初始化)。但如果该上传文档页面在整个应用生命期都存在的话,则多次上传情况下,除第一次进度条是从0开始到100%,其他此上传进度条开始时即为100%,原因是progressBar未进行初始化。而在mode为event情况下,progressBar似乎又不能手动初始化。下文代码展示一种折中做法,即:将每次文档传的进度始终保持在上传界面上,第二次上传时既展示前一次上传的文档(进度为100%),又展示新的待上传的文档(进度为0%,新增加的进度条,而不是利用先前的),但只对新增加的文档进行上传。示意如下图所示。
代码示意如下所示
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.managers.CursorManager;
import mx.managers.PopUpManager;
import org.osmf.layout.AbsoluteLayoutFacet;
[Bindable]
private var fileRef:FileReferenceList = new FileReferenceList();
[Bindable]
private var indexTAB:int = 0;
//界面显示上传文件之用
[Bindable]
private var selectFiles:ArrayCollection = new ArrayCollection();
[Bindable]
private var classList:ArrayCollection = new ArrayCollection();
//存储用户传输的属性列表信息
[Bindable]
private var attributeList:ArrayCollection = new ArrayCollection();
private var fileCount:int = 0;
private var count_upload:int = 0;
private var selectedFolderid:String = null;
private var docArray:Array = new Array();
private function init():void
{
fileRef.addEventListener(Event.SELECT, selectHandler);
}
//浏览并选择本地文件
private function browseAndUpload():void
{
docArray = new Array();
fileRef = new FileReferenceList();
fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.browse(new Array());
}
//循环处理选中的每个文件
private function selectHandler(event:Event):void
{
try
{
browseBtn.enabled = false;
fileRef = FileReferenceList(event.target);
fileCount = fileRef.fileList.length;
var size:Number = 0;
for each (var file:FileReference in fileRef.fileList)
{
if (file.size == 0)
{
//如果所选文件大小为0,提示并关闭上传界面
Alert.show("你选择的文件不能上传,因为 " + file.name + " 文件内容为空");
PopUpManager.removePopUp(this);
return;
}
size += file.size;
file.addEventListener(Event.COMPLETE, completeHandler);
file.addEventListener(ProgressEvent.PROGRESS, progressHandler);
file.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
docArray.push(file);
}
var newArray:ArrayCollection = new ArrayCollection();
if(selectFiles.length > 0){
for(var i:int = 0 ; i < selectFiles.length;i++){
newArray.addItem(selectFiles[i]);
}
}
if(docArray.length > 0){
for(var i:int = 0 ; i < docArray.length;i++){
newArray.addItem(docArray[i]);
}
}
selectFiles = newArray;
}
catch (err:Error)
{
browseBtn.enabled = true;
}
}
var proc:uint = 0;
private function completeHandler(event:Event):void
{
var fr:FileReference = FileReference(event.target);
if (--fileCount == 0)
{
CursorManager.removeAllCursors(); //去除鼠标样式
browseBtn.enabled = true;
Alert.show("上传成功!");
fileRef = new FileReferenceList();
docArray = new Array();
indexTAB = 1;
indexTAB = 0;
}
}
private function progressHandler(e:ProgressEvent):void
{
proc = e.bytesLoaded / e.bytesTotal * 100;
if (proc == 100)
count_upload++;
if (count_upload == fileCount){
CursorManager.setBusyCursor(); //将鼠标状态设成忙样式
}
}
private function ioErrorHandler(event:Event):void
{
var file:FileReference = FileReference(event.target);
Alert.show(file.name + " 上传失败!");
}
private function upLoad():void
{
CursorManager.setBusyCursor();
for(var i:int = 0 ; i < docArray.length ; i++){
FileReference(docArray[i]).load();
}
}
]]>
</fx:Script>
<mx:Canvas>
<mx:TabNavigator id="tabN" selectedIndex="{indexTAB}">
<mx:VBox label="lookup" width="500" height="500">
</mx:VBox>
<mx:VBox label="upload" width="100%" height="100%">
<mx:VBox>
<mx:DataGrid id="dg" dataProvider="{selectFiles}" width="100%" height="100%"
editable="false" >
<mx:columns>
<mx:DataGridColumn headerText="名称" dataField="name" textAlign="center" visible="true"></mx:DataGridColumn>
<mx:DataGridColumn headerText="大小" dataField="size" textAlign="right" headerStyleName="centered" visible="true"></mx:DataGridColumn>
<mx:DataGridColumn headerText="进度" dataField="" visible="true" headerStyleName="centered" width="300">
<mx:itemRenderer>
<fx:Component>
<mx:HBox width="100%" height="100%"
verticalAlign="middle" horizontalGap="0"
paddingLeft="10" paddingRight="10"
backgroundAlpha="0.0" horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:ProgressBar id="progressBarC"
themeColor="#1C7BB8" visible="true"
labelPlacement="center" source="{data}"
label="当前进度: %3%%" direction="right"
mode="event" width="100%" height="12" />
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:ControlBar id="controlbar1" width="100%" height="10%">
<mx:VBox width="100%" id="hbox1" horizontalAlign="center">
<mx:HBox>
<mx:Button id="browseBtn" label="浏览" click="browseAndUpload()"/>
<mx:Text id="message"/>
<mx:Button id="uploadBtn" label="上传" click="upLoad()"/>
</mx:HBox>
</mx:VBox>
</mx:ControlBar>
</mx:VBox>
</mx:VBox>
</mx:TabNavigator>
</mx:Canvas>
</s:Application>
progressBar的label熟悉可以指示显示上载源的三种数据,分别如下所示
同时progressBar的mode可以指定其进度触发方式,可以为event(参见上文)或者ma'nual(参见:http://www.oschina.net/code/snippet_70229_1642)等。
其他介绍参见http://www.tutorialspoint.com/flex/flex_progressbar_control.htm