自定义ToolTip的显示

最近学习了下ToolTip的使用,这里和大家分享下,我也遇到几个问题,希望好心人士能帮我解决下啊
我所遇到的问题会用红色字体标注。

我的想法是这样的,把多个学生信息封装进ArrayCollection里面,然后提供给DataGrid的dataProvider,其中DataGrid中有三列信息,分别是姓名、年龄、分数。当分数小于60分的时候给予ToolTip提示,这个ToolTip是自定义的ToolTip,而如果分数大于60分就不予以提示。

程序效果图:

自定义ToolTip的显示


项目结构:

自定义ToolTip的显示 

程序入口(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行可以看到toopTiptoolTipCreatetoolTipShow标签,其中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

 

你可能感兴趣的:(tooltip)