Flex3.0&AS3 사용자정의 ToolTip 구현하기 및 List 콤포넌트 Control 엘라라 2008. 10. 22. 18:19 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>