Test Drive：更改应用程序的外观
<?xml version="1.0" encoding="utf-8"?>
<s:Application ... backgroundColor="#F9F8E9">
<fx:Style source="TestDrive.css"/>
(...)
</s:Application>
TestDrive.css
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global
{
font-family: Verdana;
font-size: 10;
chrome-color: #7F7364;
selection-color: #BFB59F;
roll-over-color: #E5DFC3;
focus-color: #7F7364;
}
s|Button
{
cornerRadius: 5;
color:#FFFFFF;
font-weight:bold;
}
s|Button:disabled{
color:#000000;
}
.navButton
{
fontSize: 12;
}
mx|DataGrid
{
alternating-item-colors:#F8F8F4,#FFFFFF;
header-style-name:titles;
}
.titles{
color:#FFFFFF;
font-weight:bold;
}
#xyz
{
color: #403029;
fontSize: 20;
fontWeight: bold;
}
教程
在前四个单元中，您学会了如何创建、调试和部署 Flex 应用程序。在本单元中，您将学习如何使用样式和外观更改应用程序的外观。
通过样式，您可以使用 MXML（您已经拥有它）或者通过使用选择器的样式表（样式规则）在行中设置组件样式。为每个组件定义的样式数量有限。例如，您可以为 Label 设置的样式包括 font-size、font-family 和 color。而对于 Button，您还可以设置 corner-radius 样式。如果要比使用组件样式更彻底地更改组件外观，您需要创建或编辑关联的组件外观－这个文件指定了组件的外观。
Flex 框架包含两个组件系列：Spark 和 MX。以字母 s 开头的标签（例如，<s:Button>）是新的 Flex 4 Spark 组件。以字母 mx 开头的标签（例如，<mx:DataGrid>）是旧的 Flex 组件。主要使用样式设置 MX 组件的外观。新的 Spark 组件的架构经过重新设计，主要使用一种外观（而不是样式）模型，其中各个组件的关联外观文件管理与组件外观相关的所有项，包括图形、布局和状态。
在本教程中，您将学习创建样式表以及定义应用于应用程序的样式规则。在以下教程中，您将新建组件外观。
第 1 步：创建样式表和 CSS 全局选择器。
在 Design 模式中选中任何对象，导航到 Appearance 视图并更改字体和颜色样式（请参阅图 1）。
如果您不想自行选择值，可以使用：font-family：Verdana，font-size：10，chrome-color：#7F7364，selection-color：#BFB59F，rollover-color：#E5DFC3，focus-color：#7F7364。
设计区域中的组件将反映这些新样式。尽管全局 font-size 设置为 10 像素，XYZ Label 依然很大，这是因为它的 MXML 标签行中设置了一个 font-size 样式。优先使用更近或更具体的样式值。
切换到 Source 模式。Application 标签下可以找到一个新的 Style 标签。
<fx:Style source="TestDrive.css"/>
在 Package Explorer 中，应该可以找到一个新文件，TestDrive.css。打开它。您将看到一个全局 CSS 选择器，它的样式将应用于所有组件。
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global
{
font-family: Verdana;
font-size: 10;
chrome-color: #7F7364;
selection-color: #BFB59F;
roll-over-color: #E5DFC3;
focus-color: #7F7364;
}
运行应用程序，查看组件主色、鼠标移入、选择和焦点的不同颜色。
第 2 步：创建 CSS 类型选择器。
在 Design 模式中，选择某个 Button，在 Properties 视图中将它的角半径更改为 5。单击“Convert to CSS”按钮。在“New Style Rule”对话框中，选择“Specific component”（请参阅图 3）。
将创建一个 CSS 类型选择器，它的样式将自动应用于这种类型的所有组件实例－此例中即所有 Button。
返回 TestDrive.css。您将看到一个新的 CSS 类型选择器。
s|Button
{
cornerRadius: 5;
}
Button 前方的 s 用于说明这是 Spark Button 而不是 MX Button 的样式。在 Design 模式中，返回 TestDrive.mxml 或运行应用程序。所有 Button 此时为圆角。
第 3 步：修改 CSS 选择器。
在 TestDrive.css 中，为 Button 选择器添加白色 (#FFFFFF) 和字体粗细 bold。
设置样式类型时，按住 Ctrl 键，再按空格键强制弹出 Content Assist，就可以从该列表中选择样式（请参阅图 4）。
在 Design 模式中，返回 TestDrive.mxml 或运行应用程序。所有 Button 此时使用粗体、白色文本，但很难看清被禁用的 Button（请参阅图 5）。
第 4 步：创建 CSS 伪选择器。
在 TestDrive.css 中，为 Button 的禁用状态创建一个伪选择器，并将它的颜色设置为黑色，#000000。
s|Button:disabled
{
color:#000000;
}
查看组件的 API 确定它已定义的状态（请参阅图 6）。记住，可以通过以下方式打开组件的 API：选择“Help”>“Dynamic Help”，单击 MXML 中的标签，然后单击 Help 视图中的 API 链接。
在 Design 模式中，返回 TestDrive.mxml 或运行应用程序。现在应该可以看清被禁用 Button（请参阅图 7）。
第 5 步：创建 CSS 类选择器。
在 Design 模式中，选择 Departments Button，在 Properties 视图中将其 font-size 更改为 12。单击“Convert to CSS”按钮。在“New Style Rule”对话框中，选择“All components with style name”并将样式命名为 navButton（请参阅图 8）。
返回 TestDrive.css。您将看到一个新的 CSS 类选择器，可以将它选择性地应用于任何组件。
.navButton
{
fontSize: 12;
}
在 TestDrive.mxml 中返回 Source 模式并找到 deptBtn Button。它现在的 styleName 属性（用于一个状态）设置为您刚才定义的类选择器名称。
<s:Button x="124" y="85" label="Departments" id="deptBtn"
enabled.Departments="false" click="deptBtn_clickHandler(event)"
styleName.Employees="navButton"/>
将该属性应用于所有状态。
styleName="navButton"
第 6 步：将 CSS 类选择器指定到另一个组件。
在 Design 模式中，选择 Employees Button 并在 Properties 视图中选择 navButton 样式（请参阅图 9）。移动 Button，确保它们没有重叠在一起。切换到 Source 模式并更改 Button，使新的 x、y 和 styleName 值应用于所有状态。
可应用于该组件的任何样式将显示在这个下拉列表中。
Button 标签应当如下：
<s:Button x="36" y="85" label="Employees" id="empBtn" enabled="false"
styleName="navButton" enabled.Departments="true"/>
<s:Button label="Departments" id="deptBtn"
click="deptBtn_clickHandler(event)"
styleName="navButton" x="138" y="85" enabled.Departments="false"/>
现在，这两个 Button 的文本比其他 Button 大。navButton 样式被选择性地应用于这两个 Button。
第 7 步：设置 DataGrid 样式。
在 TestDrive.css 中，为 mx|DataGrid 添加一个类型选择器，并将它的 alternating-item-colors 设置为 #F8F8F4 和 #FFFFFF，将它的 header-style-name 设置为 titles。创建一个名为 titles 的类选择器，color 为 white 并且 font-weight 为 bold。
您的选择器应当如下：
mx|DataGrid
{
alternating-item-colors:#F8F8F4,#FFFFFF;
header-style-name:titles;
}
.titles{
color:#FFFFFF;
font-weight:bold;
}
在 Design 模式中，返回 TestDrive.mxml 或运行应用程序。DataGrid 标题文本和行的样式此时已设置（请参阅图 10）。
第 8 步：创建 CSS ID 选择器。
在 Source 模式中，将 XYZ Label 的 ID 指定为 xyz 并删除它的 color、fontWeight 和 fontSize 样式。在 TestDrive.css 中，为使用 #xyz 的 Label 创建一个 ID 选择器，将 color 设置为 #403029，将 font-weight 设置为 bold，将 font-size 设置为 20。
您的 Label 应当如下：
<s:Label id="xyz" x="36" y="36" text="XYZ Corporation Directory"/>
您的 CSS ID 选择器应当如下：
#xyz
{
color: #403029;
fontSize: 20;
fontWeight: bold;
}
在 Design 模式中返回 TestDrive.mxml 或运行应用程序，确保 XYZ Label 为棕色、粗体并且较大。
第 9 步：设置 Application 背景色。
在 Application 标签中，将 backgroundColor 样式设置为新颜色 (#F9F8E9)。运行应用程序。
+
本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可。Adobe 提供超出该许可范围、与本产品包含的代码示例相关的权限。