- 浏览: 282249 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
xisuchi:
咋没人收藏阿
前端开发大众手册(包括工具、网址、经验等) -
past2010yeah:
太好了,解决了我纠结很久的问题!!!非常感谢!
解决Flex跨域"访问URL时遇到安全性错误" -
shlei:
xiao_kai 写道这样会不会牺牲性能啊~~会,但是这是暂时 ...
解决flex4 spark 找不到外观错误 -
xiao_kai:
这样会不会牺牲性能啊~~
解决flex4 spark 找不到外观错误 -
jcl860:
兄台:左边面板是图片,还是用mxml画出来的图形?
仿IBM-BPM Editor实现的WorkFlowEditor
Anyone missed the old simple method for skinning a simple button?
//mainButtonHitArea() : Is a generic function that generates the hit area
The problem im having is that, this method of creating a simple button with skin is being phased out : Infact it is no longer supported in flex 4.5 mobile projects.
So the question: Is there a simple way to perform this, with spark buttons (which is suppose to be the new way to go). As simple as possible.
Basically i only need a button with 2 images : down/over & up. And i want to keep the code as simple as possible : The new skinning methods, seems to really adds way too much lines for something that used to be as simple as the example above.
You can create a skin, i.e. (as MyButtonSkin.mxml):
Then you can assign that skin to some button:
Here's a basic image button that's more general:
ImageButtonSkin.mxml
ImageSkinnableButton.as
Then you can set the images as styles on the button in either CSS (preferred) or in mxml:
You can also define a ButtonImageSkin for the default spark.components.Button component, for example in the imageskins package:
Simply define a style on the skin class itself, and bind the source of the image to it. Now, you can control the actual images using CSS pseudo selectors:
<mx:Button x="10" y="10" label="" upSkin="@Embed('imgs/mainButton_std.png')" overSkin="@Embed('imgs/mainButton_over.png')" downSkin="@Embed('imgs/mainButton_over.png')" disabledSkin="@Embed('imgs/mainButton_std.png')" creationComplete="mainButtonHitArea()" width="75" height="75" id="menuButton" enabled="true"/>
//mainButtonHitArea() : Is a generic function that generates the hit area
The problem im having is that, this method of creating a simple button with skin is being phased out : Infact it is no longer supported in flex 4.5 mobile projects.
So the question: Is there a simple way to perform this, with spark buttons (which is suppose to be the new way to go). As simple as possible.
Basically i only need a button with 2 images : down/over & up. And i want to keep the code as simple as possible : The new skinning methods, seems to really adds way too much lines for something that used to be as simple as the example above.
You can create a skin, i.e. (as MyButtonSkin.mxml):
<?xml version="1.0" encoding="utf-8"?> <s:SparkSkin name="MyButtonSkin" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009"> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.Button")] ]]> </fx:Metadata> <s:BitmapImage source.disabled="@Embed('assets/image1.png')" source.down="@Embed('assets/image2.png')" source.up="@Embed('assets/image3.png')" source.over="@Embed('assets/image4.png')" /> </s:SparkSkin>
Then you can assign that skin to some button:
<s:Button skinClass="MyButtonSkin"/>
Here's a basic image button that's more general:
ImageButtonSkin.mxml
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009"> <fx:Metadata> [HostComponent("com.instantdelay.flex.commons.ImageSkinnableButton")] </fx:Metadata> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <s:BitmapImage id="image" source.up="{getStyle('upImage')}" source.down="{getStyle('downImage')}" source.over="{getStyle('overImage')}" source.disabled="{getStyle('disabledImage')}" /> </s:SparkButtonSkin>
ImageSkinnableButton.as
[Style(name="upImage", inherit="no", type="Class")] [Style(name="downImage", inherit="no", type="Class")] [Style(name="overImage", inherit="no", type="Class")] [Style(name="disabledImage", inherit="no", type="Class")] public class ImageSkinnableButton extends Button { public function ImageSkinnableButton() { super(); setStyle("skinClass", ImageButtonSkin); } }
Then you can set the images as styles on the button in either CSS (preferred) or in mxml:
<commons:ImageSkinnableButton upImage="@Embed('imgs/mainButton_std.png')" overImage="@Embed('imgs/mainButton_over.png')" downImage="@Embed('imgs/mainButton_over.png')" disabledImage="@Embed('imgs/mainButton_std.png')" />
You can also define a ButtonImageSkin for the default spark.components.Button component, for example in the imageskins package:
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009"> <fx:Metadata> [HostComponent("spark.components.Button")] </fx:Metadata> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <s:BitmapImage source="{getStyle('backgroundImage')}"/> </s:SparkButtonSkin>
Simply define a style on the skin class itself, and bind the source of the image to it. Now, you can control the actual images using CSS pseudo selectors:
@namespace imageskins "imageskins.*"; s|Button { skinClass: ClassReference("imageskins.ButtonImageSkin"); } imageskins|ButtonImageSkin:up { backgroundImage: Embed(source="assets/images/button-up.png"); } imageskins|ButtonImageSkin:down { backgroundImage: Embed(source="assets/images/button-down.png"); } imageskins|ButtonImageSkin:over { backgroundImage: Embed(source="assets/images/button-over.png"); } imageskins|ButtonImageSkin:disabled { backgroundImage: Embed(source="assets/images/button-disabled.png"); }From http://stackoverflow.com/questions/6477137/flex-4-5-simple-spark-button-skinning
发表评论
-
Flex4之皮肤定制【Skin类和Skin类】
2013-10-05 19:19 1102第一、关于spark.skin.SparkSkin类的 ... -
基于 Cairngorm MVC 框架的 Flex 程序设计与开发
2013-10-05 18:38 923翟 峰, 开发工程师, IBM 吴 镝, IBM 实习生, I ... -
swf复制到其他文件夹出现安全错误的解决办法
2012-08-16 10:06 1173相信用Flash Builder/Flex Builder做开 ... -
在flex中使用model标签读取配置文件的方法
2012-08-16 09:54 9481.使用 Model标签 <mx:Model id=& ... -
Flex利用渲染器动态修改tree的icon图标
2012-08-16 09:50 1737Tree: <mx:Tree dataProvide ... -
flex xml操作
2012-04-25 10:48 1111今天我们来看看AS3中新的XML处理方法:E4X,直到现在,E ... -
Flex 创建过滤特定文件的FileReference
2012-03-01 16:13 1607下面的代码演示了Flex中如何创建一个可以过滤特定后缀文件的F ... -
Flex 根据图片url获取bitmapdata并绑定到多个Image
2012-03-01 14:40 3010private function getImage(url ... -
Flex 开始日期与结束日期DateField组件
2012-03-01 13:45 1777<?xml version="1.0&qu ... -
匹配已选中数据的某字段和下拉框数据
2012-03-01 08:41 1266package YD.Web.Common.Utils ... -
解决flex4 spark 找不到外观错误
2012-02-27 14:01 1843spark组件为了提高性能adobe做了很多努力,同 ... -
Flex垃圾回收和性能优化的一些总结
2012-02-27 11:30 1178本文是Kenshin根据一些对 ... -
【转】关于Flex未来走向的问答
2011-11-22 09:50 1699•转自:http://www.riadev.com/flex- ... -
Flex 关于validateNow方法
2011-11-18 10:42 2244validateNow(); 官方解释:验证并更新此对 ... -
Flex 数值转IP
2011-11-18 10:19 875package common { public cl ... -
Flex 关于遍历
2011-11-18 10:15 995获取XML属性名、值 var x : XML = < ... -
Flash Builder编译的swf为什么在bin-debug下运行正常,复制到其他文件夹就不正常?
2011-11-08 16:54 1573相信用Flash Builder/Flex Bui ... -
Flex HttpService重用2
2011-09-28 13:30 1168HttpService工具类: package commo ... -
动态配置AMF与后台接口调用
2011-09-28 11:47 1459以下是一个AMF调用类: package common ... -
Unix时间戳转化AS3日期格式
2011-09-21 16:14 2242Unix时间戳:1254671828 返回:2009-10-1 ...
相关推荐
The Skinning Contract – Skinning Spark Components Creating Spark components and skins Spark Components/Skins lifecycle New Layout Engine Existing Spark layouts Creating custom Spark layout New ...
博文链接:https://duker.iteye.com/blog/185662
注:未标明[中]的全是英文版。 build_deploy_flex3.pdf ...skinning_extensions_flex3.pdf testing_with_QTP_flex3.pdf using_fb_flex3.pdf [中]flash_as3_components_help.pdf [中]flash_as3_components_help.pdf
GPUSkinning学习
收集了flex一些很有用的教程,包含以下文档 devguide_flex3.pdf flash_component_kit_flex3.pdf progAS_flex3.pdf skinning_extensions_flex3.pdf testing_with_QTP_flex3.pdf
* Change the application’s appearance with styling and skinning * Use Flex components to add charts and graphs "Alaric and Elijah do a great job of guiding a newbie Flex developer through the ...
对于论文Real-time Skeletal Skinning with Optimized Centers of Rotation和Efficient Dynamic Skinning with Low-Rank Helper Bone Controllers的报告,里面的视频内容下载链接:...
GPUSkinning.unitypackage
flex换肤技术,非常棒
cegui Falagard_Skinning_System,详细介绍looknfeel的设计及使用。
ECS提升GpuSkinning.zip
Skinning Windows XP By Joe Habraken Pages : 336 有问题,我的QQ:571669275
falagard skinning ssytem for CEGUI 参考手册翻译 . 里面讲的比较全。初学者使用比较好!
Button control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 CheckBox control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....
清晰非影印版,挺好的参考书。 A simple, clear, step-by-step tutorial to creating DotNetNuke skins to put you in control of the look and feel of your DotNetNuke website
Maya插件实现双四元数蒙皮的平滑蒙皮节点。 请访问该项目的主页以获取更多信息和下载。
MFC最全换肤工具,让你的MFC界面的美化变得简单,非常适合萌新们,轻轻轻轻松松就有漂亮的界面