Добавить свойство пользовательского стиля в пользовательский компонент MXML - PullRequest
Новая
       28

Добавить свойство пользовательского стиля в пользовательский компонент MXML

1 голос
/ 22 июня 2011

У меня есть пользовательский компонент, в котором есть пара холстов с назначенными им цветами фона.Теперь я жестко закодировал цвета, я хочу переместить их во внешний файл CSS.

Так что я хотел бы иметь объявление CSS следующим образом: 

ControlBar  
{  
  dividerRightColor: #ffffff;  
  dividerLeftColor: #f3f3f3;  
}

Мой вопрос:я могу определить имена пользовательских стилей, например dividerRightColor, и если да, то как я могу использовать это значение внутри моего компонента MXML?Я видел примеры их использования внутри компонентов Pure AS.

Ответы [ 2 ]

2 голосов
/ 22 июня 2011

Мне кажется, что вам нужно создать стиль в компоненте;не просто отправить значения стиля в компонент, как другой ответ.

Прочтите эту документацию .

По сути, стили не определяются так же, как свойства.Вы можете установить любое имя стиля для компонента, который вы хотите.Однако компонент должен знать, что делать со стилем.Для этого вам необходимо переопределить метод styleChanged: 

override public function styleChanged(styleProp:String):void {

    super.styleChanged(styleProp);

    // Check to see if style changed. 
    if (styleProp=="dividerRightColor") 
    {
      // do stuff to implement the style
      dividerRight.setStyle('backgroundColor',getStyle('dividerRightColor'));
    }
}

Общий подход состоит в том, чтобы установить свойства "styleChanged" и аннулировать список отображения, а затем внести соответствующие изменения стиля в метод updateDisplayList ().

Чтобы сделать стиль доступным для подсказок по коду, вам нужно добавить метаданные, например: 

[Style(name="dividerRightColor")]

Это потребуется, только если вы хотите установить стиль как свойствов MXML.

2 голосов
/ 22 июня 2011

В CSS: 

.dividerRightColor {
    background-color: #ffffff;
}


.dividerLeftColor {
    background-color: #f3f3f3;
}

В MXML: 

<mx:ControlBar>
    <mx:Canvas styleName="dividerLeftColor">
        …
    </mx:Canvas>

    <mx:Canvas styleName="dividerRightColor">
        …
    </mx:Canvas>
</mx:ControlBar>
...