WEB开发网
开发学院软件开发Java Flex 自定义组件外观 阅读

Flex 自定义组件外观

 2010-08-20 00:00:00 来源:WEB开发网   
核心提示: 冒泡信息提示框冒泡信息提示框是自定义的 ToolTip,传统的 Flex ToolTip 效果如图 4 所示,Flex 自定义组件外观(5),图 4. 传统 ToolTip可以看到效果还是比较简陋的,为了增强用户体验,调用 Graphics 对象的 drawRoundRect 方法绘制冒泡的圆形

冒泡信息提示框

冒泡信息提示框是自定义的 ToolTip,传统的 Flex ToolTip 效果如图 4 所示。

图 4. 传统 ToolTip
Flex 自定义组件外观

可以看到效果还是比较简陋的,为了增强用户体验,文章实现了新的 ToolTip 让其拥有冒泡效果,效果展示如图 5.

图 5. 冒泡 ToolTip
Flex 自定义组件外观

冒泡 ToolTip 的思想是新建名为 BubbleToolTip 的类,继承于 Canvas,实现 IToolTip 接口,IToolTip 是自定义 ToolTip 必须实现的接口。重写 BubbleToolTip 的 updateDisplayList 方法,目的是重新绘画 BubbleToolTip 的皮肤,皮肤的绘制依赖 BubbleToolTip 内部的 Graphics 对象,通过 this.graphics 语句可以获得该 Graphics 对象的引用,调用 Graphics 对象的 drawRoundRect 方法绘制冒泡的圆形,提示的具体内容则使用子对象 Canvas 存放。清单 3 是 BubbleToolTip 的 updateDisplayList 方法代码。

清单 3. BubbleToolTip 的 updateDisplayList 方法

 override protected function updateDisplayList( 
      unscaledWidth:Number, unscaledHeight:Number ) : void 
 {  
  super.updateDisplayList( unscaledWidth, unscaledHeight ); 
 
 
 this.graphics.clear(); 
 
  this.graphics.beginFill( getStyle('backgroundColor'), 1 ); 
  this.graphics.lineStyle(2, getStyle('borderColor'), 1); 
  this.graphics.drawRoundRect(0, 35, 6, 6, 24, 24); 
  this.graphics.endFill(); 
 
  this.graphics.beginFill( getStyle('backgroundColor'), 1 ); 
  this.graphics.lineStyle(2, getStyle('borderColor'), 1); 
  this.graphics.drawRoundRect(10, 25, 15, 15, 24, 24); 
  this.graphics.endFill(); 
 } 

上一页  1 2 3 4 5 6 7 8 9  下一页

Tags:Flex 定义 组件

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接