使用 itemRenderer 重新定義 DataGrid 的顯示項目

首頁 > FLEX, 程式設計 > 使用 itemRenderer 重新定義 DataGrid 的顯示項目

使用 itemRenderer 重新定義 DataGrid 的顯示項目

2009年8月5日瀏覽次數 : 6,079

閱讀評論發表評論

這篇文章是延續 FLEX 一次開啟多個檔案 & 限制檔案類型的延伸閱讀，有讀者阿芃(ㄆㄥˊ) 問到如果想要把讀進來的圖案在 DataGrid 使用縮圖的方式呈現，應該要怎麼做，其實只要使用 itemRenderer 就可以做重新繪製內容的動作 ( 是這樣說嗎 ? )

PS. 記得一定要使用 FLEX 3.2 SDK 並且 FLASH PLAYER 必須是 10 以上的版本

圖片 : 我們將讀進來的圖片，使用 IMG 的方式呈現 ( 感謝 CORA 與壩子友情贊助 )

其實做法很簡單，只需要使用 itemRenderer ，並且將圖片的資料傳入 itemRenderer 的元件當中，不過用 itemRenderer 有一個注意的地方，就是如果有寫到事件的話，他可不是跟 Application 同一個 script 喔，下次如果有看到再說吧 ^_^

阿芃說，他已經有使用 itemRender 了，但是沒有成功，那你一定沒有買宋老大出的書『新一代互動體驗 FLEX + AIR 程式開發』，因為在這本書的 Page 365 就有寫到了喔，所以阿….. 快去買一本吧 ^_^ 重點應該就是要把 data 的資料傳入，就沒甚麼太大的困難了，其他大小或是特效還是要再做修正喔。

anyway…

看完範例就看看原始檔吧

PicChooser.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();
 
			//將 frlist 所有的陣列內的檔案做一次 LOAD
			private function selectHandler(evnet:Event):void{
				//逐次將 fileList 內的檔案都 load 一次
				for(var i:int=0;i<this.frlist.fileList.length;i++){
					//建立一個暫時的 fileReference 來做送出的動作
					var fr_temp:FileReference = new FileReference();
					//取得檔案
					fr_temp = this.frlist.fileList[i];
					//加入檔案 load 完成的偵聽動作
					fr_temp.addEventListener(Event.COMPLETE,completeHandler);
					//執行讀取
					fr_temp.load();
				}
			}
			//完成後將讀取完成的資料塞入物件，物件再轉存到陣列中保留
			private function completeHandler(event:Event):void{
				//之前是直接讀取 fr 物件內的資訊
				//但是因為現在沒有固定宣告所以需要用 event 所拿到的資料
				var obj:Object = new Object();
				obj.filename = event.currentTarget.name;
				obj.data = event.currentTarget.data;
				this.ac.addItem(obj);
			}
			//打開瀏覽動作
			private function clickHandler():void{
				//設定資料型態過濾只接受 圖片格式
				var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
				this.frlist.browse([imagesFilter]);
			}
			//點擊到  dataGrid 內的物件，將被點擊的 DATA 套用到 IMAGE 上
			private function itemClickHandler():void{
				this.image.source = this.dg.selectedItem.data;
			}
		]]>
	</mx:Script>
 
	<mx:HBox width="810">
		<mx:VBox width="130" height="80%" horizontalAlign="center">
			<mx:Button label="讀取圖片" click="clickHandler()"/>
			<mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{this.ac}" itemClick="itemClickHandler()" rowHeight="100">
				<mx:columns>
					<mx:DataGridColumn headerText="檔案名稱" dataField="filename">
						<!-- 使用 itemRenderer 來重新定義資料內容 -->
						<mx:itemRenderer>
							<mx:Component>
								<mx:Image width="100" height="100" source="{data.data}"/>
							</mx:Component>
						</mx:itemRenderer>
					</mx:DataGridColumn>
				</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:FileReferenceList id="frlist" select="selectHandler(event)"/>
 
 
</mx:Application>

Random Posts

Loading…

:: 把這篇好文推到書籤網站與更多人分享吧 ::

Ausir FLEX, 程式設計 Actionscript, datagrid, FLEX 3, itemrenderer, 圖片縮圖

評論 (48) Trackbacks (0) 發表評論 Trackback

阿芃

2009年8月5日20:41 | #1

回覆 | 引用

老師非常非常謝謝您!!!!
我們已經有訂書了過兩天會到
應該就是data的地方沒有傳到!!

