如何為自定義Flex組件定義默認樣式？

Question

我正在創建一個新的Flex組件（Flex 3）。 我希望它有一個默認樣式。 是否有命名約定或我的.cs文件的某些內容使其成為默認樣式？ 我錯過了什么嗎？

Answer 1

Christian對於應用CSS是正確的，但如果您計划在項目庫中使用組件，那么您將要為該庫編寫默認的css文件。 這是你如何做到的：

1. 創建一個名為“defaults.css”的css文件（只有這個文件名可以使用！）並將它放在庫的“src”文件夾下的頂層。 如果css文件引用任何資產，它們也必須在“src”下。
2. （重要！）轉到庫項目的屬性> Flex庫構建路徑>資產，並包含css文件和所有資產。

這就是Adobe團隊設置所有默認樣式的方式，現在您也可以這樣做。 剛想出來這個巨大的

Answer 2

通常有兩種方式。 一個是直接引用類名 - 例如，如果您在ActionScript中創建了一個新的組件類MyComponent ，或者通過使一個MXML組件擴展另一個名為MyComponent UIComponent來間接，那么該組件將會選擇如果樣式表已導入應用程序（例如，通過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();

Answer 4

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;
    }
}

我在某處的文檔中讀過這篇文章; classContruct方法被自動調用。

Answer 5

您可能希望使用<fx:Style>標記或類似方法覆蓋默認樣式。 如果是這種情況，則在檢查classConstructed時可能已經存在CSSStyleDeclaration。 這是一個解決方案：

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);
}

Answer 6

要創建默認樣式，您還可以在類中使用屬​​性並覆蓋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);
    }
}

您還可以為調用invalidateDisplayList（）的customBackgroundColor創建一個setter，這樣您也可以以編程方式和css方式設置customBackgroundColor屬性。