May 02

接下来的例子演示了Flex中如何利用Flash播放器的FileReference类(flash.net.FileReference),从服务器端下载文件到本地。在这个例子中,同样还可以了解DataGrid中通过设置showDataTips属性为True并且在dataTipField列中指定一个值。

让我们先来看一下Demo(可以右键View Source或点击这里察看源代码


下面是完整代码(或点击这里查看):

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init();">  
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.controls.Alert;
  11.             import mx.collections.ArrayCollection;
  12.             import flash.net.FileReference;  
  13.  
  14.             [Bindable]
  15.             [Embed('assets/disk.png')]
  16.             private var diskIcon:Class;  
  17.  
  18.             [Bindable]
  19.             private var arrColl:ArrayCollection;  
  20.  
  21.             /* URL of the file to download. */
  22.             private const FILE_URL:String = "http://blog.minidx.com/ext/downloading-files-in-flex-using-the-filereference-class/srcview/main.zip";  
  23.  
  24.             private var fileRef:FileReference;
  25.             private var urlReq:URLRequest;  
  26.  
  27.             private function init():void {
  28.                 /* Initialize the array collection to an empty collection. */
  29.                 arrColl = new ArrayCollection();  
  30.  
  31.                 /* Set up the URL request to download the file specified by the FILE_URL variable. */
  32.                 urlReq = new URLRequest(FILE_URL);  
  33.  
  34.                 /* Define file reference object and add a bunch of event listeners. */
  35.                 fileRef = new FileReference();
  36.                 fileRef.addEventListener(Event.CANCEL, doEvent);
  37.                 fileRef.addEventListener(Event.COMPLETE, doEvent);
  38.                 fileRef.addEventListener(Event.OPEN, doEvent);
  39.                 fileRef.addEventListener(Event.SELECT, doEvent);
  40.                 fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, doEvent);
  41.                 fileRef.addEventListener(IOErrorEvent.IO_ERROR, doEvent);
  42.                 fileRef.addEventListener(ProgressEvent.PROGRESS, doEvent);
  43.                 fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doEvent);
  44.             }  
  45.  
  46.             private function doEvent(evt:Event):void {
  47.                 /* Create shortcut to the FileReference object. */
  48.                 var fr:FileReference = evt.currentTarget as FileReference;  
  49.  
  50.                 /* Add event order and type to the DataGrid control. */
  51.                 arrColl.addItem({data:arrColl.length+1, type:evt.type, eventString:evt.toString()});  
  52.  
  53.                 try {
  54.                     /* Update the Model. */
  55.                     fileRefModel.creationDate = fr.creationDate;
  56.                     fileRefModel.creator = fr.creator;
  57.                     fileRefModel.modificationDate = fr.modificationDate;
  58.                     fileRefModel.name = fr.name;
  59.                     fileRefModel.size = fr.size;
  60.                     fileRefModel.type = fr.type;
  61.                     /* Display the Text control. */
  62.                     txt.visible = true;
  63.                 } catch (err:*) {
  64.                     /* uh oh, an error of sorts. */
  65.                 }
  66.             }  
  67.  
  68.             private function downloadSourceCodeZip():void {
  69.                 /* Clear existing array collection. */
  70.                 arrColl = new ArrayCollection();
  71.                 /* Hide the Text control. */
  72.                 txt.visible = false;
  73.                 /* Begin download. */
  74.                 fileRef.download(urlReq);
  75.             }  
  76.  
  77.             private function showAlert(item:Object):void {
  78.                 Alert.show(item.eventString, item.type);
  79.             }
  80.         ]]>
  81.     </mx:Script>  
  82.  
  83.     <mx:Model id="fileRefModel">
  84.         <file>
  85.             <creationDate>{""}</creationDate>
  86.             <creator>{""}</creator>
  87.             <modificationDate>{""}</modificationDate>
  88.             <name>{""}</name>
  89.             <size>{""}</size>
  90.             <type>{""}</type>
  91.         </file>
  92.     </mx:Model>  
  93.  
  94.     <mx:Button id="downloadBtn" label="Download example source code" icon="{diskIcon}" click="downloadSourceCodeZip()" toolTip="{FILE_URL}" height="40" />  
  95.  
  96.     <mx:DataGrid id="debug" dataProvider="{arrColl}" width="{downloadBtn.width}" rowCount="5" rowHeight="22" itemClick="showAlert(event.currentTarget.selectedItem)">
  97.         <mx:columns>
  98.             <mx:DataGridColumn dataField="data" headerText="#" width="20" />
  99.             <mx:DataGridColumn dataField="type" headerText="Type" showDataTips="true" dataTipField="eventString" />
  100.         </mx:columns>
  101.     </mx:DataGrid>  
  102.  
  103.     <mx:Text id="txt" condenseWhite="true" visible="false">
  104.         <mx:text>
  105.         creationDate: {fileRefModel.creationDate}
  106.         creator: {fileRefModel.creator}
  107.         modificationDate: {fileRefModel.modificationDate}
  108.         name: {fileRefModel.name}
  109.         size: {fileRefModel.size}
  110.         type: {fileRefModel.type}
  111.         </mx:text>
  112.     </mx:Text>  
  113.  
  114. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:minidxer

written by Minidxer  |  tags: , , , ,

Related Post

Leave a Reply