Flex 4中Spark组件利用Skin Class外观设计(1)

Flex 4 默认为Spark主题,Spark组件的外观设计与之前相比也变得更简单高效。

Spark组件都不包含可视外观属性,所有这类信息都包含在外观文件SkinClass中。

SkinClass借助 FXG和状态语法完成组件的交互式设计,其使用MXML编写新的外观文件。

在组件中则通过skinClass属性来应用相关外观文件,如:<s:Button label="myButton" skinClass="myButtonSkin"/>。

 

以下是本人写的一个简单的ButtonSkinClass:

<?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"

alpha.disabled="0.7">

<s:states>

<s:State name="up"/>

<s:State name="over"/>

<s:State name="down"/>

<s:State name="disabled"/>

</s:states>

<s:filters>

<s:DropShadowFilter alpha="0.5" distance="1.2" quality="2" excludeFrom="down"/>

</s:filters>

<s:Rect id="myMain" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">

<s:fill>

<s:SolidColor color="0x5bc1e9" color.over="0xcfc851" color.down="0xb19600"/>

</s:fill>

<s:stroke>

<s:SolidColorStroke color="0x001fa4" weight="1"/>

</s:stroke>

</s:Rect>

<s:Rect id="myTop" radiusX="4" radiusY="4" top="1" right="1" left="1" height="50%">

<s:fill>

<s:LinearGradient rotation="90">

<s:GradientEntry color="0xFFFFFF" alpha="0.7"/>

<s:GradientEntry color="0xFFFFFF" alpha="0.2"/>

</s:LinearGradient>

</s:fill>

</s:Rect>

<s:Label text="myButton" verticalCenter="2" horizontalCenter="0"  textAlign="center" fontWeight="bold" color="0x131313" color.over="0x0150ad" color.down="0x0150ad"/>

</s:Skin>

 

效果如下图:

 

 

zhuan zi :http://flex4jiaocheng.com/blog/267

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值