Flex: как применить CSS к компоненту ActionScript?

Question

У меня есть компонент Flex ActionScript.Как я могу применить CSS к этому компоненту?Я надеюсь, что смогу применить стили из внешнего файла CSS.

Селектор CSS в файле 'global.css':

.myPanel
{
color:#cccccc;
background-color:#333333;
border-color:#ff0000;
border-style:solid;
}

Мой компонент Flex:

package components
{
import mx.containers.Panel;

public class myPanel extends Panel
{
public function myPanel()
{
   super();
}

override protected function createChildren():void
{
super.createChildren();
}
}
}

Answer 1

Вы можете добавить стиль к своему элементу:

this.setStyle('styleName', 'myPanel');

(не уверен в этом, нужно проверить, но если у вас есть элемент, он будет работать) В этом случае селектор

.myPanel

будет работать

Для загрузки файла CSS используйте:

<fx:Style source="qx.css"/>

в вашем файле mxml

Answer 2

К сожалению, если ваш компонент определен с помощью Actionscript, вам придется вручную определять стили CSS в конструкторе или функции инициализации (например,):

//create and initialize css
var myCSS:StyleSheet = new StyleSheet();
myCSS.setStyle("body", {fontSize:'15',color:'#000066'});
myCSS.setStyle("h1", {fontSize:'25',color:'#000000'});
myCSS.setStyle("h2", {fontSize:'19',color:'#000000'});
myCSS.setStyle("a:link", {color:'#0000CC',textDecoration:'none'});
myCSS.setStyle("a:hover", {color:'#0000FF',textDecoration:'underline'});
myCSS.setStyle("b", {fontWeight:'bold'});
myCSS.setStyle("em", {fontWeight:'bold'});

Более простым способом было бы определить ваш компонент как компонент mxml и определить таблицу стилей в заголовке, например:

<fx:Style source="../assets/css/global.css"/>

И ваш файл CSS: