Flex4 自定义通用的ImageButton
Flex4与之前版本的一个极大区别就是外观皮肤的分离,虽然进一步解耦,但存在一个不爽的地方就是增加了编码的工作量,你能想象为你的每个自定义组件都写一个对应的皮肤吗?可能仅仅和你之前写过的组件差了那么一点点而已,可是工作量double,更进一步使代码的管理复杂化。
下面是我自己写的一个通用的自定义ImageButton,有呆毛(Demo)才有真相:
1.首先创建一个Skinnable组件,继承自Button(一个很大的好处就是支持defaultButton,普通的组件是不支持的,这是促成我写这个组件的原始动力),类名就定义为ImageButton:
package cn.shawnlee.components
{
import spark.components.Button;
public class ImageButton extends Button
{
public function ImageButton()
{
super();
}
}
}
2.好了,组件已经建立了,然后先建立一个皮肤,再来考虑逻辑,新建MXML外观,定义为ImageButtonSkin,主机组件定位到刚才建立的ImageButton:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"> <!-- host component -->
<fx:Metadata>
[HostComponent("cn.shawnlee.components.ImageButton")]
</fx:Metadata> <!-- states -->
<s:states>
<s:State name="disabled" />
<s:State name="down" />
<s:State name="over" />
<s:State name="up" />
</s:states> <!-- SkinParts
name=iconDisplay, type=spark.primitives.BitmapImage, required=false
name=labelDisplay, type=spark.core.IDisplayText, required=false
--> </s:Skin>
3.现在来考虑显示逻辑,我们仅仅需要用图片来代替按钮的默认外观,但考虑到按钮的四种状态,我需要用四个BitmapImage来分别装载四个图片,用来在不同状态下显示,因此,在外观中直接加入
<s:BitmapImage id="imageDisabledDisplay" includeIn="disabled" />
<s:BitmapImage id="imageDownDisplay" includeIn="down" />
<s:BitmapImage id="imageOverDisplay" includeIn="over" />
<s:BitmapImage id="imageUpDisplay" includeIn="up" />
4.由此外观皮肤已经做好了,对,就这么简单,下面只需要在显示逻辑上做文章就可以了,来看看ImageButton类,我们需要把外观中加入的四个BitmapImage在类中进行定义声明,以便可以在代码中进行调用和控制:
[SkinPart(require="false")]
public var imageDisabledDisplay:BitmapImage; [SkinPart(require="false")]
public var imageDownDisplay:BitmapImage; [SkinPart(require="false")]
public var imageOverDisplay:BitmapImage; [SkinPart(require="false")]
public var imageUpDisplay:BitmapImage;
5.接下来考虑显示逻辑,我希望我的组件能够很方便的这么使用:
<cn:ImageButton image="@Embed('./btn.png')" imageDown="@Embed('./btnDown.png')" imageOver="@Embed('./btnOver.png')" />
如果我比较懒,我只是需要一张图片,那么就只定义image,如果我还想详细的定义up,down,over,disabled状态下的图片,则通过imageUp,imageDown,imageOver,imageDisabled来定义,所以我的组件需要自定义五个Style样式:
[Style(name="image", type="Class", format="EmbeddedFile", inherit="no")]
[Style(name="imageDisabled", type="Class", format="EmbeddedFile", inherit="no")]
[Style(name="imageDown", type="Class", format="EmbeddedFile", inherit="no")]
[Style(name="imageOver", type="Class", format="EmbeddedFile", inherit="no")]
[Style(name="imageUp", type="Class", format="EmbeddedFile", inherit="no")]
public class ImageButton extends Button
6.好了,image样式表示默认的图片,如果没有设置对应状态下的图片,则以image样式的图片显示,为此,我需要自定义一个私有方法,来返回各个状态下应该显示出的图片:
private function getImageStyle(styleProp:String):*
{
var value:* = getStyle(styleProp);
return value==null?getStyle("image"):value;
}
7.然后就是自定义组件不可缺少的一步,重写partAdded方法:
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if(instance == imageDisabledDisplay)
{
imageDisabledDisplay.source = getImageStyle("imageDisabled");
}
if(instance == imageDownDisplay)
{
imageDownDisplay.source = getImageStyle("imageDown");
}
if(instance == imageOverDisplay)
{
imageOverDisplay.source = getImageStyle("imageOver");
}
if(instance == imageUpDisplay)
{
imageUpDisplay.source = getImageStyle("imageUp");
}
}
上面的过程使ImageButton在添加各个BitmapImage子组件时根据对应的Style样式设置各自的图片source属性,至此,组件完成,是不是很简单?
【源代码下载】
Flex4 自定义通用的ImageButton的更多相关文章
- 自定义通用dialogFragment
代码地址如下:http://www.demodashi.com/demo/12844.html 前言 之前写过一篇dialogFragmnet封装默认dialog的文章 DialogFragment创 ...
- 百度小程序自定义通用toast组件
百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...
- SpringCloud微服务实战——搭建企业级开发框架(七):自定义通用响应消息及统一异常处理
平时开发过程中,无可避免我们需要处理各类异常,所以这里我们在公共模块中自定义统一异常,Spring Boot 提供 @RestControllerAdvice 注解统一异常处理,我们在GitEgg ...
- 2.Android 自定义通用的Item布局
转载:http://www.jianshu.com/p/e7ba4884dcdd BaseItemLayout 简介 在工作中经常会遇到下面的一些布局,如图标红处: 05.png 07.png 08. ...
- Android 自定义通用的loadingview
介绍 好久没有写博客啦,最近在接近新年了,年前的工作都要收尾,所以特别忙,周末抽空写了个通用的加载view,写篇博客分享出来. 功能 1.显示加载视图,加载失败的时候显示加载失败视图,数据为空时显示数 ...
- WPF报表自定义通用可筛选列头-WPF特工队内部资料
由于项目需要制作一个可通用的报表多行标题,且可实现各种类型的内容显示,包括文本.输入框.下拉框.多选框等(自定的显示内容可自行扩展),并支持参数绑定转换,效果如下: 源码结构 ColumnItem类: ...
- Flex4 自定义分页组件
自己写的Flex4分页组件,去伪存真,只实现基本的分页功能,数据过滤神马的都不应该是分页组件干的活,有呆毛才有真相: [源代码下载] Flex自从转手给Apache后人气急跌,本人也很捉鸡,尽管Apa ...
- 自定义通用Distinct去除重复数据的2中方式
由于Lambda Distinct方法默认是按照集合里面的值比较的,所以当集合里面存放的是类的时候,我们一般是按照实体中的某一属性值比较,其实是用默认的Distinct也可以的,自己先定义一个实现了接 ...
- C# WinForm自定义通用分页控件
大家好,前几天因工作需要要开发一个基于WinForm的小程序.其中要用到分页,最开始的想法找个第三方的dll用一下,但是后来想了想觉得不如自己写一个玩一下 之前的web开发中有各式各样的列表组件基本都 ...
随机推荐
- 战胜忧虑<5>——运用亚里士多德法则
运用亚里士多德法则 如果人们将忧虑的时间,用来寻找解决问题的答案,那忧虑就会在人们智慧的光芒下消失.那么当你面对忧虑时,应该怎么办理?答案是,我们一定要学会用下面三种分析问题的基本步骤来解决各种不同的 ...
- datagridview 不显示行号的问题
环境:C#,Winform 场景: 窗体上有两个tab页A.B,每个tab页上都有一个DatagridView.窗体加载后,显示tab A选项卡.序号正常显示,但点击B选项卡后,DatagridVie ...
- powerdesigner12.5 设置表字符集和存储引擎
powerdesigner12.5在做建模的时候发现没有找到哪儿设置表的字符集和存储引擎.于是研究了一番. 在菜单上方选择 Database => Edit Current DBMS 然后选 ...
- Env:ctags和Taglist安装与配置
注:文章参照http://blog.csdn.net/vaqeteart/article/details/4146618 想必用过Source Insight的人都记得这样一个功能: SI能够把当前文 ...
- 一. Logback与p6spy
一. LogBack配置 配置pom.xml <dependency> <groupId>org.slf4j</groupId> <artifactId> ...
- IGS_学习笔记05_IREP开发Concurrent Program为客户化集合接口(案例)
20150819 Created By BaoXinjian
- HDU 2897 邂逅明下(巴什博奕)
题意: 每行有三个数字n,p,q,表示一堆硬币一共有n枚,从这个硬币堆里取硬币,一次最少取p枚,最多q枚,如果剩下少于p枚就要一次取完.两人轮流取,直到堆里的硬币取完,最后一次取硬币的算输.对于每一行 ...
- php pcntl 多进程学习
1.捕获子进程退出(监听SIGCHLD信号,然后调用 pcntl_wait 函数) declare(ticks=1); pcntl_signal(SIGCHLD, "sig_handler& ...
- Mac下安装JDK 6
https://support.apple.com/kb/DL1572?viewlocale=zh_CN&locale=en_US 下载 , 安装
- SQL Server查询死锁并KILL
杀掉死锁的sqlserver进程 SELECT request_session_id spid,OBJECT_NAME (resource_associated_entity_id)tableNa ...