Flex 应用程序换肤的工作流程是什么?
另外,如果您想创建完整 Flex 4 皮肤,您应该从哪里开始?是否有为某个地方创建图形所需的所有“部分”(组成部分)的列表,或者一些完整的示例皮肤用作模板?您的皮肤在 Flash Builder 设计视图中能否正确渲染? (包括嵌入字体)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
大多数人都会向您推荐 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.
基本上,在为 Flex 4 应用程序设计皮肤时,您有很多选择:
在我们的团队中,不存在使用 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 :
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, ...
这是我通常“开始”
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)