謝謝您!!!!
Ausir

2009年8月6日13:36 | #2

回覆 | 引用

@阿芃

ㄟㄟㄟ~~

我不是老師啦…
我又沒在教書 = =a
我只是記錄一些資料罷了~~有幫助就拿去吧~~
呵呵~

給個謝謝就很開心了
小米

2009年8月6日17:00 | #3

回覆 | 引用

你根本是想秀你旁邊的照片吧……..
Ausir

2009年8月6日19:23 | #4

回覆 | 引用

@小米

ㄟ~?
有這麼明顯嗎~QQ

不是啦明明就是阿芃問的 ^^
vivi

2009年8月12日09:55 | #5

回覆 | 引用

你好！請問flex是不是一定要連結到資料庫？？如果製作一個網站，那麼連結至其他頁面可以嗎？？還有，為什麼元件放好了，但會隨著解析度的大小不一，而變化，但所有的東西全疊在一起….
Ausir

2009年8月12日21:12 | #6

回覆 | 引用

@vivi

1.不一定要用到資料庫，端看製作需求
2.可以阿，但多數會遇到安全性問題
3.因為你的 layout 沒有設定的關係，所以預設他是用座標排版
當你沒有指定 X Y ，預設都是 0 ，所以通通疊在一起了
請把 layout=”vertical”
vivi

2009年8月13日09:07 | #7

回覆 | 引用

謝謝你！我試用button這個元件，但連結的部份不知道怎麼去設定？還有swf檔可以直接匯入flex來使用嗎？？可以請你告訴我嗎？？非常謝謝你！
Ausir
2009年8月13日09:49 | #8

回覆 | 引用
你要使用 AS3 的網頁連結方式

^?View Code FLEX
1
<mx:Button click="navigateToURL(new URLRequest('http://tw.yahoo.com'),'_blank');"/>
可以
請使用
SWFLoader

這組標籤
謝謝
vivi

2009年8月13日11:14 | #9

回覆 | 引用

不好意思！匯進swf這個不能像在flash裡面設計嗎？

謝謝！連結方式己解決謝謝你
vivi

2009年8月13日13:56 | #10

回覆 | 引用

sorry 沒有問到

再請問你flex 如果按下button按鈕之後它會換頁，那要怎麼做連結？？(不是外部連結)
字體，怎麼匯入flex裡？(因為有一些需要中文字體，但用ie看時，中文字體幾乎看不清楚它是什麼字)

麻煩你謝謝你
Ausir

2009年8月13日15:53 | #11

回覆 | 引用

@vivi

1. 不可以在 FLEX 內使用 FLASH 那樣的設計喔
2. 換頁是要用 state 的寫法我建議你買一本書參考喔 ^_^
3. 字體的話應該是你縮得太小了，如果要用字體的話，一直是 FLASH 的痛，除非把它轉曲線
vivi

2009年8月13日16:13 | #12

回覆 | 引用

請問，是不是每拉一個元件出來就得宣告 (那有資料給我做參考嗎？如何去宣告那先物件，我找了很久都沒有)

viewSourceURL=”src/GettingStartedActionScript/index.html”
上面這一個是什麼意思？？

麻煩你了！！非常謝謝你
Ausir

2009年8月13日16:15 | #13

回覆 | 引用

@vivi

用 flexbuilder 他就會告訴你有哪些屬性可以使用
至於你說的那個屬性這樣貼我也不太清楚耶
vivi

2009年8月13日16:31 | #14

回覆 | 引用

謝謝！！

