如何为自定义Flex组件定义默认样式？

Question

我正在创建一个新的Flex组件(Flex 3).我希望它有一个默认样式.是否有命名约定或我的.cs文件的某些内容使其成为默认样式？我错过了什么吗？

Answer 1

Christian对于应用CSS是正确的,但如果您计划在项目库中使用组件,那么您将要为该库编写默认的css文件.这是你如何做到的:

1. 创建一个名为"defaults.css"的css文件(只有这个文件名可以使用!)并将它放在库的"src"文件夹下的顶层.如果css文件引用任何资产,它们也必须在"src"下.
2. (重要!)转到库项目的属性> Flex库构建路径>资产,并包含css文件和所有资产.

这就是Adobe团队设置所有默认样式的方式,现在您也可以这样做.刚想出来这个巨大的

Answer 2

通常有两种方式.一个是直接引用类名 - 例如,如果您MyComponent在ActionScript中创建了一个新的组件类,或者通过使MXML组件扩展另一个调用的UIComponent来间接MyComponent,则在这两种情况下,组件都会获取声明的样式在外部样式表中,只要样式表已导入到您的应用程序中(例如,通过Style source):

MyComponent
{
     backgroundColor: #FFFFFF;
}

另一种方法是设置UIComponent的styleName属性(作为字符串):

public class MyComponent
{
     // ...

     this.styleName = "myStyle";

     // ...
}

...并在CSS文件中定义样式,如下所示(注意点符号):

.myStyle
{
     backgroundColor: #FFFFFF;
}

合理？

Answer 3

除了Christian Nunciato所建议的,另一个选择是为Flex组件的样式定义一个静态初始化器.这允许您设置默认样式,而无需开发人员包含CSS文件.

private static function initializeStyles():void
{
    var styles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("ExampleComponent");
    if(!styles)
    {
        styles = new CSSStyleDeclaration();
    }

    styles.defaultFactory = function():void
    {
        this.exampleNumericStyle = 4;
        this.exampleStringStyle = "word to your mother";
        this.exampleClassStyle = DefaultItemRenderer //make sure to import it!
    }

    StyleManager.setStyleDeclaration("ExampleComponent", styles, false);
}
//call the static function immediately after the declaration
initializeStyles();