How to manage styles for child components?

Question

How does one define a default style for a custom Flex component? was a good start, but I want to create custom styles for my custom component which contains other components.

The custom component is a Canvas. It contains other Canvases, Buttons, Lists, etc. I do not want to have the child components use the same values as the parent component, and I want to have some style values "jump" the parent component and only affect a specific child (not all of them).

I would like to have a single CSS definition with values for the parent and each of the subcomponents rather than a separate style for each.

Can I have style values in the CSS files that are not actually standard CSS (e.g. buttonCornerRadius, mainPaneBackgroundColor, actionBitmap) ?

Where should I propagate the styles to the child components? this.updateDisplayList() ?

How would I know if the values changed via setStyle or loading a new CSS file (as StyleManager does not have events) ?

Thanks

Answer 1

The more granular way would be to add CSS to each child, but this is a maintenance and readability nightmare.

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

A less granular way would be to create each child as a Class, and add CSS to each Class file, but this still isn't wonderful.

You could also set the styles for each type of child component (List, ComboBox, Button, et al) in a master CSS:

List {
    dropShadowEnabled: true;
    paddingTop: 10;
}

However, if you will have different styles for the same type of components, you have a couple options.

You could give each child a styleName, and then set the styles in the master CSS:

CustomerSelectionForm.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
    <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"&gt;
    <mx:List styleName="companyList" dataProvider="{companies}" />
</mx:Form>

styles.css:

.customerList {
    backgroundColor: "0xDFE8FF";
}

.companyList {
    backgroundColor: "0x74ADE7";
}

Or, you could create each child as a custom Class, and then reference the Class in a master CSS.

CustomerList.mxml:

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

CompanyList.mxml:

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

styles.css:

CustomerList {
    backgroundColor: "0xDFE8FF";
}

CompanyList {
    backgroundColor: "0x74ADE7";
}

This method is especially useful if you building components dynamically, or reuse specific types of components. I use this method a lot, especially since these custom Classes can also contain Class-specific business logic.

Answer 2

As a Flex component developer, I try to do what the Flex team does in the framework: Expose styleName styles for each of the children you want to style separately. You can even chain them together. As an example directly from the framework, ComboBox has a dropdownStyleName style for the drop-down list, and List has a verticalScrollBarStyleName for it's vertical scroll bar.

ComboBox
{
    dropdownStyleName: myComboDropdownStyles;
}

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

.myVScrollBarStyles
{
    borderColor: #8686a4;
}