<![CDATA[
import mx.collections.ArrayCollection;
//儲存圖片的陣列物件
[Bindable]
public var ac:ArrayCollection = new

這個是宣告嗎？？不然為什麼看別人的程式碼都有這個！！

嗯！我買了二本書….但有很多都看不懂！！
謝謝你一直給我回覆！！謝謝你！！
Ausir

2009年8月13日16:35 | #15

回覆 | 引用

@vivi

如果有時間的話我都會回復你 ^^
另外你提到的問題那個部分
那個部分是宣告一個陣列儲存資料
vivi

2009年8月18日15:09 | #16

回覆 | 引用

請問:
如果要像plurk那個時間軸(水平軸)類似，要什麼語法！！
我查到的，都是在下面有個卷軸！！要怎麼樣才會用成那樣！
flex可以辦到嗎？
Ausir

2009年8月18日15:55 | #17

回覆 | 引用

@vivi

通常會用 hbox 這個元件來製作
vivi

2009年8月18日17:30 | #18

回覆 | 引用

http://www.x3studios.com/

那怎麼靠滑鼠的滾輪做控制？？
需要什麼？？
Ausir

2009年8月18日17:37 | #19

回覆 | 引用

偵聽 MOUSE.wheel 事件

不過對方是用 JS 寫的喔
阿芃

2009年8月31日13:03 | #20

回覆 | 引用

不好意思我又回來問問題了
我們有做到一個功能是按下button以後會出現小圖
然後點一下畫布小圖片會貼在畫布上 (小圖片的名稱是英文命名)
跑的時候都很順利可是匯出以後就看不到小圖片了
為什麼會這樣呀? 可以教我們這可以怎樣修正嗎?

非常非常感謝你:)
Ausir

2009年8月31日17:20 | #21

回覆 | 引用

@阿芃

我看你的說法
你的圖片應該是使用其他網站提供的
所以
你應該是遇到了圖片安全性問題
如果存取其他網站的資訊請記得在其他網站放 crossdomain 檔案喔~

DE-BUG 資料夾內的檔案不受這個限制~ XD
阿芃

2009年8月31日20:18 | #22

回覆 | 引用

沒有耶我們的圖片是自己畫的!!
是自己用Adobe Illustrator CS 畫的

所以說要把檔案放在DE-BUG 的資料夾中囉?
Ausir

2009年9月1日10:19 | #23

回覆 | 引用

@阿芃

因為我沒看到你的程式，因此我不是很清楚你的錯誤
但是如果你自己的圖片都是放在自己的專案內
應該是不會有匯出後看不到的情況
所以我猜你應該是圖片沒有跟專案一起
cloudfly

2009年9月1日16:27 | #24

回覆 | 引用

不然建議圖檔可以統一放在一個資料夾，例如asset，
上傳只要將專案裡的bin-debug這個資料夾全部傳上去，
應該就ok吧!我自己是這樣弄的。
羽兒

2009年9月1日19:58 | #25

回覆 | 引用

你好~
我將你的程式碼貼在Flex Builder 3上面
結果在 fr_temp.load(); 那一行出現錯誤
錯誤為：
1061:呼叫可能未定義的方法load(透過靜態類型 flash.net:FileReference 的參考)
因為我剛開始學習Flex，所以不知道為什麼這樣會錯
也不知道該如何更改，麻煩請告知~謝謝!!
Ausir

2009年9月2日09:49 | #26

回覆 | 引用

@cloudfly

嗯嗯 ^_^ 對阿~ 一起打包會比較保險

@羽兒

因為 .load 方法只有在 flash player 10 才有提供

所以你必須先把 FLEX 3 升級到 FLEX 3.02
並且在屬性的地方將 flash player 強制設定在 10 以上的版本
自然可以通過 DEBUG

前幾篇有提到過 ^_^
阿芃

2009年9月2日10:50 | #27

回覆 | 引用

非常非常謝謝你我們再試試看:)
阿芃

2009年9月2日11:27 | #28

回覆 | 引用

我們是成功了謝謝你們!!!!!!!!!!
太喜歡這裡了:)
Ausir

2009年9月2日12:14 | #29

回覆 | 引用

@阿芃

有成功就好了 ^_^
不過我比較喜歡企業主喜歡我 XD
阿哈哈哈哈~~
eggegg

2009年9月4日09:51 | #30

回覆 | 引用

你好：
如果我想要從server上面讀取圖片然後讓他顯是在左邊的datagrid裡面
我在selectHandler裡把fr_temp.load()改成fr_temp.upload()
然後在completeHandler裡多加了obj.path設成server的路徑
可是他還是讀取不到圖片，想請問這是甚麼問題呢??

謝謝^^
eggegg

2009年9月4日09:54 | #31

回覆 | 引用

阿我忘記寫upload
我的upload(uploadurl,”Filedata”)裡面有東西，圖片可以上傳到server但是從server抓下圖片顯示

謝謝你^^
Ausir

2009年9月4日10:23 | #32

回覆 | 引用

@eggegg

旦旦~雖然我還沒聽懂你在說甚麼 ^^
但是 anyway 你解決了~ 恭喜你!~
eggegg

2009年9月4日10:39 | #33

回覆 | 引用

ㄟ~我其實還沒有解決
只是我後來發現我前面忘記把upload寫完整了
所以還是需要你的幫忙>”<

問題就是第一次的發言說的

謝謝你囉^^
Ausir

2009年9月4日10:58 | #34

回覆 | 引用

