May 02
接下来的例子演示了Flex中如何利用Flash播放器的FileReference类(flash.net.FileReference),从服务器端下载文件到本地。在这个例子中,同样还可以了解DataGrid中通过设置showDataTips属性为True并且在dataTipField列中指定一个值。
让我们先来看一下Demo(可以右键View Source或点击这里察看源代码):
下面是完整代码(或点击这里查看):
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white"
- creationComplete="init();">
- <mx:Script>
- <![CDATA[
- import mx.controls.Alert;
- import mx.collections.ArrayCollection;
- import flash.net.FileReference;
- [Bindable]
- [Embed('assets/disk.png')]
- private var diskIcon:Class;
- [Bindable]
- private var arrColl:ArrayCollection;
- /* URL of the file to download. */
- private const FILE_URL:String = "http://blog.minidx.com/ext/downloading-files-in-flex-using-the-filereference-class/srcview/main.zip";
- private var fileRef:FileReference;
- private var urlReq:URLRequest;
- private function init():void {
- /* Initialize the array collection to an empty collection. */
- arrColl = new ArrayCollection();
- /* Set up the URL request to download the file specified by the FILE_URL variable. */
- urlReq = new URLRequest(FILE_URL);
- /* Define file reference object and add a bunch of event listeners. */
- fileRef = new FileReference();
- fileRef.addEventListener(Event.CANCEL, doEvent);
- fileRef.addEventListener(Event.COMPLETE, doEvent);
- fileRef.addEventListener(Event.OPEN, doEvent);
- fileRef.addEventListener(Event.SELECT, doEvent);
- fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, doEvent);
- fileRef.addEventListener(IOErrorEvent.IO_ERROR, doEvent);
- fileRef.addEventListener(ProgressEvent.PROGRESS, doEvent);
- fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doEvent);
- }
- private function doEvent(evt:Event):void {
- /* Create shortcut to the FileReference object. */
- var fr:FileReference = evt.currentTarget as FileReference;
- /* Add event order and type to the DataGrid control. */
- arrColl.addItem({data:arrColl.length+1, type:evt.type, eventString:evt.toString()});
- try {
- /* Update the Model. */
- fileRefModel.creationDate = fr.creationDate;
- fileRefModel.creator = fr.creator;
- fileRefModel.modificationDate = fr.modificationDate;
- fileRefModel.name = fr.name;
- fileRefModel.size = fr.size;
- fileRefModel.type = fr.type;
- /* Display the Text control. */
- txt.visible = true;
- } catch (err:*) {
- /* uh oh, an error of sorts. */
- }
- }
- private function downloadSourceCodeZip():void {
- /* Clear existing array collection. */
- arrColl = new ArrayCollection();
- /* Hide the Text control. */
- txt.visible = false;
- /* Begin download. */
- fileRef.download(urlReq);
- }
- private function showAlert(item:Object):void {
- Alert.show(item.eventString, item.type);
- }
- ]]>
- </mx:Script>
- <mx:Model id="fileRefModel">
- <file>
- <creationDate>{""}</creationDate>
- <creator>{""}</creator>
- <modificationDate>{""}</modificationDate>
- <name>{""}</name>
- <size>{""}</size>
- <type>{""}</type>
- </file>
- </mx:Model>
- <mx:Button id="downloadBtn" label="Download example source code" icon="{diskIcon}" click="downloadSourceCodeZip()" toolTip="{FILE_URL}" height="40" />
- <mx:DataGrid id="debug" dataProvider="{arrColl}" width="{downloadBtn.width}" rowCount="5" rowHeight="22" itemClick="showAlert(event.currentTarget.selectedItem)">
- <mx:columns>
- <mx:DataGridColumn dataField="data" headerText="#" width="20" />
- <mx:DataGridColumn dataField="type" headerText="Type" showDataTips="true" dataTipField="eventString" />
- </mx:columns>
- </mx:DataGrid>
- <mx:Text id="txt" condenseWhite="true" visible="false">
- <mx:text>
- creationDate: {fileRefModel.creationDate}
- creator: {fileRefModel.creator}
- modificationDate: {fileRefModel.modificationDate}
- name: {fileRefModel.name}
- size: {fileRefModel.size}
- type: {fileRefModel.type}
- </mx:text>
- </mx:Text>
- </mx:Application>
代码:Peter deHaan 翻译/整理/编译:minidxer
