Flex 自定义组件外观


Flex 自定义组件外观 Flex 是现今最受欢迎的 RIA 开发技术之一,它凭借其优秀的用户体验获得许多用 户的青睐,因此也吸引了众多的程序员投入 Flex 学习的洪流之中。Flex 之所以如此受欢迎,一大部分原因是因为 Flex 的界面效果非常出众。Flex 提供了自定义组件外观的众多方法,使得 Flex 程序界面丰富多彩。本文通过简单 实用的程序例子(包括冒泡信息提示框、图像圆角、动态按钮、网格背景),使用 位图、矢量图、SWF 文件自定义皮肤,使用 Mask 制作遮掩效果,讲解了其中几种 自定义组件外观方法的优缺点。通过本文,读者可以比较系统的学习组件自定义外 观的方法,在设计 Flex 的 UI 时,相信本文可以为读者提供帮助 . 引言 优秀的 Flex 应用程序总是绚丽多彩,有些甚至令人瞠目结舌,不得不称赞 Flex 的 UI 效果。Flex 组件的默认效果一般,那么那些华丽的界面又是如何开发的呢,这 就得靠程序员自定义组件外观实现了,Flex 组件提供了许多让程序员自定义外观 的方式方法,本文通过具体的应用实例,讲解其中几种笔者使用过的自定义组件的 方法,相信初识 Flex 的读者可以从中获益。 实例实现 目前 Flex 已经出了 Flex 4 版本,本文使用的是 Flex 3 版本,实现部分按照下面的列表依次讲述。 开发环境配置 动态按钮位图实现 动态按钮 SWF 实现 冒泡信息提示框 网格背景 图像圆角 实际上各个部分之间没有明显的关系,除了开发环境配置,其他每个部分分别讲述 了一种自定义组件外观的方法,因此,读者可以根据需要查看具体部分。附件是标 准的 Flex Builder 3 的项目,读者可以下载后导入,除了开发环境配置外,上述列 表的其他各个部分都对应着一个 mxml 文件,可以直接运行查看效果。具体对应关系可以查看附件中的清单。 P 1 / 9 Flex 自定义组件外观 开发环境配置 所有的例子都是使用 Flex Builder 开发,需要 JDK5.0 以上的支持,例子中不需要服务器的支持,需要安装 Flash Player 9.0。 动态按钮 动态按钮的的概念就是在鼠标悬停、鼠标点击、鼠标离开控件时,组件呈现不同的 外观,这三种不同的外观可以通过背景位图图片,背景 SWF 文件实现。 位图实现 位图实现是将二进制图像文件作为控件背景,这里使用 Flex 的 Button 控件作为例子,通过定义 Button 的 upSkin、overSkin 以及 downSkin 样式分别设置鼠标离开 Button 时、鼠标悬停 Button 上方时以及鼠标点击 Button 时的皮肤,皮肤制作则使用 Embed 标签加载图片,使之成为 Class 对象,通过 Button 的 setStyle 方法将 Class 对象作为皮肤设置进去,清单 1 展示了其中设置 upSkin 的方法 .downSkin 和 overSkin 的设置方法相同。 清单 1. Button 控件设置 upSkin var btn:Button= … ; [Embed(source="images/up.jpg", scaleGridTop="26", scaleGridBottom="64", scaleGridLeft="30", scaleGridRight="106")] private var upSkin:Class; btn.setStyle("upSkin",upSkin); 清单 1 中,Embed 标签内的 scaleGridTop、scaleGridBottom、scaleGridLeft、scaleGridRight 属性涉及到一种 Web 技术,名为九宫格的缩放技术,为了解释该技术,请先看图 1. 图 1. 九宫格原理图 P 2 / 9 Flex 自定义组件外观 注:原图是 ,5 * 5 方格图,每个方格 4 个像素,上图是被放大后的效果 图 1 在四条红线的位置把图片块成了 9 块,四个角,四条边和中间一块,在缩放 的时候,四个角始终不变,两条横向边只缩放宽度,高度不变,两条纵向的边只缩 放高度,宽度不变,中间一块宽和高同时缩放,这就是九宫格缩放的原理。这种技 术一般是在使用图片做控件的皮肤时使用,很多控件的皮肤样式,在四个角的为位 置是圆的或不规则的,所以使用这种缩放技术可以保证控件与图片的大小不一致的 时候,图片看起来并不变形。 了解了九宫格技术再看 scaleGridTop、scaleGridBottom、scaleGridLeft、scaleGridRight 四个属性,它们分别代表图 1 中四条红色切割线的位置,scaleGridTop 代表横向顶部的切割线距离图像顶部的像素距离;scaleGridBottom 代表横向底部的切割线距离图像顶部的像素距离;scaleGridLeft 代表纵向左部的切割线距离图像左部的像素距离;scaleGridRight 代表纵向右部的切割线距离图像左部的像素距离。 通过上述技术和方法的使用,具体实例效果展示如图 2. 从左至右分别是 upSkin、downSkin、overSkin 的效果。 图 2. 位图实现效果展示图 SWF 文件实现 P 3 / 9 Flex 自定义组件外观 SWF 文件实现就是用 SWF 文件中具体的某一帧(MoiveClip)作为控件皮肤,修改 位图实现部分的 Embed 标签,构建的新的示例,如清单 2. 清单 2. 使用 SWF 具体某帧作为皮肤 Button{ up-skin:Embed(source="images/bg.swf",symbol="btnUP"); over-skin:Embed(source="images/bg.swf",symbol="btnOVER "); down-skin:Embed(source="images/bg.swf",symbol="btnDOWN "); } 上面代码 Embed 中的 source 指向了一个 SWF 文件,没有与九宫格相关的布局属性,出现了新的属性:symbol,它是 SWF 文件中某一帧的标识符,意思是使用指定的帧作为皮肤。清单 2 的效果如图 3. 从左至右分别是 upSkin、downSkin、overSkin 的效果。 图 3. SWF 实现效果展示图 这种特殊的 SWF 文件需要用到 Flash 开发工具,具体的开发方法读者可以查阅相关的 Flash 资料。 冒泡信息提示框 冒泡信息提示框是自定义的 ToolTip,传统的 Flex ToolTip 效果如图 4 所示。 图 4. 传统 ToolTip P 4 / 9 Flex 自定义组件外观 可以看到效果还是比较简陋的,为了增强用户体验,文章实现了新的 ToolTip 让其拥有冒泡效果,效果展示如图 5. 图 5. 冒泡 ToolTip 冒泡 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); P 5 / 9 Flex 自定义组件外观 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(); } 清单 3 的作用是绘画图 5 中黑色的两个圆圈,显示 Hello 信息的则是使用 Canvas 组件,该 Canvas 是在主 MXML 文件中定义,代码如清单 4 所示。 清单 4. 使用 BubbleToolTip 的 MXML 文件 清单 4 中定义了存放信息的 Canvas ,id 为 ppp,首先设置 ppp 的 visible 为 false,不可见,在显示 ToolTip 的时候将 ppp 加到 BubbleToolTip 中,并且设置 ppp 为可见。设置 event.tooltip 为指定的 BubbleToolTip 对象。在 createCutomTip 方法中设置新的 ToolTip,在 positionTip 方法中定义 tooltip 的显示位置。 为了形象的表现出重写 updateDisplayList 方法前后的 BubbleToolTip 的对比,图 5显示的是重写后弹出的信息提示框,图 6 是不重写 updateDisplayList 的信息提示框,从两张图片可以看出重写后发生的变化。 图 6. 不重写 updateDisplayList 方法的 BubbleToolTip 可以看到子对象的 Canvas 前后不变,因为并没有重写它的 P 7 / 9 Flex 自定义组件外观 updateDisplayList,而重写 BubbleToolTip 的 updateDisplayList 方法后边框变成了两个冒泡。注意 BubbleToolTip 对象实际上也是一个 Canvas。 网格背景 网格背景在一些 Flex 流程编辑器中可以看到,画布的网格背景不仅可以增强用户 体验,对于流程编辑中的流程节点的对齐也有很大的帮助。 网格背景的容器使用画布 Canvas 对象,使用 CSS 重新定义容器的皮肤。定义新皮肤的 CSS 代码如清单 5. 清单 5. CSS 定义新皮肤 Canvas { borderSkin: ClassReference("skins.GridSkin"); } skins.GridSkin 是一个 Flex 类,继承于 ProgrammaticSkin,ProgrammaticSkin 类代表编程式的皮肤定义,重写它的 updateDisplayList 方法可以设置新的皮肤,这和直接重写 Canvas 的 updateDisplayList 方法效果上是一致的,本文重在讲解新的定义方法,因此使用 CSS 定义。清单 6 显示网格定义的代码。 清单 6. ProgrammaticSkin 的 updateDisplayList 实现代码 override protected function updateDisplayList(unscaledWidth: Number, unscaledHeight:Number):void { var g:Graphics = this.graphics; g.clear(); g.beginFill(0x000000, 0); g.drawRect(0, 0, unscaledWidth, unscaledHeight); g.endFill(); g.lineStyle(1, 0x000000, 0.1); var squareSize:Number = 15; var numRows:Number = unscaledHeight / squareSize; var numCols:Number = unscaledWidth / squareSize; for(var row:Number = 0; row< numRows; row++) { P 8 / 9 Flex 自定义组件外观 g.moveTo(0, row * squareSize); g.lineTo(unscaledWidth, row * squareSize); } for(var col:Number = 0; col< numCols; col++) { g.moveTo(col * squareSize, 0); g.lineTo(col * squareSize, unscaledHeight); } } Powered by TCPDF (www.tcpdf.org) P 9 / 9
还剩8页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

meccc

贡献于2012-03-07

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf