学步园

      关于ToolTip自定义其实自己一直有一些想法，因为通过自己的项目以及在别人的东西里面看到的，逐渐发现Flex默认提供的ToolTip并不是那么友好（这里说的友好是指用户的体验性），已然觉得有自定义ToolTip的必要了。

      这几天利用空余的时间研究了下自定义ToolTip，现做一个小小的总结。自定义ToolTip有好方式，当就实现效果角度讲，我发现了3种，下面一一做介绍，重点介绍自己已经实现的方案。

       1.仿照ToolTipManagerImpl并摒弃它的实现思路，自己实现、管理ToolTip.通过查看ToolTipManagerImpl的源码，发现它是

var sm:ISystemManager = getSystemManager(currentTarget) as ISystemManager;<br /> sm.topLevelSystemManager.addChildToSandboxRoot("toolTipChildren", currentToolTip as DisplayObject); 这样实现，因此我们可以仿照他自己操办ToolTip,需要注意的是，这种情况我们自己创建了ToolTip实例，所以实例的销货也要我们处理，一旦处理不好就会导致内存泄露，慎用！

        2.实现IToolTip接口，并自定义它的border，实现带小箭头的ToolTip.它的精华部分是，通过border画出了小箭头，这种解决方案可能也是业界推崇的，我也从网上下了一些例子（这部分例子不贴出来了，有兴趣的自己下载），结果要么小箭头位置不合意，要么ToolTip的定位有问题。这才引发我思考第三中解决方案。

        3.实现IToolTip接口，自己画小箭头。我这里说的自己画小箭头意思是指不通过border来做操作了，稍微注意的是在使用自定义ToolTip时，目标对象的toolTip属性一定要打开并设置成成toolTip='  '，具体操作不多说了，见代码。

测试主程序：CutomerTooltip                                                                                                                                                  <?xml version="1.0"?><br /> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"<br /> layout="horizontal"><br /> <mx:Script><br /> <!--[CDATA[<br /> import mx.events.ToolTipEvent;<br /> private function createCustomTip(title:String, body:String, event:ToolTipEvent):void<br /> {<br /> PanelToolTip.createCustomerTooltip(title,body,event);<br /> }<br /> private function positionTip(event:ToolTipEvent):void<br /> {<br /> PanelToolTip.showCustomerTooltip(event);<br /> }<br /> ]]--><br /> </mx:Script><br /> <mx:VBox height="100%" width="30%" horizontalAlign="left"><br /> <mx:Button label="RD"<br /> width="200"<br /> height="300"<br /> toolTip=" "<br /> toolTipCreate="createCustomTip('RD','right down corner tip.', event)"<br /> toolTipShown="positionTip(event)"/><br /> <mx:Button label="free"<br /> height="100%"<br /> toolTip=" "<br /> toolTipCreate="createCustomTip('@','hey,nice guy!.', event)"<br /> toolTipShown="positionTip(event)"/><br /> <mx:Button label="Left Up Tooltip"<br /> toolTip=" "<br /> toolTipCreate="createCustomTip('LU','left up corner tip.', event)"<br /> toolTipShown="positionTip(event)"/><br /> </mx:VBox><br /> <mx:VBox height="100%" width="100%" horizontalAlign="center"><br /> <mx:Button label="Down"<br /> toolTip=" "<br /> toolTipCreate="createCustomTip('Down','just for down.', event)"<br /> toolTipShown="positionTip(event)"/><br /> <mx:Button label="Delete"<br /> width="400"<br /> height="450"<br /> toolTip=" "<br /> toolTipCreate="createCustomTip('DELETE','sorry,it does not work.', event)"<br /> toolTipShown="positionTip(event)"/><br /> <mx:Button label="interesting"<br /> toolTip=" "<br /> toolTipCreate="createCustomTip('ing','come on baby.', event)"<br /> toolTipShown="positionTip(event)"/><br /> <mx:Button label="Default tooltip"<br /> toolTip="This button uses a standard ToolTip style."/><br /> </mx:VBox><br /> <mx:VBox height="100%" width="45%" horizontalAlign="right"><br /> <mx:Button label="LEFT"<br /> toolTip=" "<br /> toolTipCreate="createCustomTip('L','look left.', event)"<br /> toolTipShown="positionTip(event)"/><br /> <mx:Button label="natian306"<br /> height="100%"<br /> toolTip=" "<br /> toolTipCreate="createCustomTip('nt','www.natian306.com', event)"<br /> toolTipShown="positionTip(event)"/><br /> <mx:Button label="What"<br /> toolTip=" "<br /> toolTipCreate="createCustomTip('What','What is your feeling of this tip component?', event)"<br /> toolTipShown="positionTip(event)"/><br /> </mx:VBox><br /> </mx:Application><br />
自定义的ToolTip类：PanelToolTip                                                                                                                                         

