Flex3.0&AS3 2008. 10. 22. 18:19

사용자정의 ToolTip 구현하기 및 List 콤포넌트 Control


PanelToolTip.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 width="250" fontSize="12" alpha=".8" borderThickness="2" backgroundColor="#dedede"
 borderColor="black" borderStyle="solid" implements="mx.core.IToolTip">
 <mx:Script>
  <![CDATA[
   private var _text:String;
   
   public function get text():String{
    return _text;
   }
   
   public function set text(value:String):void{
    _text=value;
   }
   
  ]]>
 </mx:Script>
 <mx:Text text="{_text}" percentWidth="100" width="198" height="22" fontSize="12"/>
</mx:Panel>

listBaseEx.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Script>
  <![CDATA[
   import comp.PanelToolTip;
   import mx.events.ToolTipEvent;
   import mx.events.ListEvent;
   import mx.controls.Alert;
   import mx.collections.IList;
   import mx.managers.DragManager;
   import mx.events.DragEvent;
   
   
   [Bindable]
    [Embed(source='imgs/rss.png')]
    private var m1:Class;
    
    private var mTipString:String;
    
    private function AppendData():void{
     var mNum:Number=dpd.length+1;
     dpd.addItem({label:"label"+mNum,data:"data"+mNum,icon:m1});
     
    }
    
    private function fnDragDrop(event:DragEvent):void{
     if(DragManager.COPY!=event.action)
     {
      return;
     }
     event.preventDefault();
     
     /*Drag한 아이템을 얻어옴*/
     var items:Array = event.dragSource.dataForFormat("items") as Array;
     
     var dropTarget:List = List(event.currentTarget);
     var dropLoc:int = dropTarget.calculateDropIndex(event); // 생성될 위치 얻어오기
     Alert.show(dropLoc.toString());
     
     for(var i:int=items.length -1 ; i>=0; i--){
      var tempItem:Object = {label:items[i].label, data:items[i].data, icon:items[i].icon};
      IList(dropTarget.dataProvider).addItemAt(tempItem,dropLoc);
     }
    }
    
     private function fnRollOut(event:ListEvent):void{
      mTipString = "";
      removeEventListener(ToolTipEvent.TOOL_TIP_CREATE, createCustomTip);
      
     }
     
     private function fnRollOver(event:ListEvent):void{
      event.target.addEventListener(ToolTipEvent.TOOL_TIP_CREATE,createCustomTip);
      
      mTipString = event.itemRenderer.data.toolTip; //툴팁 문구를 변수에 저장.
      event.target.toolTip = mTipString;
     }
     
     private function createCustomTip(event:ToolTipEvent):void{
      var ptt:PanelToolTip = new PanelToolTip();
      ptt.title = "Custom ToolTip";
      ptt.text = mTipString;
      event.toolTip = ptt;
     }
  ]]>
 </mx:Script>
 <mx:ArrayCollection id="dpd">
  <mx:source>
   <mx:Object label="label1" data="data1" icon="{m1}" toolTip="{lData.selectedItem.label}"/>
   <mx:Object label="label2" data="data2" icon="{m1}" toolTip="{lData.selectedItem.label}"/>
   <mx:Object label="label3" data="data3" icon="{m1}" toolTip="OK?"/>
  </mx:source>
 </mx:ArrayCollection>
 
 <mx:List id="lData" dataProvider="{dpd}" width="240" height="200" dragEnabled="true"
  dropEnabled="true" dragMoveEnabled="true" dragDrop="fnDragDrop(event)"
  itemRollOut="fnRollOut(event)" itemRollOver="fnRollOver(event)"
  />
 <mx:Label text="Selected label : {lData.selectedItem.label}"/>
 <mx:Label text="Selected data : {lData.selectedItem.data}"/>
 <mx:Image source="{lData.selectedItem.icon}"/>
 <mx:Button label="AppendData" width="195" click="AppendData()"/>
</mx:Application>