@eggegg

是喔原來我誤會你的意思了…

上傳圖片以後，左邊的 datagrid 要顯示 SERVER 上的圖片
你只要把 img 的 source 指定為你上傳後的路徑及可~

讀取不到圖片的話你可能要開啟 debug mode 看看是否檔名有甚麼問題
eggegg

2009年9月4日11:09 | #35

回覆 | 引用

我把image的source改成source=”http://127.0.0.1/tmp/”
但是他只有看不見圖片的icon
debug mode也是一樣
請問用debug mode可以在哪裡看到檔名有甚麼問題嗎??
謝謝你^_____^
Ausir

2009年9月4日11:30 | #36

回覆 | 引用

@eggegg

應該是 source = ”http://127.0.0.1/tmp/” + filename 吧….
沒看到你指定 filename

debug mode 的話你要在你想要監看的地方
先點兩下
在執行那個小蟲的按鈕~ 之後程式運作到那邊就會停下來讓你看目前的狀態
eggegg

2009年9月4日14:47 | #37

回覆 | 引用

那請問如果我的圖片是動態的要去讀取要怎麼寫呢？
就是當別人上傳時才讀取那些上傳到server的圖片
我用過source = ”http://127.0.0.1/tmp/”+event.currectTarget.name
或是source=”http://localhost/tmp”+”{event.currentTarget.filename}”
他都會顯示錯誤
謝謝^^
Ausir

2009年9月4日14:54 | #38

回覆 | 引用

@eggegg

錯誤訊息是~?

不過看起來寫法是誰錯阿 ^^

source=”http://localhost/tmp”+”{event.currentTarget.filename}”
這行有點問題而已
source=”http://localhost/tmp/”+”{event.currentTarget.filename}”
eggegg

2009年9月4日15:26 | #39

回覆 | 引用

錯誤訊息是說 Element type “mx:Image” must be followed by either attribute specifications, “>” or”/>”

這行應該是我不小心按錯符號了@@
source=”http://localhost/tmp”+”{event.currentTarget.filename}”
不過我換成這樣也會出現上面的錯誤
Ausir

2009年9月4日19:12 | #40

回覆 | 引用

@eggegg

請更改為

source=”http://localhost/tmp/{event.currentTarget.filename}”

如此` 試試看
Ausir

2009年9月4日19:21 | #41

回覆 | 引用

不過應該不會用 EVENT 才對~ 應該有點問題 ^^
寫在 MXML 的時候應該用不到 EVENT 才對….
eggegg

2009年9月5日00:12 | #42

回覆 | 引用

謝謝你
我會再試試看!!
eggegg

2009年9月6日20:12 | #43

回覆 | 引用

不好意思我又回來問問題了>”<
我後來把source改成這樣source=”http://127.0.0.1/tmp/{data.data}”
還有上面的obj.data = “http://127.0.0.1/tmp/”+ event.currentTarget.data;跟obj.source = “http://127.0.0.1/tmp/”+event.currentTarget.data;
可是還是不會出現圖片耶~

想請問這個方式要怎麼時做出來呢??謝謝你^^
Ausir

2009年9月7日09:51 | #44

回覆 | 引用

@eggegg

有時間的話我幫你試試看吧 ^^

應該是你的寫法有點問題…
mwl

2010年1月31日17:29 | #45

回覆 | 引用

您好，我看了您上面寫的代碼，於是我想把它轉成flex桌面項目的，但我把上面的代碼複製過去后運行，雖然沒出錯，但我一按“讀取圖片”，圖片顯示不了，上傳也出錯，錯誤提示是
Error #2174: Only one download, upload, load or save operation can be active at a time on each FileReference.
另外我的player也是10.0，sdk是3.2的。希望您能指教一下。
Ausir

2010年2月1日21:10 | #46

回覆 | 引用

@mwl

你把他轉成 AIR 喔~?

你出現的錯誤是說

你的 filereference 這個物件
一次只可以指派一個上傳下載儲存的動作~ 不可以重複使用喔!~
kieran

2010年7月15日00:35 | #47

回覆 | 引用

我想要問問題喔我想知道flex的換頁sourse code怎麼寫ˊˋ
新手在課本找不到譬如說在main.mxml檔的一個button
點一下換到另外一個Apply.mxml檔要怎麼轉換拜託大大交一下
Ausir

2010年7月24日01:46 | #48

回覆 | 引用

@kieran

您好
換頁的方式可能會需要建立 module
如果有時間我再把資料整理一下