Chinaunix首页 | 论坛 | 博客

沉舟sinkingboat.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

sinkingboat

  • 博客访问： 3333075
  • 博文数量： 530
  • 博客积分： 13360
  • 博客等级： 上将
  • 技术积分： 5473
  • 用 户 组： 普通用户
  • 注册时间： 2006-07-13 13:32
文章分类

全部博文（530）

文章存档

2017年（1）

2015年（2）

2013年（24）

2012年（20）

2011年（97）

2010年（240）

2009年（117）

2008年（12）

2007年（8）

2006年（9）

我的朋友
最近访客
推荐博文
相关博文
Flex4皮肤学习_Skinning Spark containers

分类： Web开发

2012-06-27 21:46:42

1.概述
spark定义了两种类型的容器
    Skinnable 容器
    Non-Skinnable容器
两种类型容器都属于spark.components.*包。绝大多数容器都是skinnable的。
具体参见《简化的Flex4结构图》。

设置container skins大小
有两种方法设置容器的大小
    约束值(top=0, bottom=0, left=0, right=0)
    百分比大小(height=100%, width=100%)
通常，skin会在host component调整大小之后重新调整大小。skin会默认设置left和right属性。为了指定默认大小，也可以设置width属性。

      spark的group是不带皮肤的容器，他们提供了轻量级的布局例子。为了修改spart group可视效果，你可以使用带皮肤的SkinnableContainer。所有的MX容器都是带皮肤的。

      容器的皮肤与其它组件皮肤一样，它们定义了一个Group用于放置子组件。这个元素的ID是contentGroup，所有的皮肤容器都有一个content group。所有的子容器放置在这个content group中，并使用布局规则显示。

2.调整spark容器皮肤的大小
      定义spark容器的皮肤的主要通过添加一个图形元素来完成，比如用一个矩形定义容器的背景色。你可以通过使用限定的属性或百分比值来设置其大小。设置方法如下
  • 限制属性(top=0, bottom=0, left=0, right=0)
  • 百分比值(height=100%, width=100%)
      当组件第一次渲染，限定属性优先起作用。但是，如果你设置了限定属性的值，接着在运行时设置了百分比值，比如percentHeight=100，FLEX执行新的设置。
      通常，host component改变大小时，skin重新调整大小。到底是采用百分比，还是限定属性信赖于重新调整的场景。比如，如果你想一个label总是在skin中的宽度为其一半，可以设置width=50%。如果你想设置一个label总是间隔5像素，可以设置left和right属性为5。
      在默认的spark皮肤中，可调整大小的skin元素总是设置left和right属性。为了描述其默认大小，它们也设置width属性，这样的话，如果组件的大小没有在application中设置，元素的width将采用skin中的默认大小。
      下面的ButtonSkin.mxml，显示了Button控件的默认大小为skin中的默认大小。width=69，height=20：

点击(此处)折叠或打开

  1. <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
  2.     <s:stroke>
  3.         <s:LinearGradientStroke rotation="90" weight="1">
  4.             <s:GradientEntry color="0x000000" alpha="0.5625" alpha.down="0.6375" />
  5.             <s:GradientEntry color="0x000000" alpha="0.75" alpha.down="0.85" />
  6.         </s:LinearGradientStroke>
  7.     </s:stroke>
  8. </s:Rect>

3.给spark container添加边框
      自定义 Spark skin的通常用法是给container加边框，可以定义阴影、边的样式、角的弧度和其它属性。
      为了给container添加一个矩形边框skin，需要添加一个Rect对象，并设置height和widht为100%，或者设置限制属性都为0。

下面是一个为container添加一个1point黑线边框的例子
点击(此处)折叠或打开
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- SparkSkinning/SimpleContainerBorderExample.mxml -->
  3. <s:Application
  4.     xmlns:fx=""
  5.     xmlns:mx="library://ns.adobe.com/flex/mx"
  6.     xmlns:s="library://ns.adobe.com/flex/spark">

  8.     <s:SkinnableContainer id="myContainer" height="200" width="200" skinClass="mySkins.ContainerBorderSkin">
  9.         <s:Button label="Click Me"/>
  10.         <s:Button label="Click you"/>
  11.         <s:Button label="Click us"/>
  12.     </s:SkinnableContainer>

  14. </s:Application>
