[Flex]如何使用Repeater元件

首頁 > Flex, 程式設計 > [Flex]如何使用Repeater元件

2009年11月16日/文章瀏覽次數:233 次

評論發表評論

Flex裡擁有眾多的元件可以使用，但有些就不知道該怎麼跟應用程式或是網站做搭配，之前就有看過Repeater此屬性，但究竟該怎麼使用呢？其實蠻簡單的，Repeater顧名思義就是若是要做很多重複的動作時，比方說在相簿的網頁上可能會大量使用到Image的元件，若有100張圖片，難道要複製貼上100的image元件嗎？這樣就太麻煩了，此時正好可以使用Repeater來取代重複性的動作，節省程式碼的撰寫時間，提升整體的效率，到底該怎麼使用呢？底下讓我們來試看看。

如圖中所示，在左方Thumbnails的Panel中可以看到許多圖片的縮圖，首先讓圖片整齊的排列則是使用tile元件，很方便就幫我們排列好圖片，而要大量增加Image元件，此時會利用到Repeater元件幫助我們呈現多張不同的圖片。

相關解說

Repeater dataProvider=”{galleryData.lastResult.gallery.images.img}” id=”imageRepeater”

//Repeater會去讀取xml檔中的標籤，算出全部圖片的數量是多少，並存放在dataProvider中，以供應Image使用。

Image source=”{imageRepeater.currentItem}” width=”40″ height=”40″ click=”getImage(event)”

//Image會去抓取Repeater裡所讀取到前面xml檔案的標籤，並透過source屬性跟Repeater binding起來，所以Repeater一執行完畢，會一一對應到每個Image中。

//而getImage(event)主要功用就是將左方點選到的圖片縮圖檔放大顯示在右方的Panel中。

此相簿的關鍵在於Repeater與Image的語法與binding為精華所在，一旦了解箇中的小技巧，就能節省許多的步驟喔!此範例圖片多寡全都由xml檔控制，未來若要增減圖片檔案只需要修改xml檔即可，當然該有的圖片也要先上傳才是喔!

程式碼如下所示：

^?View Code ACTIONSCRIPT

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="galleryData.send()">
 
<mx:HTTPService id="galleryData" url="assets/pictures.xml"/>
<mx:Style source="PhotoGallery.css"/>
	<mx:Script>
		<![CDATA[
			import mx.events.*;
			//當點選任一個Image時所以會透過currentItem屬性去抓取目前使用者點選位置是屬於第幾張圖片，將其顯示在右方的Panel中
			private function getImage(event:Event):void
			{
				previewImg.load(event.currentTarget.getRepeaterItem());	
			}
		]]>
	</mx:Script>
 
	<mx:Parallel id="over">
	    <mx:Zoom  duration="100" zoomHeightTo="1.2" zoomWidthTo="1.2"/>
	    <mx:Glow id="glowImage" duration="300" 
        alphaFrom="1.0" alphaTo="0.3" 
        blurXFrom="0.0" blurXTo="50.0" 
        blurYFrom="0.0" blurYTo="50.0" 
        color="0x00FF00"/>
	</mx:Parallel>
 
	<mx:Parallel id="out">
	    <mx:Zoom  duration="100" zoomHeightTo="1" zoomWidthTo="1" />
	    <mx:Glow id="unglowImage" duration="200" 
        alphaFrom="0.3" alphaTo="1.0" 
        blurXFrom="50.0" blurXTo="0.0" 
        blurYFrom="50.0" blurYTo="0.0" 
        color="0x00FF00"/> 
	</mx:Parallel>
 
	<mx:Panel width="250" height="479" layout="absolute" id="thumbsPanel" title="Thumbnails" horizontalCenter="-292" verticalCenter="4">
 
	 	<mx:Tile direction="horizontal" 
	 		     borderStyle="none"
                 horizontalGap="10" 
                 verticalGap="10" 
                 paddingTop="5" 
                 paddingBottom="5" 
                 paddingLeft="5" 
                 paddingRight="5"  
                 width="210"
                 height="397" 
          		 verticalCenter="13" horizontalCenter="0">
         <mx:Repeater dataProvider="{galleryData.lastResult.gallery.images.img}" id="imageRepeater">
          <mx:HBox width="50" height="50" verticalAlign="middle" horizontalAlign="center">
	 		<mx:Image source="{imageRepeater.currentItem}" 
	 				  width="40" 
	 				  height="40" 
	 				  click="getImage(event)"
	 				  rollOverEffect="{over}"  
	 				  rollOutEffect="{out}"	   
	 				  horizontalAlign="center" verticalAlign="middle" buttonMode="true"/>
	 		</mx:HBox>
	 	</mx:Repeater>
	 	</mx:Tile>
	</mx:Panel>
 
	<mx:Panel width="582" height="481" layout="absolute" id="viewerPanel" title="View Panel" horizontalCenter="134" verticalCenter="5">
		<mx:Image id="previewImg"
			      width="542"
			      height="397" 
			      scaleContent="true"
			      verticalAlign="middle"
			      horizontalAlign="center"
			      maintainAspectRatio="true"
			      showBusyCursor="true"
			      source="assets/firstImage.JPG" verticalCenter="11" horizontalCenter="0"/>
		<mx:Label x="118.5" y="0" text="環島初體驗 Just Do It!" width="295" height="38" textAlign="center" fontSize="22" fontFamily="微軟正黑體" fontWeight="bold" color="#132DCB"/>
	</mx:Panel>
</mx:Application>