<?xml version="1.0"?><br /> <!--<br /> className:PanelToolTip;<br /> attention:使用该组件时请确认你组件的tootip属性已经打开为' ',即tootip=' ';<br /> author:natian;<br /> --><br /> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"<br /> implements="mx.core.IToolTip"<br /> width="100%"<br /> alpha=".8"<br /> borderThickness="2"<br /> backgroundColor="0xCCCCCC"<br /> dropShadowEnabled="true"<br /> borderStyle="solid"<br /> roundedBottomCorners="true"<br /> cornerRadius="10"<br /> horizontalAlign="center"<br /> creationComplete="init()"><br /> <mx:Script><br /> <!--[CDATA[<br /> import mx.core.UIComponent;<br /> import mx.events.ToolTipEvent;</p> <p> static private const DIR_RIGHT:String = "right";<br /> static private const DIR_LEFT:String = "left";<br /> static private const DIR_UP:String = "up";<br /> static private const DIR_DOWN:String = "down";</p> <p> [Bindable]<br /> public var bodyText:String = "";</p> <p> public var dirFillColor:uint = 0x000000; //小尖角区域填充颜色,default:0x000000<br /> public var dirFillAlpha:Number = 1; //小尖角区域填充alpha,default:1<br /> public var dirOffsetY:int = 7; //小尖角距tooltip顶端的偏移量,default:7<br /> public var distance_tip_tar:int = 10; //tooltip和target间的距离,default:10<br /> public var distance_dir_twopoint_at_tip:int = 12; //在tooltip上的小尖角三角形的边长宽,default:12</p> <p> private var _direction:Array; //顺序为x,y(right,left,up,down)<br /> private var directionChange:Boolean;</p> <p> private function set direction(value:Array):void {<br /> _direction = value;<br /> directionChange = true;<br /> this.invalidateProperties();<br /> }</p> <p> // Implement required methods of the IToolTip interface;<br /> public var _text:String;<br /> [Bindable]<br /> public function get text():String<br /> {<br /> return _text;<br /> }<br /> public function set text(value:String):void<br /> {<br /> }</p> <p> private function init():void {<br /> //只识别uint类型颜色，优先和border的颜色一样，若未设置boder的颜色，则采用默认填充色<br /> var obj:uint = this.getStyle("borderColor") as uint;<br /> if(obj){<br /> dirFillColor = obj;<br /> }<br /> }</p> <p> override protected function commitProperties():void {<br /> super.commitProperties();<br /> if(directionChange){<br /> directionChange = false;<br /> drawSharp();<br /> }<br /> }</p> <p> //画小尖角<br /> private function drawSharp():void {<br /> var xdir:String = _direction[0] as String;<br /> var ydir:String = _direction[1] as String;<br /> var gr:Graphics = this.graphics;<br /> gr.clear();<br /> gr.beginFill(dirFillColor, dirFillAlpha);<br /> if(xdir == DIR_RIGHT && ydir == DIR_DOWN){<br /> /* gr.moveTo(0, 7);<br /> gr.lineTo(-11, 13);<br /> gr.lineTo(0, 19);<br /> gr.moveTo(0, 7); */<br /> gr.moveTo(0, dirOffsetY);<br /> gr.lineTo(-distance_tip_tar-1, dirOffsetY+distance_dir_twopoint_at_tip/2);<br /> gr.lineTo(0, dirOffsetY+distance_dir_twopoint_at_tip);<br /> gr.moveTo(0, dirOffsetY);<br /> }else if(xdir == DIR_RIGHT && ydir == DIR_UP){<br /> gr.moveTo(0, 0 + this.height - dirOffsetY);<br /> gr.lineTo(-distance_tip_tar -1, 0 + this.height - dirOffsetY-distance_dir_twopoint_at_tip/2);<br /> gr.lineTo(0, 0 + this.height - dirOffsetY-distance_dir_twopoint_at_tip);<br /> gr.moveTo(0, 0 + this.height - dirOffsetY);<br /> }else if(xdir == DIR_LEFT && ydir == DIR_DOWN){<br /> gr.moveTo(this.width, dirOffsetY);<br /> gr.lineTo(this.width + distance_tip_tar + 1, dirOffsetY+distance_dir_twopoint_at_tip/2);<br /> gr.lineTo(this.width, dirOffsetY+distance_dir_twopoint_at_tip);<br /> gr.moveTo(this.width, dirOffsetY);<br /> }else if(xdir == DIR_LEFT && ydir == DIR_UP){<br /> gr.moveTo(this.width, this.height - dirOffsetY);<br /> gr.lineTo(this.width + distance_tip_tar + 1, this.height - dirOffsetY-distance_dir_twopoint_at_tip/2);<br /> gr.lineTo(this.width, this.height - dirOffsetY-distance_dir_twopoint_at_tip);<br /> gr.moveTo(this.width, this.height - dirOffsetY);<br /> }<br /> gr.endFill();<br /> }</p> <p> /**<br /> * @event:tooltip事件流<br /> * @describe:重新定位tooltip,并为其画小尖角<br /> * */<br /> public function hasShownEventHandler(event:ToolTipEvent):void {<br /> var target:UIComponent = event.currentTarget as UIComponent;<br /> //只针对uicomponent做tooltip<br /> if(!target){<br /> return;<br /> }<br /> var tgPoint:Point = target.localToGlobal(new Point(0,0));<br /> var resX:int = screen.width;<br /> var resY:int = screen.height;<br /> var realTX:int;<br /> var realTY:int;</p> <p> var toolRightX:int = tgPoint.x + target.width + distance_tip_tar;<br /> var toolLeftX:int = tgPoint.x - distance_tip_tar - this.width;<br /> var xchange:String = "";<br /> //tooltip的定位优先右边，故先判断右边<br /> if(toolRightX + this.width < resX){<br /> // do right<br /> xchange = PanelToolTip.DIR_RIGHT;<br /> realTX = toolRightX<br /> }else if(toolLeftX > 0){<br /> // do left<br /> xchange = PanelToolTip.DIR_LEFT;<br /> realTX = toolLeftX;<br /> }</p> <p> var toolUpY:int = tgPoint.y + target.height;<br /> var toolDownY:int = tgPoint.y;<br /> var ychange:String = "";<br /> //tooltip的定位优先下边，故先判断下边<br /> if(toolDownY + this.height < resY){<br /> //do down<br /> ychange = PanelToolTip.DIR_DOWN;<br /> realTY = toolDownY;<br /> }else if(toolUpY - this.height > 0){<br /> //do up<br /> ychange = PanelToolTip.DIR_UP;<br /> realTY = toolUpY - this.height;<br /> }<br /> //若不能定位tooltip的位置，则按默认tooltip的显示<br /> if(xchange == "" || ychange == ""){<br /> return;<br /> }<br /> //重新定位tooltip<br /> this.x = realTX;<br /> this.y = realTY;<br /> this.direction = [xchange,ychange];<br /> }</p> <p> /**<br /> * @title:tip的标题；<br /> * @bodytxt:要tip的文字；<br /> * @event:tootip事件流对象；<br /> * @restrict:约束，即当bodytxt=''时，不创建tooltip,bodytxt!=''是才创建，default=true;<br /> * @describe:传入相关参数，运用PanelToolTip创建自定义的tootip;<br /> * */<br /> static public function createCustomerTooltip(title:String,bodytxt:String,event:ToolTipEvent,restrict:Boolean=true):void {<br /> if(restrict){<br /> if(bodytxt == ""){<br /> if(event.toolTip == null){<br /> return;<br /> }<br /> }<br /> }<br /> var ptt:PanelToolTip = new PanelToolTip();<br /> ptt.bodyText = bodytxt;<br /> ptt.title = title;<br /> event.toolTip = ptt;<br /> }</p> <p> /**<br /> * @describe:存在两种情况：当tip的text!=''时，走正常流程，即执行第一个判断；当tip的text==''时，因为我们的tootip初始值为' '，<br /> * 它已经产生了tooltip，但我们不想看到它，故将其的visible属性设置为false;注意下面的判断顺序不能变；<br /> * */<br /> static public function showCustomerTooltip(event:ToolTipEvent):void {<br /> var ptt:PanelToolTip=event.toolTip as PanelToolTip;<br /> if (ptt)<br /> {<br /> ptt.hasShownEventHandler(event);<br /> }else if(event.toolTip && event.toolTip.parent != null)<br /> {<br /> event.toolTip.visible = false;<br /> }<br /> }</p> <p> ]]--><br /> </mx:Script><br /> <mx:Text text="{bodyText}"<br /> percentWidth="100"/><br /> <mx:Image source="@Embed('jin.png')"<br /> scaleContent="true"<br /> scaleX="1"<br /> scaleY=".5"/><br /> </mx:Panel><br />  

效果：