FLEX 利用物件概念儲存圖片資料

首頁 > FLEX, 程式設計 > FLEX 利用物件概念儲存圖片資料

2009年3月2日瀏覽次數 : 3,138

閱讀評論發表評論

今天真是練功日阿，♣梅干桑♣ 雖然得到可以在 FLASH 讀取到本地端的圖片的利器，但是卻被物件導向給搞死掉啦，這也不怪他啦，物件導向也不知道是哪個寫程式的人發明出來的東西，再說 AS2 的時代也沒有物件導向這東西，也是許多做視覺設計的人跳下海寫程式常常會給搞死的地方。

圖片來源 : Cora 設計的貓狗寵物食品包裝

在上一篇我們提到怎麼讀取本地端的資料後，梅干桑提到讀取完圖片以後，FileReference 讀取檔案只可以一次，那如果要開兩張圖，並且要做切換怎麼辦呢，每上傳一次檔案，舊的檔案就不見了，因此我們這次要用物件導向的概念，把取得的資料利用物件來保存，這樣下次就可以繼續調用資料囉。

注意 : FLEX SDK 4 + Flash Player 10 需要 !

LoadPics.mxml

^?View Code FLEX

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="16" xmlns:net="flash.net.*">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			//儲存圖片的陣列物件
			[Bindable]
			public var ac:ArrayCollection = new ArrayCollection();
 
			//將 fr 被選取的內容做一次讀取的動作
			private function selectHandler(evnet:Event):void{
				this.fr.load();
			}
			//完成後將讀取完成的資料塞入物件，物件再轉存到陣列中保留
			private function completeHandler(event:Event):void{
				var obj:Object = new Object();
				obj.filename = this.fr.name;
				obj.data = this.fr.data;
				this.ac.addItem(obj);
			}
			//打開瀏覽動作
			private function clickHandler():void{
				fr.browse();
			}
			//點擊到  dataGrid 內的物件，將被點擊的 DATA 套用到 IMAGE 上
			private function itemClickHandler():void{
				this.image.source = this.dg.selectedItem.data;
			}
		]]>
	</mx:Script>
 
	<mx:HBox width="810">
		<mx:VBox width="200" height="100%" horizontalAlign="center">
			<mx:Button label="讀取圖片" click="clickHandler()"/>
			<mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{this.ac}" itemClick="itemClickHandler()">
				<mx:columns>
					<mx:DataGridColumn headerText="檔案名稱" dataField="filename"/>
				</mx:columns>
			</mx:DataGrid>
		</mx:VBox>
		<mx:Canvas width="600" height="600" backgroundColor="white">
			<mx:Image id="image" width="100%" height="100%"/>
		</mx:Canvas>
	</mx:HBox>
 
	<net:FileReference id="fr" select="selectHandler(event)" complete="completeHandler(event)"/>
 
 
</mx:Application>