注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

All the splendor in the world is not worth a good friend!! Hello my friend!!

网易考拉推荐
GACHA精选

创建并应用皮肤  

2010-05-12 22:55:43|  分类: Flex4 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

说明:我们应用Flex数据校验 ①作为源文件,创建一个Button的皮肤;

功能:实现鼠标经过按钮时按钮颜色变化,以及打击按钮其字体颜色变换。

步骤

1、 在项目的根目录下创建一个skin包,然后在包下创建一个皮肤文件.其名称为:ButtonSkin.mxml,编写代码如下:

 <?xml version="1.0" encoding="utf-8"?>

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

             xmlns:s="library://ns.adobe.com/flex/spark"

             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"

             minWidth="21" minHeight="21" alpha.disabled="0.5">

    <fx:Metadata>

        <![CDATA[

        [HostComponent("spark.components.Button")]

        ]]>

    </fx:Metadata>

   <!-定义一个状态变化时触发:按钮状态从up到over,宽度增加20px-->

    <s:transitions>

        <s:Transition fromState="up" toState="over">

            <s:Sequence target="{buttonColor}">

                <s:Resize widthBy="20" />

            </s:Sequence>

        </s:Transition>

    </s:transitions>

    <!-按钮的四个状态-->

    <s:states>

        <s:State name="up" />

        <s:State name="over" />

        <s:State name="down" />

        <s:State name="disabled" />

    </s:states>

    <!-设置按钮不同状态的不同颜色-->

    <s:Rect id="buttonColor" left="0"

            right="0" top="0" bottom="0">

        <s:fill.up>

            <s:SolidColor color="0x555555" />

        </s:fill.up>

        <s:fill.over>

            <s:SolidColor color="0xD9E028" />

        </s:fill.over>

        <s:fill.down>

            <s:SolidColor color="0xD9E028" />

        </s:fill.down>

    </s:Rect>

    <!-按钮字体颜色的设置-->

    <s:Label id="labelDisplay"

             textAlign="center"

             verticalAlign="middle"

               color="0xFFFFFF"

             color.over="0x000000"

             fontWeight="bold"

             horizontalCenter="0" verticalCenter="1"

             left="10" right="10" top="2" bottom="2">

    </s:Label>

</s:SparkSkin>

 

2、在Flex数据校验 ①所在的按钮控件中引用1步骤所定义的BottonSkin皮肤,即:

<s:Button label=" 提 交 " click="validateForm()" skinClass="skin.ButtonSkin"/>,这样我们就实现了创建并应用皮肤

 

相关类的说明:

①    Transition 类定义了一组在响应视图状态更改时播放的效果。视图状态的定义定义了如何更改状态,而过渡则定义了在状态更改过程中可视更改发生的顺序。 要定义过渡,可将应用程序的 transitions 属性设置为 Transition 对象的数组[所在包:mx.states]

②    Sequence 效果以子效果的添加顺序依次播放多个子效果[所在包:mx.effects]

③    Resize 效果在指定的时间间隔更改组件的宽度或高度,或同时更改这两者。A: 如果您仅指定 widthFrom、widthTo 和 widthBy 属性这三个值中的两个值,则 Flex 会计算第三个值。B:如果指定了所有这三个值,Flex 将忽略 widthBy 值。如果您仅指定 widthBy 或 widthTo 值,则会将 widthFrom 属性设置为对象的当前宽度。对于 heightFrom、heightTo 和 heightBy 属性值,同样如此。C:如果为调整大小触发器指定 Resize 效果,并且不设置六个 From、To 和 By 属性,Flex 会设置它们以完成从对象的原有大小到新大小的平稳过渡。[所在包:mx.effects]

④    Rect 类是绘制矩形的填充图形元素。矩形的角可以是圆角。drawElementent() 方法会调用 Graphics.drawRect() Graphics.drawRoundRect() 方法[所在包:spark.primitives]

⑤    SolidColor定义颜色的表示形式,包括颜色值和 alpha [所在包:mx.graphics]

 

2010-05-12

 

  评论这张
 
阅读(531)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017