最近学习了下ToolTip的使用,这里和大家分享下,我也遇到几个问题,希望好心人士能帮我解决下啊
我所遇到的问题会用红色字体标注。
我的想法是这样的,把多个学生信息封装进ArrayCollection里面,然后提供给DataGrid的dataProvider,其中DataGrid中有三列信息,分别是姓名、年龄、分数。当分数小于60分的时候给予ToolTip提示,这个ToolTip是自定义的ToolTip,而如果分数大于60分就不予以提示。
程序效果图:
项目结构:
程序入口(tooltiptest.mxml):
1 <?xml version="1.0" encoding="utf-8"?> 2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 5 > 6 <fx:Declarations> 7 <!-- Place non-visual elements (e.g., services, value objects) here --> 8 </fx:Declarations> 9 10 <fx:Script> 11 <![CDATA[ 12 import mx.collections.ArrayCollection; 13 import mx.events.ToolTipEvent; 14 [Bindable] 15 private var students:ArrayCollection = new ArrayCollection([ 16 {name:"yuan",age:22,score:79}, 17 {name:"quan",age:15,score:80}, 18 {name:"lang",age:14,score:49}, 19 {name:"xina",age:19,score:64}, 20 {name:"langqi",age:16,score:82}, 21 {name:"bida",age:25,score:60}, 22 {name:"nani",age:10,score:40}, 23 {name:"aal",age:18,score:52}, 24 ]); 25 26 ]]> 27 </fx:Script> 28 29 <s:Panel width="600" height="500" verticalCenter="0" horizontalCenter="0"> 30 <mx:DataGrid dataProvider="{students}" width="100%" height="100%"> 31 <mx:columns> 32 <mx:DataGridColumn dataField="name" headerText="姓名"/> 33 34 <mx:DataGridColumn dataField="age" headerText="年龄"/> 35 36 <mx:DataGridColumn dataField="score" headerText="分数"> 37 <mx:itemRenderer> 38 <fx:Component> 39 <mx:Text toolTip="t" toolTipCreate="handleToolTipCreate(event)" toolTipShow="handleToolTipShow(event)" 40 > 41 <fx:Script> 42 <![CDATA[ 43 import mx.controls.ToolTip; 44 import mx.events.ToolTipEvent; 45 import mx.managers.ToolTipManager; 46 47 private var student:Object; 48 override public function set data(student:Object):void 49 { 50 super.data = student; 51 this.student = student; 52 53 if(student.score < 60) 54 { 55 this.htmlText = "<font color='#FF0000'>"+ student.score + "</font>"; 56 } 57 else 58 { 59 this.text = student.score; 60 } 61 62 } 63 64 private function handleToolTipCreate(e:ToolTipEvent):void 65 { 66 if(student.score < 60) 67 { 68 var tip:MyToolTip = new MyToolTip(); 69 tip.student = student; 70 e.toolTip = tip; 71 } 72 else 73 { 74 var novalueTip = NovalueTip.getInstance(); 75 e.toolTip = novalueTip; 76 } 77 } 78 79 private function handleToolTipShow(e:ToolTipEvent):void 80 { 81 var p:Point = new Point(); 82 p.x = stage.mouseX; 83 p.y = stage.mouseY; 84 85 e.toolTip.x = p.x; 86 e.toolTip.y = p.y; 87 } 88 ]]> 89 </fx:Script> 90 </mx:Text> 91 </fx:Component> 92 </mx:itemRenderer> 93 </mx:DataGridColumn> 94 </mx:columns> 95 </mx:DataGrid> 96 </s:Panel> 97 </s:Application>
第39行可以看到toopTip、toolTipCreate、toolTipShow标签,其中toolTipCreate是在显示之前生成自定义ToolTip的事件,toolTipShow是显示自定义
ToolTip时的触发事件,可以在触发函数中设置显示位置等。(1)至于toolTip标签要给定一个默认字符串,否则自定义ToolTip无法显示,为什么会这样,我也不甚了解,希望知道的朋友,能告诉我一声。
第64~77行中,可以看到,(2)如果学生分数小于60分就生成自定义ToolTip-->MyToolTip;否则就生成另一个自定义ToolTip-->NovalueToolTip,这个NovalueToolTip里面什么内容都没有,就是不给予提示,刚开始我是这样做的,在else代码块里面写的内容是e.toolTip=null,可是还是会显示提示为"t"的ToolTip,这里困惑了我很久。
MyToolTip.mxml:
1 <?xml version="1.0" encoding="utf-8"?> 2 <mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx" width="150" height="200" backgroundColor="#312E2E" 5 implements="mx.core.IToolTip" 6 alpha=".6" cornerRadius="6" borderStyle="solid" 7 > 8 <fx:Declarations> 9 <!-- Place non-visual elements (e.g., services, value objects) here --> 10 </fx:Declarations> 11 12 <fx:Script> 13 <![CDATA[ 14 private var _student:Object; 15 private var _text:String; 16 [Bindable] 17 private var tips:String = "考试不及格,下个学期补考!"; 18 19 [Bindable] 20 public function get student():Object 21 { 22 return _student; 23 } 24 25 public function set student(value:Object):void 26 { 27 _student = value; 28 } 29 30 public function get text():String 31 { 32 return this._text; 33 } 34 35 public function set text(value:String):void 36 { 37 this._text = value; 38 } 39 ]]> 40 </fx:Script> 41 42 43 <mx:VBox> 44 <mx:Text text="姓名:{student.name}" color="#50e0ff" paddingLeft="6" paddingTop="2"/> 45 <mx:Text text="分数:{student.score}" color="#f30017" paddingLeft="6" paddingTop="2"/> 46 <mx:Text text="{tips}" color="white" paddingTop="2" /> 47 </mx:VBox> 48 </mx:Canvas>
NovalueToolTip.mxml:
1 <?xml version="1.0" encoding="utf-8"?> 2 <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" 5 implements="mx.core.IToolTip" 6 > 7 <fx:Declarations> 8 <!-- Place non-visual elements (e.g., services, value objects) here --> 9 </fx:Declarations> 10 11 <fx:Script> 12 <![CDATA[ 13 private var _text:String; 14 15 private static var novalueTip:NovalueTip; 16 public static function getInstance():NovalueTip 17 { 18 if(!novalueTip) 19 novalueTip = new NovalueTip(); 20 return novalueTip; 21 } 22 23 public function get text():String 24 { 25 return _text; 26 } 27 28 public function set text(value:String):void 29 { 30 _text = value; 31 } 32 33 ]]> 34 </fx:Script> 35 </s:Group>
ToolTip的使用可以参考以下文章:
http://bbs.9ria.com/forum.php?mod=viewthread&tid=69085&highlight=tooltip