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

Question

Как определить стиль по умолчанию для пользовательского компонента Flex? было хорошим началом, но я хочу создать пользовательские стили для своего пользовательского компонента, который содержит другие компоненты.

Пользовательский компонент - Canvas. Он содержит другие холсты, кнопки, списки и т. Д. Я не хочу, чтобы дочерние компоненты использовали те же значения, что и родительский компонент, и я хочу, чтобы некоторые значения стилей «перепрыгивали» из родительского компонента и влияли только на конкретного дочернего элемента ( не все из них).

Я хотел бы иметь одно определение CSS со значениями для родителя и каждого из подкомпонентов, а не отдельный стиль для каждого.

Могу ли я иметь значения стилей в файлах CSS, которые на самом деле не являются стандартными CSS (например, buttonCornerRadius, mainPaneBackgroundColor, actionBitmap)?

Где я должен распространять стили на дочерние компоненты? this.updateDisplayList ()?

Как узнать, изменились ли значения через setStyle или загрузить новый файл CSS (поскольку у StyleManager нет событий)?

Спасибо

Answer 1

Более детальным способом было бы добавить CSS каждому дочернему элементу, но это кошмар обслуживания и читаемости.

<mx:List dataProvider="{companies}" dropShadowEnabled="true" paddingTop="10" paddingBottom="10" paddingRight="5" paddingLeft="15" backgroundColor="0xDFE8FF"/>

Менее детальным способом было бы создать каждого дочернего элемента в качестве класса и добавить CSS в каждый файл класса, но это все же не удивительно.

Вы также можете установить стили для каждого типа дочернего компонента (List, ComboBox, Button и др.) В главном CSS:

List {
    dropShadowEnabled: true;
    paddingTop: 10;
}

Однако, если у вас будут разные стили для однотипных компонентов, у вас есть пара вариантов.

Вы можете присвоить каждому потомку styleName, а затем установить стили в главном CSS:

CustomerSelectionForm.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:List styleName="customerList" dataProvider="{customers}" />
</mx:Form>


CompanySelectionForm.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:List styleName="companyList" dataProvider="{companies}" />
</mx:Form>

styles.css:

.customerList {
    backgroundColor: "0xDFE8FF";
}

.companyList {
    backgroundColor: "0x74ADE7";
}

Или вы можете создать каждого дочернего элемента как пользовательский класс, а затем ссылаться на этот класс в главном CSS.

CustomerList.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:List>

CompanyList.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:List>

styles.css:

CustomerList {
    backgroundColor: "0xDFE8FF";
}

CompanyList {
    backgroundColor: "0x74ADE7";
}

Этот метод особенно полезен, если вы создаете компоненты динамически или повторно используете компоненты определенных типов. Я часто использую этот метод, тем более что эти пользовательские классы могут также содержать бизнес-логику, специфичную для класса.

Answer 2

Как разработчик компонента Flex, я стараюсь делать то, что делает команда Flex в рамках: раскрывать стили styleName для каждого дочернего элемента, который вы хотите стилизовать отдельно. Вы даже можете связать их вместе. Как пример непосредственно из фреймворка, ComboBox имеет стиль dropdownStyleName для раскрывающегося списка, а List имеет verticalScrollBarStyleName для вертикальной полосы прокрутки.

ComboBox
{
    dropdownStyleName: myComboDropdownStyles;
}

.myComboDropdownStyles
{
    backgroundColor: #c4c4ff;
    verticalScrollBarStyleName: myVScrollBarStyles;
}

.myVScrollBarStyles
{
    borderColor: #8686a4;
}