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

I'm creating a new Flex component (Flex 3). I'd like it to have a default style. Is there a naming convention or something for my .cs file to make it the default style? Am I missing something?

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

6 个解决方案

#1

Two ways, generally. One's just by referencing the class name directly -- so for example, if you'd created a new component class MyComponent in ActionScript, or indirectly by making an MXML component extending another UIComponent called MyComponent, in both cases, the component would pick up the styles declared in your external stylesheet, provided that stylesheet's been imported into your application (e.g., via Style source):

通常有两种方式。一个是直接引用类名 - 例如,如果你在ActionScript中创建了一个新的组件类MyComponent,或者间接地通过使MXML组件扩展另一个名为MyComponent的UIComponent,那么组件就会拿起如果样式表已导入应用程序(例如,通过样式源),则在外部样式表中声明样式:

MyComponent
{
     backgroundColor: #FFFFFF;
}

Another way is by setting the UIComponent's styleName property (as a string):

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

public class MyComponent
{
     // ...

     this.styleName = "myStyle";

     // ...
}

... and defining the style in the CSS file like so (note the dot notation):

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

.myStyle
{
     backgroundColor: #FFFFFF;
}

Make sense?

#2

Christian's right about applying the CSS, but if you're planning on using the component in a library across projects, you're gonna want to write a default css file for that library. Here's how you do it:

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

1. Create a css file called "defaults.css" (Only this file name will work!) and put it at the top level under the "src" folder of your library. If the css file references any assets, they have to be under "src" as well.

创建一个名为“defaults.css”的css文件(只有这个文件名可以使用!)并将它放在库的“src”文件夹下的顶层。如果css文件引用任何资产,它们也必须在“src”下。

2. (IMPORTANT!) Go to library project's Properties > Flex Library Build Path > Assets and include the css file and all assets.

(重要!)转到库项目的属性> Flex库构建路径>资产,并包含css文件和所有资产。

That's how the Adobe team sets up all their default styles, now you can do it too. Just figured this out- huge

这就是Adobe团队设置所有默认样式的方式,现在您也可以这样做。刚认为这个很大

#3

In addition to what Christian Nunciato suggested, another option is to define a static initializer for your Flex component's styles. This allows you to set the default styles without requiring the developer to include a CSS file.

除了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();

#4

A refinement of what joshtynjala suggested:

joshtynjala建议的改进:

public class CustomComponent extends UIComponent {
    private static var classConstructed:Boolean = classConstruct();

    private static function classConstruct():Boolean {
        if (!StyleManager.getStyleDeclaration("CustomComponent")) {
            var cssStyle:CSSStyleDeclaration = new CSSStyleDeclaration();
            cssStyle.defaultFactory = function():void {
                this.fontFamily = "Tahoma";
                this.backgroundColor = 0xFF0000;
                this.backgroundAlpha = 0.2;
            }
            StyleManager.setStyleDeclaration("CustomComponent", cssStyle, true);
        }
        return true;
    }
}

I've read this in the docs somewhere; the classContruct method gets called automatically.

我在某处的文档中读过这篇文章; classContruct方法被自动调用。

#5

You may want to override default styles using the <fx:Style> tag or similar. If that's the case, a CSSStyleDeclaration may already exist by the time classConstructed is checked. Here's a solution:

您可能希望使用

private static var classConstructed:Boolean = getClassConstructed ();
private static function getClassConstructed ():Boolean {
  var defaultCSSStyles:Object = {
    backgroundColorGood: 0x87E224, 
    backgroundColorBad: 0xFF4B4B, 
    backgroundColorInactive: 0xCCCCCC, 
    borderColorGood: 0x333333, 
    borderColorBad: 0x333333, 
    borderColorInactive: 0x666666, 
    borderWeightGood: 2, 
    borderWeightBad: 2, 
    borderWeightInactive: 2
  };
  var cssStyleDeclaration:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration ("StatusIndicator");
  if (!cssStyleDeclaration) {
    cssStyleDeclaration = new CSSStyleDeclaration ("StatusIndicator", FlexGlobals.topLevelApplication.styleManager, true);
  }
  for (var i:String in defaultCSSStyles) {
    if (cssStyleDeclaration.getStyle (i) == undefined) {
      cssStyleDeclaration.setStyle (i, defaultCSSStyles [i]);
    }
  }
  return (true);
}

#6

To create a default style you can also have a property in your class and override the styleChanged() function in UIComponent, eg to only draw a background color across half the width of the component:

要创建默认样式,您还可以在类中使用属​​性并覆盖UIComponent中的styleChanged()函数,例如,仅在组件宽度的一半上绘制背景颜色:

// this metadata helps flex builder to give you auto complete when writing
// css for your CustomComponent
[Style(name="customBackgroundColor", type="uint", format="color", inherit="no")]

public class CustomComponent extends UIComponent {

    private static const DEFAULT_CUSTOM_COLOR:uint = 0x00FF00;

    private var customBackgroundColor:uint = DEFAULT_CUSTOM_COLOR;

    override public function styleChanged(styleProp:String):void
    {
        super.styleChanged(styleProp);

        var allStyles:Boolean = (!styleProp || styleProp == "styleName");

        if(allStyles || styleProp == "customBackgroundColor")
        {
            if(getStyle("customBackgroundColor") is uint);
            {
                customBackgroundColor = getStyle("customBackgroundColor");
            }
            else
            {
                customBackgroundColor = DEFAULT_CUSTOM_COLOR;
            }
            invalidateDisplayList();
        }

        // carry on setting any other properties you might like
        // check out UIComponent.styleChanged() for more examples
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        graphics.clear();
        graphics.beginFill(customBackgroundColor);
        graphics.drawRect(0,0,unscaledWidth/2,unscaledHeight);
    }
}

You could also create a setter for the customBackgroundColor that called invalidateDisplayList(), so you could also set the customBackgroundColor property programatically as well as through css.

您还可以为调用invalidateDisplayList()的customBackgroundColor创建一个setter,这样您也可以以编程方式和css方式设置customBackgroundColor属性。