Flex 应用程序换肤的工作流程是什么?

发布于 2024-10-07 07:13:59 字数 143 浏览 4 评论 0 原文

另外,如果您想创建完整 Flex 4 皮肤,您应该从哪里开始?是否有为某个地方创建图形所需的所有“部分”(组成部分)的列表,或者一些完整的示例皮肤用作模板?您的皮肤在 Flash Builder 设计视图中能否正确渲染? (包括嵌入字体)

Also, where do you start if you want to create a complete Flex 4 skin? Is there a list of all the "pieces" (component parts) you need to create graphics for somewhere, or some complete, example skins out there to use as a template? And do your skins render correctly in Flash Builder Design View? (including embedded fonts)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

甜妞爱困 2024-10-14 07:13:59

大多数人都会向您推荐 Flash Catalyst,但我上次查看时它在创建完整的皮肤/主题方面并没有包罗万象,更不用说 1.0 软件固有的其他问题了。我首先复制默认皮肤文件并修改它们,并基于 SDK 附带的 defaults.css 文件创建一个新的 CSS 文件。更棘手的部分是,并非所有组件(Tree、DataGrid、DateChooser、ColorPicker 等)都可以用作 Spark 组件,这意味着要拥有完整的皮肤/主题,您还需要创建一堆 mx 皮肤。底线:如果您真的想正确地执行此操作,则需要花费大量时间来理解 defaults.css 及其引用的外观类。

为了回答您最初的问题,我个人的工作流程是在 OmniGraffle 中创建皮肤的模型,然后使用它作为指导,通过操作来修改默认皮肤文件的副本(查看spark.skins和mx.spark.skins)直接使用 mxml(而不是使用 Illustrator 或 Catalyst 等图形工具。)

希望有所帮助。

Most people will point you to Flash Catalyst, but the last time I looked it was not all-inclusive in terms of creating a complete skin/theme, not to mention other issues inherent to 1.0 software. I start by copying the default skin files and modifying them, as well as creating a new CSS file based on the defaults.css file that comes with the SDK. The trickier part is that not all components (Tree, DataGrid, DateChooser, ColorPicker, etc) are available as Spark components, which means to have a complete skin/theme you need to create a bunch of mx skins as well. Bottom line: If you are serious about doing this properly, you'll need to spend a lot of time understanding defaults.css and the skin classes it refers to.

To answer your original question, my personal workflow is to create a mockup of the skin in OmniGraffle, then use that as a guide to modify copies of the default skin files (look in spark.skins, and mx.spark.skins) by manipulating the mxml directly (as opposed to using a graphical tool such as Illustrator or Catalyst.)

Hope that helps.

迷你仙 2024-10-14 07:13:59

基本上,在为 Flex 4 应用程序设计皮肤时,您有很多选择:

  • 使用“常规”样式(chromeColor、selectionColor、focusColor,...)。这通常称为“样式化”而不是“皮肤化”,因为您只更改应用程序的整体外观。这是迄今为止快速更改应用程序外观的最简单方法,无需了解任何有关 FXG、MXMLG 的信息...缺点是它仍然看起来像 Flex 应用程序,但具有不同的颜色/字体
  • 使用 Adob​​e 工具生成 FXG 文件。这些工具可以是Illustrator、Photoshop、Flash CS5。您可以使用这些工具设计每个 Spark 组件,并将结果导出为 .fxg 格式。 FXG 很棒,因为它经过优化,但你不能在其中使用诸如数据绑定之类的东西。
  • 用 MXMLG 手动(从头开始或复制默认的 Spark 皮肤)或借助 Flash Catalyst 编写你的皮肤。 Catalyst 可以将您的 Illustrator 或 Photoshop 设计转换为 MXMLG。经验表明,即使是最新版本,它仍然很痛苦。你经常会做这样的事情 这个

在我们的团队中,不存在使用 Flash Catalyst 的设计师/开发人员工作流程之类的东西。下一个版本看起来更好,但与 Microsoft 使用 Visual Studio/Blend 所做的事情仍然相去甚远。
话虽这么说,新的 Spark 架构非常棒。换肤更加容易、灵活且可读。使用这种架构,开发人员对组件进行编码,而设计人员只需了解契约(皮肤部件、皮肤状态、数据)即可对其进行换肤
如果您使用演示模型模式,这也适用于视图。

Flex 3 中没有“模板”皮肤,因为皮肤不再使用符号。不过可以做的是 Flex 4 风格的浏览器。

最后一句话,这里已经说过了,但不要忘记,在当前版本 (4.1) 中,所有组件都没有等效的 Spark,因此您仍将对 DataGrid 等组件使用 Flex 3 皮肤技术, 树, ...

Basically, you have many options when skinning Flex 4 apps :

  • Using "general" styles (chromeColor, selectionColor, focusColor, ...). This is usually called "Styling" instead of Skinning because you only change the overall look of the application. It's by far the easiest way to change the appareance of your application quickly without knowing anything about FXG, MXMLG, ... The drawback is it will still look like a Flex app, but with different colors/fonts
  • Using Adobe tools to produce FXG files. These tools can be Illustrator, Photoshop, Flash CS5. You design each of the spark component with these tools and export the result in .fxg format. FXG is great because it's optimized, but you can't use things such as Data Binding in it
  • Write your skin in MXMLG , by hand (starting from scratch or copying the default spark skin) or with the help of Flash Catalyst. Catalyst can take your Illustrator or Photoshop design and convert it to MXMLG. Experience shows it's still painfull, even with the last version. And you often end up doing things like this.

In our team, there is no such thing like designer/developer workflow with Flash Catalyst. The next version looks better but it's still far from what Microsoft is doing with Visual Studio/Blend.
That being said, the new Spark architecture is awesome. Skinning is much easier, flexible and readable. With this architecture, a developer codes the component and the designer skins it only by knowing the contract (skinparts, skinstates, data)
This also true for views if you use the Presentation Model pattern.

There is no "template" skins as the one available in Flex 3 because skinning doesn't use symbol anymore. What could be done though is a Flex 4 style explorer.

A final word, it has already been said here, but don't forget that with the current version (4.1), there is no spark equivalent for all of the components, so you will still use Flex 3 skinning techniques for components such as DataGrid, Tree, ...

衣神在巴黎 2024-10-14 07:13:59

这是我通常“开始”

http://examples.adobe.com /flex2/inproduct/sdk/explorer/explorer.html

一旦我弄清楚我必须对哪些组件进行皮肤处理,并且我无法使用 CSS 更改我想要在 Flex 中更改的内容,那么我就会进入 Flash 并开始将组件分解并调整它们。

http://www.adobe.com/devnet/flex/articles/skins_styles.html

(另外,我从来没有在设计视图中“正确”渲染过任何东西

This is where I normally "start"

http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

Once I figure out what components I have to skin, and I can't change what I want to change in Flex with CSS, then I go into Flash and start breaking the components apart and tweaking them.

http://www.adobe.com/devnet/flex/articles/skins_styles.html

(Also, I've never had anything render "correctly" in design view)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文