Определение тем оформления Flex 4 с помощью CSS

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

В своем приложении я импортирую свой css и определяю styleName в моей кнопке:

        <fx:Style source="styles.css"/>
        <s:Button label="Button" styleName="circle"/>

Вот мой CSS:

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|Button.circle
{
    skinClass: ClassReference("skins.buttons.CircleButton");
}

Насколько я понимаю, моя кнопка должна быть снабжена skinClass через CSS, но она не работает. Если я определю skinClass напрямую, как показано ниже, он будет работать нормально:

<s:Button label="Button" skinClass="skins.buttons.CircleButton"/>

Любая помощь будет оценена.


skinning actionscript-3 apache-flex
person redHouse71    schedule 13.04.2011    source источник
comment
Вы объявляете тег Style в основном файле приложения?   -  person Constantiner    schedule 14.04.2011
comment
Я определял его в представлении, я просто переместил его в основной файл приложения, и теперь он отлично работает с селектором типа. Спасибо!   -  person redHouse71    schedule 14.04.2011

Ответы (2)


arrow_upward
0
arrow_downward

Сначала убедитесь, что у вас есть файл CSS в корневом файле приложения. Во-вторых, я бы попытался сделать css без селектора типа, поэтому вместо s|Button.circle просто сделайте .circle.

РЕДАКТИРОВАТЬ

Вы также можете попробовать поместить стиль в тег Style в том же контейнере, что и ваша кнопка, чтобы проверить, работает ли это. Вы уверены, что ваше приложение может найти ваш style.css? Дополнительный код может помочь в ситуации.

person J_A_X    schedule 13.04.2011
comment
Спасибо! Я удалил селектор типа, как вы предложили, и он сработал. Я читал учебник по Adobe TV (tv .adobe.com / watch / adc-present / migrating-to-flex-4-using-skins), который использует его, поэтому я предположил, что это сработает, как я могу обеспечить использование одного скина для всех кнопок? - person redHouse71; 14.04.2011
comment
Вы можете использовать селектор типа и затем s|Button{...}. - person J_A_X; 14.04.2011

arrow_upward
0
arrow_downward

Согласно официальной документации Flex CSS:

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

.header { background-color: #CCCCCC; }

HBox.footer { background-color: #999999; }

Примечание. В Flex условие класса выполняется с помощью атрибута styleName в компоненте. Например, у вас может быть два класса HBox: «верхний колонтитул» и «нижний колонтитул». Выше первый селектор применяется к любому компоненту с styleName = "header"; второй селектор должен применяться только к компонентам HBox со styleName = "footer" (что на самом деле нужно исправить и применить в Gumbo, поскольку на сегодняшний день селекторы классов были только универсальными, а любой тип в селекторе игнорируется).

Похоже, что в Gumbo не работают селекторы ...

person Kevin Gallahan    schedule 13.04.2011
comment
Он больше не называется Gumbo с момента его выпуска в прошлом году, а в вашем примере это Flex 3. - person J_A_X; 14.04.2011
comment
Можно ли вообще заставить работать селекторы классов? Я раньше с ними не работал. Gumbo по-прежнему является кодовым названием Flex 4 / 4.1. Герой - это кодовое имя версии 4.5. Эти имена не исчезают просто так после выпуска. - person Kevin Gallahan; 14.04.2011
comment
Кодовые имена используются для продуктов, у которых еще нет окончательного названия или версии. Вы же не слышите, чтобы кто-то называл Windows 7 кодовым именем Longhorn, не так ли? Теперь это Flex 4. Flex 4.5 имеет кодовое название Hero, потому что он еще не доработан. - person J_A_X; 14.04.2011
comment
Я никогда не называл Windows 7 от Longhorn, так как это было кодовое название Windows Vista. Факт остается в силе: когда кто-то говорит (или ссылается на документацию) Gumbo, это всегда будет означать Flex 4. Когда кто-то говорит Hero, это всегда будет иметь в виду Flex 4.5. - person Kevin Gallahan; 14.04.2011