其皮肤代码如下
点击(此处)折叠或打开
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- SparkSkinning/mySkins/ContainerBorderSkin.mxml -->
  3. <s:Skin
  4.     xmlns:fx=""
  5.     xmlns:mx="library://ns.adobe.com/flex/mx"
  6.     xmlns:s="library://ns.adobe.com/flex/spark"
  7.     alpha.disabled="0.5">

  9.     <fx:Metadata>
  10.         [HostComponent("spark.components.SkinnableContainer")]
  11.     </fx:Metadata>
  12.     
  13.     <s:states>
  14.         <s:State name="normal" />
  15.         <s:State name="disabled" />
  16.     </s:states>
  17.     
  18.    
  19.     <s:Group id="contentGroup" left="4" right="4" top="4" bottom="4">
  20.         <s:layout>
  21.             <s:VerticalLayout/>
  22.         </s:layout>
  23.     </s:Group>
  24.    
  1.     <s:Rect left="0" right="0" top="0" bottom="0">
  2.         <s:stroke>
  3.             <s:SolidColorStroke color="0x000000" weight="1"/>
  4.         </s:stroke>
  5.     </s:Rect>

  7. </s:Skin>
      contentGroup的left, right, top和bottom 的值为1。这样可以显示container容器中组件的外边框。s:Rect left="0" right="0" top="0" bottom="0"表示用于设置container边框。

效果如下


为了创建圆角边，可以设置Rect对象的radiusX和radiusY。下面给出了一个例子

点击(此处)折叠或打开

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- SparkSkinning/RoundedContainerBorderExample.mxml -->
  3. <s:Application
  4.     xmlns:fx=""
  5.     xmlns:mx="library://ns.adobe.com/flex/mx"
  6.     xmlns:s="library://ns.adobe.com/flex/spark">

  8.     <s:SkinnableContainer id="myContainer"
  9.         height="200" width="200"
  10.         skinClass="mySkins.ContainerRoundedBorderSkin">
  11.         <s:Button label="Click Me"/>
  12.     </s:SkinnableContainer>

  14. </s:Application>
皮肤例子如下

点击(此处)折叠或打开

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- SparkSkinning/mySkins/ContainerRoundedBorderSkin.mxml -->
  3. <s:Skin
  4.     xmlns:fx=""
  5.     xmlns:mx="library://ns.adobe.com/flex/mx"
  6.     xmlns:s="library://ns.adobe.com/flex/spark"
  7.     alpha.disabled="0.5">

  9.     <fx:Metadata>
  10.         [HostComponent("spark.components.SkinnableContainer")]
  11.     </fx:Metadata>
  12.     
  13.     <s:states>
  14.         <s:State name="normal" />
  15.         <s:State name="disabled" />
  16.     </s:states>
  17.     
  18.     <s:Group id="contentGroup" left="10" right="10" top="10" bottom="10">
  19.         <s:layout>
  20.             <s:VerticalLayout/>
  21.         </s:layout>
  22.     </s:Group>

  24.     <s:Rect left="0" right="0" top="0" bottom="0" radiusX="10" radiusY="10">
  25.         <s:stroke>
  26.             <s:SolidColorStroke color="0x000000" weight="1"/>
  27.         </s:stroke>
  28.     </s:Rect>

  30. </s:Skin>
效果如下



      你可以使用BorderContainer添加一个边框。BorderContainer是SkinnableContainer的一个子类。可以使用CSS样式和类的属性控制BorderContainer类的外观，而不用创建一个自定义皮肤。

      下面给了一个BorderContainer ，使用了cornerRadius, borderColor, borderVisible, 和borderAlpha样式。

点击(此处)折叠或打开

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- SparkSkinning/BorderContainerExample.mxml -->
  3. <s:Application xmlns:fx=""
  4.                xmlns:s="library://ns.adobe.com/flex/spark"
  5.                xmlns:mx="library://ns.adobe.com/flex/mx">
  6.     
  7.     <s:BorderContainer width="200" height="200"
  8.         borderColor="0x000000"
  9.         borderAlpha="1"
  10.         cornerRadius="10"
  11.         borderWeight="1">
  12.         <s:layout>
  13.             <s:HorizontalLayout
  14.                 paddingLeft="15" paddingRight="15"
  15.                 paddingTop="15" paddingBottom="15"/>
  16.         </s:layout>

  18.         <s:Button label="Click Me"/>
  19.     </s:BorderContainer>
  20. </s:Application>
通过CSS也可以定义所有BorderContainer 对象的样式，例子如下

点击(此处)折叠或打开

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- SparkSkinning/BorderContainerStyleExample.mxml -->
  3. <s:Application xmlns:fx=""
  4.                xmlns:s="library://ns.adobe.com/flex/spark"
  5.                xmlns:mx="library://ns.adobe.com/flex/mx">
  6.     
  7.     <fx:Style>
  8.         @namespace s "library://ns.adobe.com/flex/spark";
  9.         
  10.         s|BorderContainer {
  11.             borderColor:#000000;
  12.             borderAlpha:1;
  13.             cornerRadius:10;
  14.             borderWeight:1;
  15.         }
  16.     </fx:Style>

  18.     <s:BorderContainer width="200" height="200">
  19.         <s:layout>
  20.             <s:HorizontalLayout
  21.                 paddingLeft="15" paddingRight="15"
  22.                 paddingTop="15" paddingBottom="15"/>
  23.         </s:layout>
  24.         <s:Button label="Click Me"/>
  25.     </s:BorderContainer>
  26.     
  27. </s:Application>

