新闻资讯] 非常规Flex样式定义与使用

新闻资讯] 非常规Flex样式定义与使用

style, framework

资讯类型: 翻译

来源页面: http://jacwright.com/blog/295/flex-styling-without-the-flex/

资讯原标题: Flex Styling without the Flex (example and source)

资讯原作者: Jacob Wright

我的评论:我觉得用这样的样式定义还是有些麻烦的，可能不习惯这种方式。
对这篇文你有啥看法，跟贴说说吧！欢迎口水和板砖，哈哈。欢迎大家和我们一同分享更多资讯。

---

Question: What’s 2.8KB, can style any DisplayObject on the stage, and enjoys long walks on the beach?
问：2.8KB竟味着什么，定义在舞台上的任意可视对象样式？（and enjoys long walks on the beach什么意思？？）
答： Flex 样式！
因此Ben Stucki, Ryan Campbell, Tyler Wright和我正在讨论一种新的RIA组件原则。采用不同于Open Flux（OpenFlux是一个开源的Flex组件框架，使自定义组件的开发从根本上更快速和容易）的方法。从头开始新的构建。我们正在汇集从Open Flux和Stealth中学到的，其目的是发布完整的功能和稳定的构建。我们希望提供的东西可以在产品中得到全部的运用。我们还没有正式地公布该项目的命名。

上周Ryan提交了关于使用不带Flex的MXML，尽管它不是新的框架，但该原则可用于该框架中。也许有一天样式会变得更强大。今天，我提交的是关于不带FLEX框架使用FLEX样式的例子。采用了Ryan提交的例子并做了美化。组件采用了什么样式将会在后面进行解释。

下面是MinimalComps.mxml源码：

1. <?xml version="1.0" encoding="utf-8"?>
2. <bobjim:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3.      xmlns:bit101="com.bit101.components.*"
4.      xmlns:bobjim="com.bobjim.components.*"
5.      xmlns:styles="mx.styles.*">
6.    
7.     <fx:Declarations>
8.         <styles:StyleManager/>
9.     </fx:Declarations>
10.    
11.     <fx:Style source="styles.css"/>
12.    
13.     <bit101:VBox name="checkboxes">
14.         <bit101:CheckBox name="checkbox1" label="Good times?" />
15.         <bit101:CheckBox name="checkbox2" label="Great times?" />
16.         <bit101:CheckBox name="checkbox3" label="Super times?" />
17.         <bit101:PushButton label="Push Me" />
18.     </bit101:VBox>
19.    
20.     <bit101:ColorChooser name="color1" x="100" y="10" value="#ff0000" usePopup="true" />
21.    
22.     <bit101:ColorChooser name="color2" x="100" y="110" value="#ff0000" usePopup="true" popupAlign="top" />
23.    
24.     <bit101:HBox x="100" y="40">
25.         <bit101:Label text="Enter Name:" width="100" />
26.         <bit101:InputText id="input" />
27.         <bit101:Label text="{ input.text }" />
28.     </bit101:HBox>
29.    
30. </bobjim:Application>
31. <!--
33. 23,264  bytes w/o styling
34. 26,112  bytes w/styling
35. ======
36. 2,848  styling bytes total
38. -->

复制代码

styles.css源码如下：

1. /* CSS file */
2. #checkboxes {
3.     x: 10;
4.     y: 10;
5.     spacing: 10;
6. }
7. #checkboxes #checkbox2, MinimalComps #checkbox3 {
8.     selected: true;
9. }
10. #checkboxes PushButton {
11.     label: "Stylesheet Label";
12. }
13. #color1 {
14.     value: #00f;
15. }
16. #color2 {
17.     value: #900;
18. }
19. HBox InputText {
20.     text: "Default Text";
21. }

复制代码

这个例子与Ryan的样例非常相似，但是请注意区别包括：

• 在样式表中设置PushButton 标签
• VBox组件的x,y和间距同样也是在样式表中定义
• 派生的选择器在工作
• ＃ID可以匹配DisplayObject的名称属性
• 没有样式代码编译到元件里。任意显示对象在没有插入样式时同样是可以工作的。
• 如果从提供的IStylable接口继承，那么你也可以能过样式名与伪选择器进行匹配。

利弊
为了实现它，需要提供mx.style .*类,当样式表被加载成功后负责解析。这意味着你不能在FLEX中使用这样方法(FLEX自带有mx.style包，不能同时使用)。我们可以让它分到一个子应用程序中，但是它会负责更多的工作，并且仅仅只是一个证明性的概念。

实际上考虑IoC框架比样式要更多一些。在组件上没有getStyle/ setStyle方法，所有公有属性都可以在样式表中设置，不仅是样式属性。对纯样式工作者或许认为是一种弊端，而好处在于任何时候都可以设置需要的样式。

利：在样式表中嵌入资源与类引用允许非FLEX项目使用。传统地纯文本样式你不需要处理。允许通过覆盖样式表达到主题更换。
弊：只有FLEX4才支持这种CSS定义。这意味着MXMLC因为不明白而会忽视这些规则（派生、没有孩子、兄弟、属性选择器等）。