您使用样式和外观自定义应用程序的外观。Flex 4 框架包含两套组件:原来的 MX 组件(可以通过设置样式进行自定义)以及新的 Spark 组件(可通过创建自定义外观进行自定义,这些外观定义组件的外观和布局,然后使用样式将外观与组件关联在一起)。通常使用 MXML 创建 Spark 外观,并使用图形标签绘制图形元素。图形代码可以由程序员编写,或由设计人员使用 Adobe Photoshop CS5、Adobe Illustrator CS5 或 Adobe Fireworks CS5 软件生成。
以下是一个应用程序的代码,它创建并使用一个自定义组件外观:
Main.mxml
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Label text="Standard Button" x="10" y="11"/>
<s:Button label="Label" x="122" y="5"/>
<s:Label text="Skinned Button" x="10" y="40"/>
<s:Button skinClass="com.adobe.samples.skins.PlusButtonSkin" x="122" y="34"/>
</s:Application>
PlusButtonSkin.mxml (/com/adobe/samples/skins/)
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<s:State name="disabled" />
<s:State name="down" />
<s:State name="over" />
<s:State name="up" />
</s:states>
<s:Path winding="evenOdd" data="M 2 13 C 2 7 7 2 13 2 C 18 2 23 7 23 13 C 23 18 18 23 13 23 C 7 23 2 18 2 13 Z " >
<s:fill>
<s:SolidColor color="#bfb59f" alpha="1"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#403029" weight="3"/>
</s:stroke>
</s:Path>
<s:Path winding="evenOdd" data="M 13 6 L 13 18">
<s:stroke>
<s:SolidColorStroke color="#403029" weight="2"/>
</s:stroke>
</s:Path>
<s:Path winding="evenOdd" data="M 7 12 L 19 12">
<s:stroke>
<s:SolidColorStroke color="#403029" weight="2"/>
</s:stroke>
</s:Path>
</s:Skin>
运行结果:
查看完整例子请下载“skinClass_sample”。详细代码说明
请看这里。
相关推荐
在Flex 4中,皮肤(Skin)是一种强大的机制,用于改变和定制UI组件的外观和交互体验。本文将深入探讨FLEX4中的皮肤系统,特别是SparkSkin类,并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍: ...
通过以上内容,我们可以了解到在Flex4中如何利用`SparkSkin`和`Skin`类来定制组件的外观,以及如何将自定义皮肤应用到实际项目中。这对于初学者来说是一个很好的起点,能够帮助他们理解Flex4的皮肤机制,并进一步...
根据提供的信息,本文将深入解析Flex4中皮肤(skin)的概念、SparkSkin的使用方法以及如何通过自定义Skin来改变Flex应用界面的外观。 ### Flex4中的皮肤概念 在Flex4中,皮肤(skin)是一种用于控制UI组件外观的...
在Flex4中,Adobe引入了新的皮肤系统,称为Spark Skin系统,旨在提供更高效、更灵活的UI设计能力。本篇文章将详细介绍如何利用Flex4中的Spark Skin进行控件样式的自定义。 #### 二、Spark Skin与Skin类的关系 在...
在Flex4框架中,开发人员经常需要创建具有高度定制化外观的应用程序组件。本篇文章将基于提供的文件信息深入探讨如何在Flex4中实现一个拥有自定义头部背景图片的Accordion组件,并通过代码示例详细解释其实现过程。 ...
Flex皮肤是一种专为Adobe Flex应用程序设计的用户界面样式。Flex是一个开源框架,用于构建富互联网应用程序(RIA),它使用ActionScript编程语言和MXML标记语言。在Flex中,皮肤是可定制的外观组件,允许开发者根据...
在Adobe Flex 4 (代号Gumbo)中,为了提高用户界面(UI)的美观度和灵活性,引入了一个非常强大的概念——皮肤(Skin)。皮肤是用于定义控件外观的一系列元素组合,通过更改这些元素,可以轻松地定制任何UI组件的视觉表现...
- SparkSkin是Adobe Flex 4 (Gumbo)框架中的一个关键类,用于自定义用户界面(UI)组件的外观。它提供了一种机制,允许开发者通过XML或者ActionScript对控件的外观进行高度定制。 - SparkSkin类位于`spark.skins`...
Flex是Adobe开发的一种用于构建富互联网应用程序(RIA)的框架,主要使用ActionScript语言和MXML标记语言。本文档是针对Flex和Java初学者的学习笔记,涵盖了Flex中的基础组件、文本处理、样式设计、行为对象以及动画...
Flex Skinning机制是Adobe Flex框架中的一个重要特性,它允许开发者为UI组件自定义外观和行为,从而实现应用程序的独特设计和交互体验。通过深入理解并实践Flex Skinning,开发者可以更灵活地控制用户界面的视觉样式...
Adobe Flex 4.1 是一个强大的开发框架,用于构建富互联网应用程序(RIA),它基于ActionScript 3.0和MXML。本语言参考是离线版本,为开发者提供了全面的文档,帮助他们深入理解Flex 4.1的核心编程概念和技术。 在...
在Flex 4中,实现了更加强大的皮肤机制,允许开发者更加灵活地定制组件外观。对于背景平铺而言,我们可以直接通过CSS样式来轻松实现。 ```as sample: (ʽед).sample { backgroundImage: Embed(source="assets/bg...
- **定义**:BlazeDS 是 Adobe 提供的一款用于在 Flex 应用与 Java 服务器之间进行实时数据交换的产品。 - **优势**:支持 AMF 编码,能够实现低延迟的双向数据流。 #### 6.2 配置 BlazeDS 并使之正常运作 - **...
状态管理是Flex 4中一个非常重要的概念,它可以帮助开发者更好地控制应用程序在不同情况下的显示状态。这部分内容主要讲解了: 1. **状态定义**:如何定义不同的状态,以及如何为每个状态设置相应的样式和行为。 2....
在这个例子中,我们学习如何在Flex Gumbo(Flex的一个版本)中使用`<Style/>`标签来自定义`Button`和`TextInput`的样式。 #### 示例分析: 1. **命名空间声明**:首先,我们看到`<s:Application>`标签中的`xmlns:`...
Flex允许开发者通过CSS样式表或自定义外观类(Skin Class)来改变`Tree`控件的外观。此外,还可以通过覆盖默认的行为类来改变节点的展开、折叠等行为。 6. **工具支持** 开发Flex应用时,Adobe Flex Builder(现...
在FlexViewer这类基于Adobe Flex构建的GIS应用中,对比例尺(ScaleBar)的定制可以显著提升用户体验,使其更加符合特定项目的需求。 #### 二、基础知识简介 在深入探讨如何定制ScaleBar之前,我们需要了解一些基础...
为了使应用程序更加美观,这部分将介绍如何使用样式和皮肤来定制UI组件的外观。 - **9.1 样式** - 如何定义和应用样式。 - 示例:使用style属性设置颜色、字体等。 - **9.2 皮肤** - 如何使用皮肤文件自定义组件...
为了编译源码,你需要安装Adobe的FLASH BUILDER或FLEX BUILDER这样的开发工具。一旦安装完毕,按照以下步骤进行操作: 1. 在FLASH BUILDER中创建一个新的ActionScript项目。将项目路径设置为JWPlayer源码包的根目录...