问题:TitleWindow的关闭按钮不好看,能否自己定制?
方法:利用Flex的皮肤机制。
环境:Flex SDK 4.6
针对Flex中TitleWindow的关闭按钮修改问题,在前面的博文中sxy给出了一种解决方案,其主要思路是在TitleWindow上加一个关闭图标按钮,使其压盖原有的关闭按钮。这种方法可行但存在以下两个问题:
- 新加的关闭按钮图标只能叠加在原有的关闭按钮上面,不能随便移动其位置。
- 不能作为Flex界面定制的通用解决方案。
Flex组件的外观都是基于皮肤机制,而皮肤可以随意定制,换句话说Flex组件的外观你是可以随便修改的。这里我们以修改TitleWindow的关闭按钮为例,探讨下Flex的皮肤机制。
TitleWindow的皮肤机制
我们在Adobe Flash Builder中查看TitleWindow的源代码(spark.components.TitleWindow),发现其继承自Panel,而Panel最终继承自皮肤组件类SkinnableComponent,即该类可以应用皮肤,其默认皮肤为TitleWindowSkin(spark.skins.TitleWindowSkin)。
TitleWindowSkin类控制着TitleWindow的表现形式,其中名为closeButton的Button即为关闭按钮。其属性width=”15” height=”15” right=”7” top=”7”表示关闭按钮高宽都是15,距离右侧7,距离顶部7,和我们看到关闭按钮位于TitleWindow的左上角一致,修改这些属性可以调整关闭按钮的位置,而skinClass属性控制着SkinClass的外观,默认皮肤TitleWindowCloseButtonSkin。
查看TitleWindowCloseButtonSkin源码,我们发现其样式为X形状,而且up, over, down, disabled四种状态下颜色的apha值各不相同。正是基于这种机制来实现当鼠标移动到关闭按钮、点击关闭按钮时关闭按钮的不同变化。
定制关闭按钮.
基于Flex的皮肤机制,我们来定制一个TitleWindow,主要是定制关闭按钮closeButton。
首先新建一个组件MyTitleWindow(文件->新建->MXML组件),该组件继承自TitleWindow。建立好后设置其skinClass属性,指向自己定义的皮肤类MyTitleWindowSkin。
然后新建一个类MyTitleWindowSkin类(文件->新建->MXML外观),其中主机组件选择TitleWindow,创建以下项的副本会自动填写为TitleWindowSkin。
建立好MyTitleWindowSkin类后,你会发现其代码和TitleWindowSkin的代码完全一样。这里我们仅仅修改closeButon,设置其skinClass属性为MyTitleWindowCloseButtonSkin。当然你如果想调整关闭按钮的位置,你可以修改其right,top等属性。
最后我们来定制关闭按钮的外观,新建MyTitleWindowCloseButtonSkin(文件->新建->MXML外观),主机组件选择Button,创建以下项的副本选择TitleWindowCloseButtonSkin。
新建好MyTitleWindowCloseButtonSkin后,基本删除继承来的所有代码,然后用一个关闭图标去替换原来的X样式,并设置鼠标移动上去和鼠标点击状态下图标不同的alpha值。
关闭图标为:
到此为止,我们就完成了关闭按钮的定制工作。最后将MyTitleWindow组件加到应用程序中,呈现出效果。
最终效果图:此效果图,除了关闭按钮外,在MyTitleWindowSkin中对其他样式也进行了些定制。
小结
通过Flex的皮肤机制,我们可以完全自由地掌控组件的外观,方便地设计出统一风格、美观的Flex组件。
实际应用中如果仅仅修改TitleWindow等组件的一些属性,是不用这么复杂的,毕竟这些组件本身提供了一些修改其样式的方法。
然而如果需要定制完全个性化的组件,上文的方法比较可取。设计好几组皮肤,以后就可以根据需要选择使用。
分享到:
相关推荐
Flex-TitleWindow的弹出窗口中播放一段影像.zip Flex-TitleWindow的弹出窗口中播放一段影像.zip Flex-TitleWindow的弹出窗口中播放一段影像.zip
重写titlewindow,带最小化、最大化、关闭按钮,方便前端使用
flex4.6 可以拉伸的TitleWindow。自由缩放。
flex监听浏览器关闭事件,完成对于浏览器关闭事件的监听。以及弹出相应的关闭提示
主要介绍了Flex中TitleWindow传值思路及实现,需要的朋友可以参考下
flex中为titlewindow添加更多按钮,使其显示在标题栏右方
flex TitleWindow自定义最大最小化
Flex TitleWindow父子页面的事件派发
Flex自定义组件,带最大化、最小化、还原及关闭按钮。
Flex带最大化最小化按钮可拖动调整窗口大小的TitleWindow
flex TitleWindow 放大、缩小、可缩放 弹出窗口 直接把mytest项目导入flexBuilder可直接运行mytest.mxml看效果。
flex主页面与弹出窗口之间数据传输的示例
这是一个flex4的项目,可以下载下来单独运行,项目中是一个自定义的TitleWindow,TitleWindow中存放了一个dataGrid,它可以根据dataGrid中数据行增加而改变自身高度,直至要最大高度。此组件使用mxml定义,重写了...
NULL 博文链接:https://sunshineyao.iteye.com/blog/827432
NULL 博文链接:https://176170847.iteye.com/blog/774691
Flex特效_可拖动弹出窗口布局容器TitleWindow.zip )
在Flex里,一般的弹出窗口(除了Alert以外)都可以用TitleWindow组件完成,主窗口和TitleWindow的数据传输可以用以下方法
可以自由改变大小的TitleWindow 的学习项目
可最大化、最小化和关闭的TitleWindow.这对于一直使用Flexlib 组件而又困扰其MDI需要依赖于其固定的Canvas的同学来说,这个titleWindow是个不错的选择。