zoukankan      html  css  js  c++  java
  • Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin(一)


    Flex SDK 4(Gumbo)新增加了一个包:spark.skins,这个包里面只有一个class:SparkSkin,而我们(非美工的程序员)通过这个class来实现任意自定义控件的样式。

    下图是SparkSkin的继承关系:


    通过上述关系可以得出如下的结论:
    1、SparkSkin是一个Group类型的容器。(它继承与Group)
    2、Base class for Spark skins.(是全部Spark Class的基础类,也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类)

    另外,请大家注意另外一个class:Skin,这个class是SparkSkin的父类,同时Skin继承与Group,那么Skin与SparkSkin的区别的什么呢?
    下图是Skin的继承关系:


    SparkSkin
    是全部Spark Class的基础类,也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。

    Skin
    SparkSkin的父类,例如ButtonBarSkin就是Skin的子类,如果想要自定义这部分组件的样式,则需要使用Skin。

    综上所述,也就是可以使用SparkSkin的地方,我们使用Skin一样可以达到同样的效果。

    先让我们看一下一个自定义Button后的效果:


    如果是在Flex SDK 3.X时代或者Flex SDK 2.X时代的时候,如果想要达到上述的效果,我们只能自己动手来“画”这个形状,或者寻求美工的帮助来实现这样的效果。
    Flex SDK 4(Gumbo)中,我们只需要将这个button的样式继承与SparkSkin或者Skin,然后在其中加入一些我想要的内容即可,请看以下的代码:

    <?xml version="1.0" encoding="utf-8"?>
    <s:SparkSkin 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fx="http://ns.adobe.com/mxml/2009">
    <s:states>
    <s:State name="up"/>
    <s:State name="over"/>
    <s:State name="down"/>
    <s:State name="disabled"/>
    </s:states>
    <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
    <s:Ellipse width="100%" height="100%">
    <s:fill>
    <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
    </s:fill>
    <s:stroke>
    <s:SolidColorStroke color="0x0c0d0d" />
    </s:stroke>
    </s:Ellipse>
    <s:RichText id="labelElement" 
    fontFamily="Myriad Pro" 
    fontSize="11" 
    color="0xBBBBBB" 
    textAlign="center" 
    horizontalCenter="0" 
    verticalCenter="1" 
    width="100%">
             </s:RichText>
    </s:SparkSkin>

    那么我们在什么地方将这个样式应用呢?我们可以用以下几个方式:
    1、
    Button { 
         skinClass: ClassReference("com.rianote.flex.skin.KButton");
    }
    2、<Button skinClass="com.rianote.flex.skin.KButton" />
    3、myButton.setStyle( "skinClass", Class( KButton ));

    其中skinClass也是Flex SDK 4(Gumbo)里面新增加的一个class,其作用就是设定当前这个组件的Skin

    让我们看一下主程序:
    <?xml version='1.0' encoding='UTF-8'?>
    <s:Application xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    height="254" width="576" 
    backgroundColor="#222222" >
    <fx:Script>
    <![CDATA[
    import com.rianote.flex.skin.Button;
    ]]>
    </fx:Script>
    <s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32" width="77" label="Button"/>
    </s:Application>

    由于本例描述的内容比较简单,我就不上传source了,下一节我将详细描述一下KButton里面描述的内容。:)

    转自:http://www.k-zone.cn/zblog/post/flash-builder-gumbo-customer-sparkskin.html#_ 

  • 相关阅读:
    Oracle 常用的十大 DDL 对象
    Oracle DML
    Oracle 的常用概念
    Spring 4 : 整合 SSH
    Spring3 (事务管理)
    Spring2
    Spring 学习笔记一
    Xpath helper下载
    爬取链家北京市二手房的单个房源页信息
    爬取链家北京市二手房的链家编号
  • 原文地址:https://www.cnblogs.com/fxair/p/1702906.html
Copyright © 2011-2022 走看看