~No Magic，Just Basic ~

以往單純flash要跟OS互動不太容易，可能只有純粹檔案讀取、上傳、下載等，近年來adobe也越來越重視使用者與應用程式的互動上，陸續發展出AIR(Adobe Integrated)，是一個跨作業系統runtime environment用來建造RIA互動程式，簡單的說，Adobe Air 把網路和桌面結合在一起，讓使用者可以從桌面端直接操控網路服務，而不需使用瀏覽器。

要開發RIA(Rich Internet Application)，就是所謂的豐富網路應用程式，現在已經可以透過許多程式語言開發，以公司來分別的話，目前是呈現三強鼎力的局面：

Adobe：主打使用Flex和Flash。
Microsoft(微軟)：推出silverlight與其分庭抗禮。
Sun(昇陽)：也推出JavaFx欲佔一席之地。
另外還有Ajax與JavaScript也蠻多人使用的。
但是以使用者人數來說，還是以Adobe和微軟各自擁護者較多。

其實用什麼語言開發RIA皆可，只要是適合自己的，容易上手才是最好的朋友。跟對AIR有興趣的人推薦Beginning Adobe AIR這本書，作者描寫的教學淺顯易懂，英文也算容易，不會有太多艱深的字彙，這本書也剛好是用Flex做為開發RIA的工具，正好符合我的需求。底下就介紹一下當我們要將圖片拖曳進應用程式的話，如何撰寫符合需求的code。

製作觀念與語法解析

要讓圖片拖曳進來，應用程式必須先註冊NativeDragEvent事件，這裡有兩個地方要注意:

第一個就是如何讓視窗接收拖曳進來的物件，沒有特別撰寫的話，一般的應用程式對於外來的圖檔是不會有任何反應的，所以在這會用到NativeDragManager裡的acceptDragDrop方法。

在Help有提到acceptDragDrop(target:InteractiveObject):void
the specified target interactive object can accept a drop corresponding to the current drag event.
=>也就是說要讓此視窗宣告可以接收外來圖檔，必須用到此method。

後面又提到This function can be called only within a nativeDragEnter or nativeDragOver event handler.
=>也就是說此方法是成立在當有物件拖曳進來時才會觸發上述的method。

PS：Help真是我們的好朋友。

第二個就是當物件拖曳進來後，需要判斷是何種圖檔，才能將其顯示在視窗上，這邊會用到clipboard屬性

在Help中提到The Clipboard class provides a container for transferring data and objects through the clipboard and through drag-and-drop operations.

=>也就是說clipboard主要是作為資料轉換的容器，因為我們是將桌面的任意檔案拖曳到視窗裡，所以會透過clipboard這個容器接收，再交由後續的method進行處理。

另外這邊會用到getData(format:String, transferMode:String):Object
Gets the clipboard data if data in the specified format is present.
=>我們需要運用此method才能獲得拖曳到視窗上的檔案格式。

此範例主要是針對圖檔，所以只容許png.jpg.jpeg.gif等四種格式的圖片才得以拖曳進來。

用Flex Bulider開發AIR時，需要選擇Desktop Application作為撰寫的檔案格式。

讓我們測試看看，隨便將一張圖檔拖曳進右方的視窗裡。

可以清楚的看到圖片就顯示在視窗裡了，大功告成。

DragIn.mxml

^?View Code ACTIONSCRIPT

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">   <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.controls.Image; import flash.filesystem.File; //初始化 private function init():void{ this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,onDragIn); this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,onDrop); } //建立能將物件拖曳到應用程式上的事件 private function onDragIn(event:NativeDragEvent):void{ NativeDragManager.acceptDragDrop(this); } //當拖曳進來時，判斷符合哪種圖片類型，觸發addImage方法 private function onDrop(event:NativeDragEvent):void{ var dropfiles:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array; for each (var file:File in dropfiles){ switch (file.extension.toLowerCase()){ case "png" : addImage(file.nativePath); break; case "jpg" : addImage(file.nativePath); break; case "jpeg" : addImage(file.nativePath); break; case "gif" : addImage(file.nativePath); break; default: Alert.show("Unmapped Extension"); } } } //將圖片顯示在Application上 private function addImage(nativePath:String):void{ var i:Image = new Image(); if(Capabilities.os.search("Mac") >= 0){ i.source = "file://" + nativePath; } else { i.source = nativePath; } this.addChild(i); }   ]]> </mx:Script>   </mx:WindowedApplication>

沒有相關文章.

cloudfly AIR, Flex, 程式設計 AIR, Flex