[FLEX 3.0] HorizontalList와 ControlBar로 이미지 slider 구현하기

이미지 카테고리를 만들려고 구현하다가 스크롤바가 너무 보기 싶어서 다른방법을 써보기로 했다.

http://blog.flexexamples.com/ 이곳에서 찾아보다가 HorizontalList와 controlBar로 구현하면 되겠다 싶어서
내가 필요한것으로 좀 변경해보았다..

이미지 카테고리 이기때문에 파일 업로드시 이미 내가 필요한 사이즈 대로 여러가시 썸네일을 구현해 놓은 상태이고
다순히 화면에 보여주기만 하면된다.

기본 로직은 http://blog.flexexamples.com/ 에 나와있는 소스 그대로 이고 화면에 보여줄때 itemRenderer를 사용해버려서리
스크롤바가 나타나는데 그것을 방지 하기 위해서 대표 이미지를 하나 구해서 이미지의 사이즈를 구했다..

----------------------------------------------------------------------------------------------
sliderTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="hListInit();">

 <mx:Script>
  <![CDATA[
   import mx.controls.Image;
   import mx.events.SliderEvent;
   
   private var imageUrl:String = "";
   private var basePlusWidth = 6;
   private var basePlusHeight = 26;
   
   private function prev():void
   {
    var pos:int = hList.horizontalScrollPosition - 1;
    var min:int = 0;
    var value:int = Math.max(min, pos);
    hList.horizontalScrollPosition = value;
   }
   
   private function next():void
   {
    var pos:int = hList.horizontalScrollPosition + 1;
    var max:int = hList.maxHorizontalScrollPosition;
    var value:int = Math.min(pos, max);
    hList.horizontalScrollPosition = value; 
   }
   
   private function slider_change(evt:SliderEvent):void
   {
    hList.horizontalScrollPosition = evt.value;
   }
   
   
   private function hListInit():void
   {
    var listData:Array = arr;
    var baseImage:Image = new Image();
    var baseImageWidth:int = 0;
    var baseImageHeight:int = 0;
    
    if(listData && listData.length > 0)
    { 
     imageUrl = listData[0]["src"];
     baseImage.addEventListener(Event.COMPLETE, imageLoadHandler);
     baseImage.load(imageUrl);
    }
   }
   
   private function imageLoadHandler(event:Event):void
   {
    var baseImage:Image = event.currentTarget as Image;
    baseImage.width = baseImage.contentWidth;
    baseImage.height = baseImage.contentHeight;
    
    hList.columnWidth = baseImage.width + basePlusWidth;
    hList.rowHeight = baseImage.height + basePlusHeight;
    
   }
   
   
  ]]>
 </mx:Script>

 

 <mx:Array id="arr">
  <mx:Object lbl="TEST 1" src="http://riamx.com/UploadFile/album3List/data-20081114_.jpg" />
 </mx:Array>
 
 
 <mx:Panel styleName="opaquePanel">
  <mx:HorizontalList id="hList"
   dataProvider="{arr}"
   itemRenderer="HorizontalListItemRenderer"
   verticalScrollPolicy="off"
   horizontalScrollPolicy="off"
   rowCount="1"
   borderSkin="{null}"/>

   <mx:ControlBar>
    <mx:Button label="Previous" click="prev();" />
    <mx:HSlider id="slider" minimum="0" maximum="{hList.maxHorizontalScrollPosition}"
     value="{hList.horizontalScrollPosition}" liveDragging="true" snapInterval="1"
     tickInterval="1" showDataTip="false" width="100%" change="slider_change(event);" />
    <mx:Button label="Next" click="next();"/>
   </mx:ControlBar>
   
 </mx:Panel>
 
</mx:Application>

------------------------------------------------------------
HorizontalListItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Label text="{data.lbl}" fontWeight="bold" horizontalCenter="0"/>
 <mx:Image source="{data.src}" verticalCenter="10" horizontalCenter="0"/>
</mx:Canvas>