第九章.皮肤与样式

Flex 框架强大的布局管理功能以及默认的Halo AeonThe 主题使你可以即使不用box 组件都能创造出十分友好的界面。你能利用容器和控件来创造一个应用程序用户界面的轻松程度,与你能否轻松地用皮肤和样式来美化这些组件是相关的。

本章的题目可能稍微有些误导读者: 皮肤和样式在Flex 中并不是独立的两个概念; 其实它们协力合作为你的程序带来视觉个性. 实际上,皮肤是样式的一组属性,它能使用其他已经声明的样式值来达到同种效果。样式和皮肤组件在使用方法是不同的,本章目的在于帮助你充分使用好它们.

样式是一种性质设置,例如色彩、大小或者字体信息,它可以修改组件的外观,可以在编译和运行时有规则地客户化。样式性质可通过多种方式定义:在组件声明的代码段设置,通过调用setStyle 方法应用样式, 或者利用级联样式表(CSS). 你可以用CSS 在MXML 文件或其他外部文件中局部地定义样式。

皮肤作为样式的特性,用于修改组件的外观元素。这些元素可以是图形化的, 例如一个图像文件或者SWF, 再或者利用drawing API 编程实现的类.为组件应用皮肤可以修改甚至替换组件的外观元素。这样当应用皮肤时一些样式设置可能会被忽略。

为了讲述两个过程怎样合作完成组件的客户化, 我们先简单地看下按钮的视觉组成。你可以为按钮的很多性质赋值, 例如与字体处理、补白有关的那些。用来定义一个按钮实例各自状态下皮肤的属性,也包含在其中。

要想大体地理解前面所讲的意思, 考虑下可用于按钮的部分样式:
cornerRadius="4"
fillAlphas="[0.6, 0.4]"
fillColors="[0xE6EEEE, 0xFFFFFF]"
upSkin="mx.skins.halo.ButtonSkin"

上述代码中这些可用于按钮的样式的属性值是包含在框架中的defaults.css 文件所定义的默认值。任何按钮实例的upSkin 属性默认值是Halo skins 包中的mx.skins.halo.ButtonSkin类。

通过drawingAPI, 这个规则的皮肤利用其它已声明的属性值(cornerRadius, fillAlphas,以及fillColors.)来表现按钮实例的弹起状态。尽管upSkin 属性的默认值是一个编程实现的类,这些值可以替换成图形文件, 这样可能会有效地忽略利用皮肤可能用到的属性值。

本章旨在讲述对你的组件使用皮肤和样式的过程,以及它们如何有效地用来改善你的程序的外观感受。
注意
在线的Flex Style Explorer 允许在运行时修改各种组件的样式并查看作为结果的CSS 定义。如下网址访问Flex Style Explorer http://www.adobe.com/go/flex_styles_explorer_app.

目录

9.1.用CSS定义组件样式

9.2.重写默认的应用程序样式

9.3.嵌入CSS样式

9.4.修改初始样式属性

9.5.运行时定制样式

9.6.运行时加载CSS

9.7.运行时声明样式

9.8.自定义组件样式属性

9.9.同一个程序中使用多个主题

9.10.编译主题SWC

9.11.应用嵌入字体

9.12.从SWF文件中嵌入字体

9.13.嵌入图像的皮肤

9.14.从SWF文件中嵌入皮肤

9.15.编程实现组件应用皮肤

9.16.编程实现状态控件的皮肤

9.17.从SWF 文件中生成动态皮肤

9.18.自定义引导界面

加支付宝好友偷能量挖...


评论(0)网络
阅读(140)喜欢(0)flash/flex/fcs/AIR