我们也可以使用组合的方式代替皮肤，但皮肤可以将显示组件与内容组件更好的分离。

点击(此处)折叠或打开

  1. <?xml version="1.0"?>
  2. <!-- SparkSkinning/SimpleBorderExampleNoSkin.mxml -->
  3. <s:Application
  4.     xmlns:fx=""
  5.     xmlns:mx="library://ns.adobe.com/flex/mx"
  6.     xmlns:s="library://ns.adobe.com/flex/spark">
  7.     
  8.     <s:Group>
  9.         <!-- border/background graphics -->
  10.         <s:Rect width="100%" height="100%">
  11.                <s:stroke>
  12.                    <s:SolidColorStroke color="0x000000" weight="2"/>
  13.                </s:stroke>
  14.         </s:Rect>

  16.         <!-- content of container -->
  17.         <s:VGroup left="10" top="10" right="10" bottom="10">
  18.             <s:Button label="Click Me"/>
  19.             <s:Button label="Click Me"/>
  20.         </s:VGroup>
  21.     </s:Group>
  22.  
  23. </s:Application>

向容器中添加滚动条

点击(此处)折叠或打开

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- SparkSkinning/mySkins/ScrollBarContainerSkin.mxml -->
  3. <s:Skin
  4.     xmlns:fx=""
  5.     xmlns:mx="library://ns.adobe.com/flex/mx"
  6.     xmlns:s="library://ns.adobe.com/flex/spark"
  7.     alpha.disabled="0.5">

  9.     <fx:Metadata>
  10.         [HostComponent("spark.components.SkinnableContainer")]
  11.     </fx:Metadata>
  12.     
  13.     <s:states>
  14.         <s:State name="normal"/>
  15.         <s:State name="disabled"/>
  16.     </s:states>

  18.     <s:Scroller height="100%" width="100%">
  19.         <s:Group id="contentGroup">
  20.             <s:layout>
  21.                 <s:BasicLayout/>
  22.             </s:layout>
  23.         </s:Group>
  24.     </s:Scroller>
  25. </s:Skin>
应用程序代码

  1.     <s:SkinnableContainer id="myContainer"
  2.             height="50%" width="50%"
  3.             skinClass="mySkins.ScrollBarContainerSkin">
  4.             <s:Image source="@Embed(source='../assets/myImage.jpg')"/>
  5.     </s:SkinnableContainer>

为容器添加一个背景颜色

点击(此处)折叠或打开

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- SparkSkinning/mySkins/LinearBackgroundFillSkin.mxml -->
  3. <s:Skin
  4.     xmlns:fx=""
  5.     xmlns:mx="library://ns.adobe.com/flex/mx"
  6.     xmlns:s="library://ns.adobe.com/flex/spark"
  7.     alpha.disabled="0.5">

  9.     <fx:Metadata>
  10.         [HostComponent("spark.components.SkinnableContainer")]
  11.     </fx:Metadata>
  12.     
  13.     <s:states>
  14.         <s:State name="normal" />
  15.         <s:State name="disabled" />
  16.     </s:states>

  18.     <!-- layer 1: border -->
  19.     <s:Rect left="0" right="0" top="0" bottom="0">
  20.         <s:stroke>
  21.             <mx:SolidColorStroke color="0" alpha="0.50" weight="1"/>
  22.         </s:stroke>
  23.     </s:Rect>

  25.     <!-- 填充背景颜色 -->
  26.     <s:Rect id="background" left="1" top="1" right="1" bottom="1">
  27.         <s:fill>
  28.             <s:LinearGradient>
  29.                 <s:entries>
  30.                     <s:GradientEntry color="0xFFAABB" ratio="0" alpha="1"/>
  31.                     <s:GradientEntry color="0xFFCCDD" ratio=".33" alpha="1"/>
  32.                     <s:GradientEntry color="0xFFFFFF" ratio=".66" alpha="1"/>
  33.                 </s:entries>
  34.             </s:LinearGradient>
  35.         </s:fill>
  36.     </s:Rect>
  37.     
  38.     <s:Group id="contentGroup" left="10" right="10" top="10" bottom="10">
  39.         <s:layout>
  40.             <s:VerticalLayout/>
  41.         </s:layout>
  42.     </s:Group>
  43. </s:Skin>
效果图



为容器添加背景图片
部分代码如下

点击(此处)折叠或打开

  1. <!-- background fill -->
  2.     <s:Rect id="background" left="3" top="3" right="3" bottom="3" alpha=".25">
  3.         <s:fill>
  4.             <s:BitmapFill source="@Embed(source='../../assets/myImage.jpg')"/>
  5.         </s:fill>
  6.     </s:Rect>



参考文献
1.Skinning Spark containers.


阅读(5558) | 评论(0) | 转发(1) |
0

上一篇：简化的Flex4结构图

下一篇：mx.managers.CursorManager源码解析

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6