Flex 自定义组件外观

清单 3 的作用是绘画图 5 中黑色的两个圆圈，显示 Hello 信息的则是使用 Canvas 组件，该 Canvas 是在主 MXML 文件中定义，代码如清单 4 所示。

清单 4. 使用 BubbleToolTip 的 MXML 文件

　<?xml　version="1.0"　encoding="utf-8"?>　
　<mx:Application　xmlns:mx="http://www.adobe.com/2006/mxml"　layout="absolute"　
　xmlns:component="component.*"　backgroundGradientAlphas="[1.0,　1.0]"　
　backgroundGradientColors="[#FFFFFF,　#FFFFFF]">　
　<mx:Script><![CDATA[　
　　　　import　mx.events.ToolTipEvent;　
　　　　import　component.BubbleToolTip;　
　　　　　
　　　　private　function　createCustomTip(title:String,event:ToolTipEvent):void　{　
　　　　　　var　bt:BubbleToolTip　=　new　BubbleToolTip();　
　　　　　　bt.text=title;　
　　　　　　content.text　=　title;　
　　　　　　bt.addChild(ppp);　
　　　　　　ppp.visible=true;　
　　　　　　event.toolTip　=　bt;　
　　　　}　
　　　　　
　　　　private　function　positionTip(event:ToolTipEvent):void{　
　　　　　　event.toolTip.x=event.currentTarget.x　+　event.currentTarget.width　+　10;　
　　　　　　event.toolTip.y=event.currentTarget.y;　　
　　　　}　
　　]]></mx:Script>　
　
　<mx:Button　id="b1"　
　　　　label="Hello　world"　x="60"　y="60"　
　　　　toolTip="　"　
　　　　toolTipCreate="createCustomTip('Hello　World',event)"　
　　　　toolTipShow="positionTip(event)"　
　　/>　
　<mx:Canvas　id="ppp"　visible="false"　width="50"　height="40"　cornerRadius="15"　
　　borderColor="#000000"　x="35"　y="0"　borderStyle="solid"　borderThickness="2">　
　　<mx:Text　id=　"content"　text="xixi"　x="4.5"　y="5"　width="40"　height="23.5">　
　　　　　
　　　　</mx:Text>　
　　　　</mx:Canvas>　
　</mx:Application>