设置 Flex 应用程序样式最有效的方法是什么？
这可能更像是一次民意调查，而不是一个问题，但事情就是这样。我有一个相当复杂的 Flex 应用程序，它使用许多不同的组件。我希望应用程序能够自定义样式和/或换肤。我还想确保样式方法能够最有效地利用系统资源（内存、CPU、网络），并且不会对性能产生不利影响。
我们目前正在使用混合方法来设计应用程序的样式，该方法使用 CSS 和在 CS3 中创建的 Flash 皮肤。对我来说，采用双管齐下的方法来设计应用程序似乎很奇怪，并且理想情况下希望选择一种方法或另一种方法。有人可以概述一下仅使用 CSS 或 Flash 皮肤的优点和缺点吗？在同一个应用程序中使用两者是否有理由？
专门使用 CSS 似乎是有利的，因为任何对 CSS 其他用法有基本了解的人都可以使用它，尤其是在使用 Flex 2 Style Explorer 时。另一方面，我知道我们使用的 CS3 皮肤为需要这些状态的每个组件声明了向上/过度/向下/禁用/按下的皮肤，并且 Flex 在每个状态激活（取消）激活时管理到适当皮肤的转换。然而，我的印象是，在 CS3 中创建 Flex 皮肤需要一些专门的技能和工具。
那么，如果性能、定制和高效的资源利用是优先考虑的因素，您会建议怎样设计 Flex 应用程序呢？
This may be more of an opinion poll than a question, but here goes. I have a fairly complex Flex application that uses many different components. I want the application to be able to custom styling and/or skinning. I also want to be sure that the styling approach makes the most efficient use of system resources (memory, CPU, network), and that it does not adversely impact performance.
We currently are using a hybrid approach to styling the application that uses both CSS and a Flash skin created in CS3. It seems odd to me to have a two-pronged approach to styling an application and ideally would like to settle on one approach or the other. Can someone outline the advantages and disadvantages of using either exclusively CSS or a Flash skin? Is there a justification for using both within the same app?
Using CSS exclusively seems advantageous because it is approachable by anyone with a basic understanding of other uses of CSS, especially when using the Flex 2 Style Explorer. On the other hand, I know that the CS3 skin we use declares up/over/down/disabled/pressed skins for each component where these states are needed and Flex manages the transitions to the appropriate skins as each state is (de)activated. However, my impression is that creation of a Flex skin in CS3 requires somewhat specialized skills and tools.
So what would you recommend for styling a Flex application if performance, customization, and efficient resource utilization are priorities?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我一直只使用CSS。你说得最好，任何人都可以接近。我们可以将设计委托给那些不知道如何在 ActionScript 中进行编码的人，并且他们使用 css 和样式资源管理器没有问题（在 http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html，还没对比太多就找出来了与 flex 2 版本有什么不同）。
I've always exclusively used CSS. You stated it best that it is approachable by anyone. We can delegate the design to people that have no idea how to code in actionscript and they have no problem working with the css and the style explorer (updated for flex 3 at http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html, haven't compared too much to find out whats different vs the flex 2 version).
如果性能和灵活性是您的皮肤的两个最重要的考虑因素，您应该考虑程序化皮肤。
请参阅：程序化换肤 - 快速入门
引用 Adobe 的话：
“一个优势程序化皮肤的优点是它为您提供了对样式的大量控制，例如，您无法使用样式表或图形皮肤控制按钮控件的角半径，但您也可以使用程序化皮肤来开发。直接在 Flex 创作环境或任何文本编辑器中创建皮肤，而不使用 Adobe® Flash® 等图形工具，而且编程皮肤往往会使用更少的内存，因为它们不包含外部图像文件。”
有关更多信息，您还可以阅读 Adobe LiveDocs 帮助文档中的“创建编程皮肤”。
If performance and flexibility are the two most important considerations for your skins, you should consider Programmatic Skins.
See: Programmatic skinning - QuickStart
To quote Adobe:
"One advantage of programmatic skinning is that it provides you with a great deal of control over styles. For example, you cannot control the radius of a Button control's corners with style sheets or graphical skins, but you can by using programmatic skins. You can also develop programmatic skins directly in your Flex authoring environment or any text editor, without using a graphics tool such as Adobe® Flash®. Programmatic skins also tend to use less memory because they contain no external image files."
Fore more info, you can also read "Creating programmatic skins" in the Adobe LiveDocs Help Docs.
首先，如果您还没有开始使用 Flex 4，我建议您使用 Flex 4。 Flex 4 即将发布。
借助 Flex 4，他们拥有全新的换肤架构。这意味着您将永远不会再使用程序化皮肤。另外，他们还有高级CSS选择器，所以你可以这样做更多的是在 Flex 4 中使用 CSS。程序化皮肤无论如何都很难动态化。最后，如果您尝试抽象出程序化皮肤的逻辑，您最终将创建一个像 Flex 4 Spark Skins 一样的架构。
自定义
为了使 Flex 4 外观和样式尽可能动态化，我们所做的工作如下：
样式调色板：这些是包含静态类的静态类您在 CSS 或外观中使用的所有变量。例如，您可以拥有一个包含所有颜色的
ColorPalette：public static const ColorPalette.BRIGHT_RED:uint = 0xff0000;等。然后您可以在 Flex 中使用这些颜色4 通过绑定设置皮肤，例如ColorPalette.ACCENT_COLOR可以设置为 XML 中的任何内容（金色、亮蓝色或任何强调色）。有趣的东西。自定义外观：Flex 4 允许您轻松地为所有 Flex 4 和 Flex 3（数据网格、手风琴等）设置外观，因此，如果您不喜欢面板只有 1 个阴影且没有渐变，您可以添加带有 4 的背景。渐变和 2 个阴影（用于 2 个光线角度），也许还有一些翻转效果，然后您可以将
ColorPalette.BRIGHT_RED应用于阴影（或发光:)）。您可以使用 XML 配置 ColorPalette 设置。这是 很酷的自定义 Flex 4 SkinCSS：然后在 CSS 中，您可以编写一个非常简单的 Palette 解析器，将 ColorPalette 值（例如）应用到 CSS。查看 Degrafa CSS Skin 获取一些代码示例。
性能
调色板和 CSS 的唯一问题是性能。根据定义，静态类和绑定会降低性能。绑定会导致在后台进行大量事件调度，因此诸如
与 CSS 相同。在 Flex 中，每个 CSS 选择器 (
Panel { properties:values... }都会转换为一个对象。因此，如果您有 100 个选择器，您不仅会获得 100 个额外的对象，还会在您的项目中获得 100 个额外的类。至少，这肯定会增加您的 swf 大小，并且根据定义，动态类比非动态类慢。另外，设置样式（使用setStyle(property, value)在 Flex 中非常慢，因为您必须循环遍历所有子项。如果您通过管理系统（或像您建议的那样的 Flex Style Explorer 之类的东西）设置样式，那么您并不真正关心。但因为它们使用setStyle()，所以在更改样式时您会看到不错的性能影响，因此，如果性能是一个非常大的问题，那么最好的选择是对每个样式值进行硬编码。 ，并且不在运行时更改样式（无论如何谁需要这样做（除非您在管理部分）？如何在保持敏捷的同时对样式进行硬编码？）。使用 Palletes (
ColorPalette.BRIGHT_RED) 等，并转换绑定表达式 (; 但最后，最好通过以下方式创建自定义外观并定义样式：
然后你可以定义一些非常酷且高级的皮肤，并将它们连接到调色板或 xml 文件，并让用户对其进行编辑。尝试使用 Flash 或 Flex 的内置内容构建一个非常酷的和模块化皮肤/样式系统并不容易（也不理想）。因此，最好
避免使用 CSS，它太占用处理器资源，除非您需要像在 HTML 中使用的高级选择器，因为它确实使生活轻松。但为了实现模块化和可定制性（以及性能），请创建外观并将其连接到 XML。
我自己创建了一个基本主题< /a> 我可以在所有客户项目中使用它，它定义了我的风格。它由 3 个包组成（myskins、mx、spark）。在那里，我复制/粘贴所有默认的 Flex 3/4 外观并开始自定义。您可以免费下载Scale 9 Skin Project，让大多数组件准备好皮肤和测试。然后我只是将我的设计（photoshop 或其他）合并到 Flex 中，无论您选择什么。对于我重复使用的所有颜色，我将它们添加到调色板并最终添加到 XML。然后，如果我需要稍微不同的皮肤并且多次使用它，我会使用 CSS 为皮肤定义新样式（可能是没有背景颜色或边框的列表）。我的 CSS 非常精简。然后我可以将我的主题/调色板/css 复制/粘贴到新项目，根据需要进行修改，允许用户通过 xml（或管理界面）编辑颜色和位置，然后我就可以开始了。
仅靠 CSS 是做不到那么多的。
希望有帮助。
槊
First, I would suggest using Flex 4 if you haven't started already. Flex 4 is just about to be released.
With Flex 4, they have a whole new skinning architecture. This means you'll never use Programmatic Skins again. Plus they have Advanced CSS Selectors, so you can do way more with CSS in Flex 4. Programmatic Skins are very hard to make dynamic anyways. In the end, you'll end up creating an architecture like Flex 4 Spark Skins if you try to abstract out the logic for Programmatic Skins.
Customization
What we're doing to make Flex 4 Skins and Styling as dynamic as possible is the following:
Style Palletes: These are static classes that hold all of the variables you use in either CSS or Skins. For example, you can have a
ColorPalettethat has all of your colors:public static const ColorPalette.BRIGHT_RED:uint = 0xff0000;, etc. You can then use these in Flex 4 Skins via binding, such as<mx:Button color="{ColorPalette.RED}"/>. The only problem with static classes is they they're not dynamic (you couldn't define an arbitrary number of colors for them). Same with XML: you'd have to hard-code (eventually) a certain XML structure in order to use them in Skins. You could even have the XML define ColorPalette values (soColorPalette.ACCENT_COLORcould be set to anything from XML (gold, bright blue, or any accent). Fun stuff.Custom Skins: Flex 4 allows you to easily skin all the Flex 4 and Flex 3 (datagrid, accordion, etc.). So if you don't like how Panels only have 1 drop shadow and no gradients, you can add a background with 4 gradients and 2 dropshadows (for 2 angles of light), and maybe some rollover effect. And then you could apply your
ColorPalette.BRIGHT_REDto the shadow (or a glow :)). And you could have XML configure the ColorPalette settings. Here's a cool custom Flex 4 SkinCSS: Then in CSS, you could write a very simple Palette parser that applied your ColorPalette values (for example) to CSS. Check out the Degrafa CSS Skin for some code examples.
Performance
The only problem with Palettes and CSS is performance. By definition, static class and binding decrease performance. Binding causes lots of event dispatching in the background, so things like
<mx:Button color="{ColorPalette.RED}"/>decrease performance (not noticeable of course, since there are much worse applications, such as using built in Adobe Tweens), but it does to some degree.Same with CSS. In Flex, every CSS Selector (
Panel { properties:values... }is converted into an Object. So if you have 100 selectors, you get not only 100 extra object, but 100 extra classes in your application, at least! And that definitely adds to your swf size. And all of their properties are dynamic, and by definition, dynamic classes are slower than non-dynamic classes. Plus, setting a style (withsetStyle(property, value)in Flex is very slow because you have to loop through all the children. If you're setting styles via an admin system (or something like Flex Style Explorer like you suggested), then you don't really care. But because they usesetStyle(), you can see a decent performance hit when changing styles.So if performance was a super big issue, the best option would be to hard code every style value, and not change styles at runtime (who needs to do that anyway (unless your in the admin section)?). How do you hard code styles while still remaining agile? Use Palletes (
ColorPalette.BRIGHT_RED) and the like, and convert the binding expressions (<mx:Button color="{ColorPalette.RED}"/>) to static declarations via some preprocessor (I use ruby to compile my swfs, so I just match patterns and replace). So it'd convert<mx:Button color="{ColorPalette.RED}"/>to<mx:Button color="0xff0000"/>, and you get a performance boost.In the end though, it's best to create custom skins and define the styles there, either through:
<mx:Button color="0xff0000"/><mx:Button color="{ColorPalette.RED}"/><mx:Button color="{myxml.@button_color}"/>Then you can define some really cool and advanced skins and have them wired up to a palette or xml file and have the user edit that. Trying to build a very cool and modular skin/styling system with Flash or Flex using their built in stuff is not easy (nor desirable). So it's best to
Avoid CSS, it's too processor intensive, unless you need advanced selectors like you'd use in HTML because it does make life easy. But for modularity and customizability (and performance), create Skins and wire them to XML.
I myself create a basic theme that I can use in all of my client projects, something that defines my style. That consists of 3 packages (myskins, mx, spark). In there, I copy/paste all the default Flex 3/4 skins and start customizing. You can download a Scale 9 Skin Project for free to have most components ready to skin and test. Then I just merge my design (photoshop or whatever) into Flex however you choose. For all the colors I reuse, I add them to a palette and eventually to XML. Then if I need a slightly different skin and I use that multiple times, I use CSS to define a new style for a skin (maybe a list with no background color or border). My CSS is very lean. Then I can just copy/paste my theme/palettes/css to new projects, modify it as needed, allow the user to edit the colors and positions via xml (or an admin interface) and I'm ready to go.
You can't do that much with just CSS.
Hope that helps.
Lance