11

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

4

6 回答 6

10

Christian 关于应用 CSS 是正确的，但是如果您计划在跨项目的库中使用该组件，您将需要为该库编写一个默认的 css 文件。这是你如何做到的：

  1. 创建一个名为“defaults.css”的 css 文件（只有这个文件名可以使用！）并将其放在库的“src”文件夹下的顶层。如果 css 文件引用了任何资产，它们也必须在“src”下。
  2. （重要！）转到库项目的 Properties > Flex Library Build Path > Assets 并包含 css 文件和所有资产。

这就是 Adob​​e 团队设置所有默认样式的方式，现在您也可以这样做。刚刚想通了——巨大的

于 2010-03-20T17:22:54.510 回答
8

两种方式，一般。一个是直接引用类名——例如，如果您在 ActionScript 中创建了一个新组件类，或者通过使MXMLMyComponent组件间接扩展另一个名为MyComponent在您的外部样式表中，前提是样式表已导入您的应用程序（例如，通过Style source）：

MyComponent
{
     backgroundColor: #FFFFFF;
}

另一种方法是设置 UIComponent 的styleName属性（作为字符串）：

public class MyComponent
{
     // ...

     this.styleName = "myStyle";

     // ...
}

...并像这样在 CSS 文件中定义样式（注意点符号）：

.myStyle
{
     backgroundColor: #FFFFFF;
}

有道理？

于 2009-01-30T23:32:01.947 回答
6

除了 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();
于 2009-02-02T00:24:16.507 回答
2

对 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 方法被自动调用。

于 2010-01-14T17:28:58.467 回答
2

您可能希望使用<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);
}
于 2011-08-10T21:15:19.753 回答
1

要创建默认样式，您还可以在类中拥有一个属性并覆盖 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 创建一个设置器，因此您还可以通过编程方式以及通过 css 设置 customBackgroundColor 属性。

于 2010-04-23T03:38:52.513 回答