Как определить стиль по умолчанию для пользовательского компонента Flex?

Question

Я создаю новый компонент Flex (Flex 3). Я хотел бы иметь стиль по умолчанию. Есть ли соглашение об именах или что-то такое, что делает мой файл .cs стилем по умолчанию? Я что-то упустил?

Answer 1

Кристиан прав в применении CSS, но если вы планируете использовать компонент в библиотеке между проектами, вам нужно написать файл CSS по умолчанию для этой библиотеки. Вот как вы это делаете:

1. Создайте CSS-файл с именем «defaults.css» (будет работать только это имя!) И поместите его на верхний уровень в папку «src» вашей библиотеки. Если файл css ссылается на какие-либо ресурсы, они также должны быть в разделе "src".
2. (ВАЖНО!) Перейдите в Свойства проекта библиотеки> Путь сборки библиотеки Flex> Активы и включите файл css и все активы.

Так команда Adobe устанавливает все свои стили по умолчанию, теперь вы можете сделать это тоже. Только что понял - огромный

Answer 2

Два способа, как правило. Во-первых, просто ссылаясь на имя класса напрямую - например, если вы создали новый класс компонента MyComponent в ActionScript, или косвенно, сделав компонент MXML расширяющим другой UIComponent с именем MyComponent, в обоих случаях компонент выберет стили, объявленные в вашей внешней таблице стилей, при условии, что таблица стилей была импортирована в ваше приложение (например, через Style source):

MyComponent
{
     backgroundColor: #FFFFFF;
}

Другой способ - установить свойство styleName UIComponent (в виде строки):

public class MyComponent
{
     // ...

     this.styleName = "myStyle";

     // ...
}

... и определение стиля в файле CSS следующим образом (обратите внимание на точечную запись):

.myStyle
{
     backgroundColor: #FFFFFF;
}

Имеет смысл?

Answer 3

В дополнение к тому, что предложил Кристиан Нунциато, другой вариант - определить статический инициализатор для стилей вашего компонента 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

Вы можете переопределить стили по умолчанию, используя тег <fx:Style> или аналогичный. В этом случае CSSStyleDeclaration может уже существовать ко времени проверки classConstructed. Вот решение:

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 5

Уточнение того, что предложил Йоштыняла:

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 6

Чтобы создать стиль по умолчанию, вы также можете иметь свойство в своем классе и переопределить функцию styleChanged () в UIComponent, например, чтобы нарисовать цвет фона только на половине ширины компонента:

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

Вы также можете создать установщик для customBackgroundColor, который вызывает invalidateDisplayList (), так что вы также можете установить свойство customBackgroundColor программно, а также с помощью css.