利用Flex Builder 3制作Flex 3应用的皮肤（三）

最新推荐文章于 2014-02-12 10:48:43 发布

原创最新推荐文章于 2014-02-12 10:48:43 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #CSS #设计模式 #浏览器 #UP

Flex 专栏收录该内容

78 篇文章

订阅专栏

Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3

Styling Flex components using CSS Design mode

Flex Builder 3 的一个很重要的新特性就是 CSS Design mode. 在这种模式下，你可以可视化编辑将要应用于元件上的样式。这个模式有很多原来 Flex Style Explorer 上面的功能，另外，它直接将 CSS 写到你的项目中，你不必再拷贝粘贴代码。这一节讲述 CSS 设计模式下的操作。

Creating default component styles

下面是创建 Flex 元件缺省样式的方法。元件的缺省样式被默认应用于程序中的所有元件实例。

启动 Flex Builder 3.
新建项目 File > New > Flex Project.
在最上面的“项目名称”字段，输入 StyleTest.
点“完成”。开发环境会打开你项目的主文件，StyleTest.mxml.
新建 CSS 文件 File > New > CSS File.
将文件命名为 styles.css 并点“完成”。系统会在一个编辑窗口中打开一个新的 CSS 文件。
点击 CSS 编辑器顶部工具栏里的”Design”按钮。
点工具栏上的”Style”下拉框右侧的”New Style”按钮。
在”New Style”对话框中，选你想为其定制样式的元件，点”OK”.
用右侧的 Flex 属性面板上提供的控制调整元件的样式。

根据你所选元件的不同，你会在设计窗口看到一个元件样板，也可能会看到元件的多个状态。例如，一个按钮有多个状态：正常 (“up”) 状态，就是用户没有与之交互时的样子；“over” 状态，是鼠标移到上面以后看到的样子，等等。不同的样式属性影响元件的不同状态，你可以让它跑起来以观察这些属性的效果。

Testing your styles in an application

一旦你为几个不同的元件创建了样式，你就会看到样式在实际程序中的表现。（注意：这些操作都假设你使用的是 Flex Builder 3 标准版。)

如果还在 CSS 编辑器中，选 File > Save.
点 StyleTest.mxml 文件的”editor”标签（这个文件在上面的第四步已经自动打开）。
在代码中”<mx:Application>“标签的下面，输入：”<mx:Style source=”styles.css”/>"
点顶部工具栏上的”Design”按钮切换到 MXML 设计模式。会出现几个新的面板。
从右下角的元件面板拖拽你想要定制的元件到设计区，按你希望的样子对它做设计。元件表现的外观与你用 CSS 编辑器做设计是一样的。
选 Run > Run StyleTest. 这会在你的浏览器里运行程序。在你与元件互动的时候，元件在各种状态下的表现就是你在 CSS 编辑器里设计的一样。

Creating multiple styles for one component

你可以用 CSS 设计模式来生成各种各样的样式。以上面的例子中，你创建了用于所有元件实例的样式。当然，你也可以为单独一个元件创建多个样式，比方说，你想在同一个程序中使用不同样式的按钮。Here’s how:

回到 styles.css 文件的 CSS 编辑器
点 New Style.
选 “Specific component with style name”.
像前面一样选一个元件——比方说，Button.
在 “Name:” 字段里面，输入一个名字——例如，redButton.
点 OK.
像前面一样，用 Flex Properties 面板调整按钮的外观。
选 File > Save.
切换回 StyleTest.mxml 文件的编辑窗口（它当前应该还处于设计状态）。
拖拽一个按钮到设计区。注意，它看上去应该还是缺省的 Flex 按钮样式（如果你原来做过，那么也可能是你前次创建的按钮样式）——它与你新的 redButton 还不太像。
在右侧 Flex Properties 面板上，从 “Style:” 下拉框选择 “redButton”。你的按钮的样式就是你原来已经设计好的样子了。

Creating CSS styles from an application layout

所有这些例子都是基于 CSS editor. 但你有可能希望先布置程序窗口并调整它的外观，然后再生成 CSS 样式，这样你就可以在你程序的其它地方重用它们。转出为 CSS 的功能在 Flex Builder 3 里面很容易。

新建 Flex Project，File > New > Flex Project.
将项目命名为 MyApp 然后点 Finish. 系统会打开程序主文件，MyApp.mxml.
在工具栏上点 Design 按钮。
从元件面板拖拽按钮到设计区。
用 Flex Properties 面板定制按钮的外观。注意，你在这里所做的操作只对这一个按钮有效。如果你拖拽一组其它的按钮到设计区，你可以看到它们都是 Flex 缺省的外观。
在你完成对按钮的定制之后，点 Flex Properties 面板里的 Convert to CSS…
会出现一个对话框，样子和 New Style 对话框差不多。当然，另外会有几个生成 CSS 文件的选项。
点 New… 然后输入 CSS 文件的名字。
不改其它设置，点 OK 可以生成按钮的缺省样式。你从这个按钮所生成的 CSS 样式会出现在新打开的 CSS 编辑器里面。新的样式表会被自动应用到你的主程序中，因此你不必手工添加 <mx:Style> 标签。
选 File > Save.
切换回 MyApp.mxml.

注意，你拽出的其它按钮的外观与第一个按钮是一样的。这是因为你创建的样式已经做为按钮的缺省样式。如果你想建一个特殊的不应用于程序中所有按钮的样式，请在前一节的 Convert to CSS 对话框中选 “Specific component with style name” 并为你的按钮样式起一个名字。这样你就可以在前面 Flex Properties 面板的 Style 下拉框里指定按钮的样式。

这一章只是 CSS 设计模式的起步。我在下一章中将介绍更多功能，有关元件样式设计的更多信息，请参考 CSS Design mode.