Flex 外部样式表约定
我知道有关于同一主题的问题,但针对的是 HTML。在 Flex 应用程序中使用外部样式表有哪些好的约定?您将如何分解样式表(样式表的名称及其包含的内容)?
I know that there are questions regarding this same topic, but for HTML. What are some good conventions in regards to using external stylesheets in a Flex app.? How would you break up the stylesheets (names of stylesheets and what they include)?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
Flex 不是我处理过的东西,但我做了一些研究。看起来调用远程样式表的代码是这样的:
Flex 快速入门:构建简单的用户界面:设置组件的样式 表示:
这似乎意味着多个样式表实际上是不可能的。听起来您想要做的是组织样式表,请查看组织您的样式表和架构 CSS 了解一些方法的想法。看起来您有类和基本标签,但 W3C 样式表规范 与Flex 样式表规范。
作为非 Flex 开发人员,命名空间作为一种组织命名空间的方式看起来很有趣:如何使用新的Flex 4 中的 CSS 语法。
Flex is not something I've dealt with, but I did some research. It looks like the code to call a remote stylesheet is this:
Flex Quick Start: Building a simple user interface: Styling your components says this:
The implication of this seems to be that multiple stylesheets are not really possible. It sounds like what you want to do is organize your stylesheets, check out Organizing Your Stylesheets and Architecting CSS for some ideas for approaches. It looks like you have classes and basic tags, but the W3C stylesheet specifications are different from the Flex stylesheet specification.
As a non-Flex developer, Namespaces looks interesting as a way to organize namespaces: How to use the new CSS syntax in Flex 4.
当您发布项目时,Flex 会编译外部 CSS 文件。
有一种方法可以使用 Flex 在运行时加载 CSS;可以通过将 CSS 文件编译为 SWF 文件并在运行时使用
StyleManager.loadStyleDeclarations
加载它们来完成。请参阅运行时样式表上的 LiveDoc了解更多信息。
Flex compiles the external CSS file when you publish your project.
There is a way to load CSS at runtime using Flex; it can be done by compiling CSS files into SWF files and load them at runtime using
StyleManager.loadStyleDeclarations
.See the LiveDocs on Stylesheets at Run Time for more info.
我们在组织样式表时使用的一些约定:
main.css
样式表来保存用于为基础应用程序换肤的所有数据。fonts.css
样式表来存储主应用程序中的所有字体,因为这些字体可能会变得非常混乱。main.css 样式表通过
标记包含在主 swf 中。我们尽可能少地加载我们的应用程序,一旦所有内容都加载完毕,如果我们需要立即显示一些文本(有时,如果它是广告网站,我们只播放视频),我们会在主要元素中淡出/补间并加载fonts.css 在运行时通过StyleManager.loadStyleDeclarations
实现。admin.css
样式表,因为主应用程序不需要它。我们不需要再分割 CSS,因为我们通常在 中创建一整套皮肤主题,因此样式表只是将这些皮肤应用于组件,并且非常精简(使用 Flex 4)。我倾向于不会将样式表分成更小的东西(例如“pages.css”,“comments.css”,“popups.css”,甚至“controls.css”等),因为这会太过分并且难以管理却没有什么回报。这在 HTML 中很常见,但那是因为 HTML 需要 CSS 才能实现良好的呈现; Flex 可以完全不用 CSS。
开发时,我们中的一个人通常会立即开发大部分皮肤(具有默认的线框设置,如 上找到的线框设置) ScaleNine 就像他们做 photoshop/flash/after-effects 一样,如果您进行更改,则没有办法不必重新编译 css swf,但如果它是在运行时加载的,则只需重新编译 css 文件并进行更改。不是主要的 swf,这在硬核皮肤开发过程中很有用,但并不是真正有用。
我尝试在开发过程中(在自定义主题中)将主样式表分开,这使开发变得更加困难,因为我必须每次都单独重新编译 css。当我做出更改时,有时我也必须重新编译主应用程序,并且存在奇怪且难以追踪的错误等。然后我正在编译两个不同的应用程序,因此我建议将主 css 文件保留为一部分。 如果您想要运行时 CSS而
无需重新编译任何内容,请尝试 Ruben 的 CSS Loader 并查看来源。但这会以运行时性能为代价。
Some conventions we use in organizing stylesheets:
main.css
stylesheet that holds all of the data for skinning the base application.fonts.css
stylesheet to store all of the fonts in the main app, because these can get quite messy.The main.css stylesheet is included in the main swf via the
<mx:Style source="main.css"/>
tag. We load our app with as little as possible, and once everything is loaded, if we need to immediately show some text (sometimes we just have a video playing if it's an advertising site), we fade/tween in the main elements and load the fonts.css viaStyleManager.loadStyleDeclarations
at runtime.admin.css
stylesheet which we load at runtime because the main app doesn't need it.We don't need to divide up the CSS anymore than that because we usually create a whole set of skins in a Theme, so the stylesheet is just applying those skins to components and is pretty lean (using Flex 4). I tend not do divide stylesheets into anything smaller (like "pages.css", "comments.css", "popups.css", or even "controls.css", etc.) because it would be overkill and too much to manage for little in return. That's common with HTML, but that's because HTML requires CSS for nice presentation; Flex could do without CSS entirely.
When developing, one of us usually develops most of the skin right away (having a default wireframe setup, like those found on ScaleNine as they do the photoshop/flash/after-effects. There's no way to not have to recompile the css swf if you make changes. But if it is loaded at runtime, you only have to recompile the css file and not the main swf, which is useful but not really useful during hardcore skin development.
I tried keeping the main stylesheet separate during development (in a custom Theme), and it made development a LOT harder, because I had to recompile the css separately every time I made a change and sometimes I had to recompile the main app too, and there were strange and hard-to-track-down bugs, etc. Then I was compiling two different apps. So I recommend keeping the main css file part of the main app.
If you wanted runtime css without having to recompile anything, try Ruben's CSS Loader and check out the source. But that would come at a runtime performance cost.