Skin是Flex 4.0的产品,旨在让开发者通过Skin表现组件的外观,进而实现皮肤外表与业务数据的分离。为组件定义一个Skin非常容易,如下示例即是一段简单的Skin代码。
<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">
<!-- host component -->
<fx:Metadata>
[HostComponent("com.ajg.Components.BaseContainer")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="normal"/>
<s:State name="open"/>
<s:State name="closed"/>
<s:State name="disabled"/>
</s:states>
</s:Skin>
Skin通过元数据的HostComponent以及样式的skinClass,与组件绑定,便实现了组件的皮肤功能。但是一个静态的皮肤固然是索然无味的,开发者经常需要通过与组件建立关系,这个关系便是皮肤契约。
Flex 4.0提供的皮肤契约主要包括3个要素:Data、Part和State,皮肤与组件之间便是通过这3个要素进行交互。
1、Data
在组件中定义可与皮肤交互的Data,无外乎使用[Bindable]关键字,这样便可以通过Skin的hostComponent获取该Data,如下代码非常明了:
//组件
private var _title:String;
[Bindable]
public function get title():String
{
return this._title;
}
//皮肤
<s:Label id="widgetLabel" text="{hostComponent.title}"/>
2、Part
Part其实简单理解,就是组成组件的分组件,如scrollbar,它有四个皮肤parts:即增加按钮,减少按钮,轨迹带和滚动条。如下代码表示,组件必须由一个Image组成,它通过[SkinPart]关键字标识。
//组件
[SkinPart(required="true")]
public var icon:Image;
//皮肤
<mx:Image id="icon"/>
通过Part不仅可以推送组件数据到皮肤中,组件也可以用它们来注册行为。定义了这些Part之后,由组件负责功能逻辑的实现,而皮肤则只负责所有可视化的内容及布局。如icon的外观表现通过Skin表示,而icon的事件监听则由组件负责。
3、State
既然事件监听可以由组件负责,当点击一个关闭按钮的时候,那该如何响应呢?我们知道:State都是定义在Skin中的,当点击关闭按钮的时候,应该响应Skin的关闭State,那么组件如何获得皮肤中的关闭State呢?这是一个问题,问题的解决方式就是通过State要素。
通常我们在组件中通过[SkinState]关键字标识皮肤中的State,如下代码。它刚好和Skin中的State对应,以表示该组件要实现Skin中的如下两种State。
//组件
[SkinState("open")]
[SkinState("closed")]
关联了Skin中State之后,便可使用invalidateSkinState()和getCurrentSkinState()两个方法了。前者用于通知皮肤组件的State需要改变,这样便会调用重写的getCurrentSkinState()方法让皮肤响应该种State,进而实现了State的改变。
多数开发者在重写getCurrentSkinState()方法的时候,会创建一个状态属性,通过判断这个状态属性,设置相应的State。笔者经历了诸多项目,虽各种方法皆有,但原理大部分都是基于此方法。
如上原理虽然简单,但是却非常实用,希望能够有助于工作和学习。每天保持一份好心情,这是所有快乐工作与生活的源泉。
分享到:
相关推荐
在Flex 4中,皮肤(Skin)是一种强大的机制,用于改变和定制UI组件的外观和交互体验。本文将深入探讨FLEX4中的皮肤系统,特别是SparkSkin类,并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍: ...
在Flex开发中,皮肤(Skin)是用户界面组件的重要组成部分,它定义了组件的外观和交互样式。实时加载Skin是一种优化用户体验和提高应用灵活性的技术。本文将深入探讨Flex实时加载Skin的概念、方法以及相关的技巧。 ...
Flex主题(Skin)是Adobe Flex框架中的一个重要概念,它关乎应用程序的外观和用户体验。在Flex中,皮肤定义了UI组件的视觉样式,包括颜色、字体、边框、阴影、动画等元素。通过更换不同的皮肤,开发者可以快速改变...
6. **外观(Skin)和外观状态(Skin States)**:在Flex中,组件的外观可以改变,这些变化可以通过外观状态控制。在不同的外观状态下,组件可以显示不同的参数或数据。 7. **服务调用结果**:如果你使用了远程服务...
- Flex组件有多种状态,如`normal`, `disabled`, `hovered`等。在皮肤中,为每个状态定义不同的图形元素或属性,可以使组件在不同状态下呈现不同的外观。 - 使用`<s:states>`标签来声明和定义组件的状态。 5. **...
这个"dh.rar_flex cool me_flex menu skin_flex 导航_flex4 menu_flex4 menu"的压缩包文件,显然是与Flex4相关的资源,特别是关于创建酷炫的菜单导航和皮肤设计。 在Flex4中,菜单(Menu)是一种常见的用户界面元素...
1. **定义CSS样式**:创建一个CSS文件,包含针对Flex组件的样式规则。例如,你可以定义组件的背景颜色、边框、字体等属性。 ```css .mySkin { background-color: #FFFFFF; border-color: #000000; font-family: ...
Flex组件大致可以分为两类:基本组件和高级组件。 - **基本组件**:如`Label`, `Button`, `TextBox`等,这些组件是构建用户界面的基础。 - **高级组件**:例如`DataGrid`, `Tree`, `Chart`等,这些组件更加复杂,...
1. **图层管理**:Flex Skin插件利用Photoshop的图层系统,使每个UI组件如按钮、文本框、滑块等都有对应的图层。这有助于保持设计的组织性和可编辑性。 2. **皮肤模板**:预设了一些常见的Flex UI组件模板,如按钮...
在这个问题中,我们聚焦于`Flex`中的按钮(Button)组件以及它如何影响`ComboBox`和`ColorPicker`的显示,特别是当为按钮设置皮肤(skin)时。 标题"Flex Button 设置skin后,影响combobox和ColorPicker的显示"指出...
在Flex中,皮肤通常以ActionScript类的形式存在,这些类扩展了Flex框架提供的BaseSkin或Skin类,并覆盖了特定组件的绘制方法,如drawBackground()和drawBorder()。开发者可以通过修改这些类来调整皮肤的细节,比如...
在Flex应用中,皮肤(Skin)是一种可替换的外观组件,允许开发者根据需求定制UI元素的外观。皮肤可以包括按钮、滑块、进度条等各种UI组件的外观。通过更换皮肤,开发者可以轻松地改变应用程序的整体风格,使得应用更...
以压缩包中的`pureMVC_Simple`为例,PureMVC是一个轻量级的框架,它并不直接涉及Flex4的皮肤机制,但我们可以将其与Flex4的自定义组件皮肤结合起来,创建一个具有PureMVC风格的用户界面。例如,我们可以通过自定义...
1. **使用Style和Skin**:Flex支持两种主要的方式来改变组件的颜色:样式(Style)和皮肤(Skin)。样式是简单的CSS样式的应用,如字体颜色、背景色等。皮肤则更为复杂,它允许自定义组件的完整外观,包括绘制图形、...
每个Flex组件都有一个与之关联的皮肤类,这个类定义了组件的外观。开发者可以通过继承已有的皮肤类并重写其属性来创建新的皮肤。 5. **MXML与ActionScript皮肤** - **MXML皮肤**:使用MXML语法,可以直接在XML中...
4. **Skinning与Theming**:Spark组件的一大亮点就是皮肤(Skin)和主题(Theme)机制。通过皮肤,开发者可以改变组件的外观;通过主题,可以在全局范围内统一应用的视觉风格。 5. **格栅布局(Grid Layout)**:...
- **解释**:本章详细介绍了各种Flex组件,如Alert组件、按钮组件、分组组件、数据组件、文本组件以及布局组件,每个组件都有其独特的功能和用途。 #### 第3章:Flash Media Server 3.0 (简称FMS3) - **知识点**:...
Flex中的CSS与Web开发中的CSS有一些相似之处,但也有其特定的规则和属性,如Skin和Style的概念,以及对Flex组件特有的样式支持。 在Flex中,样式可以通过以下几种方式应用: 1. **全局样式(Global Styles)**:...
在Flex4中,开发者经常需要根据项目需求对标准UI组件进行自定义,以实现独特的界面效果和交互体验。本主题将深入探讨如何在Flex4的Spark主题下开发一个带有图标的自定义输入框皮肤组件,并实现圆角效果。首先,我们...
标题中的“Yibiao.zip_GaugeSkins_Skin1.swf_flex_flex4_gaugesample.swf_仪表盘”暗示我们关注的是一个与仪表盘相关的项目,其中包含了“Skin1”皮肤的SWF文件,以及用于展示Flex 4仪表盘功能的“gaugesample.swf”...