Upcoming Changes to Flex Styles (codename:Moxie)

In the last three weeks or so, I’ve been testing the feature work of Jason Szeto who changed the way the styles for many components get passed on to their subcomponents. This “StyleProxy” feature for Flex makes the framework more explicit regarding the styles that are passed through from a component to its subcomponents. Subcomponents used to get all of its styles from its parent component. For example, if you set a style like cornerRadius on a DateChooser, this style was inherited by the nextMonth and prevMonth buttons. This was probably not your intention. You probably only wanted the cornerRadius to affect the DateChooser itself. Just to be clear what some of the “subcomponents” of Components are, here are a few brief examples:

Component Sub-Components
DateField TextField, Button (with calendar icon), DateChooser
MenuBar Sub-menus
Accordion Accordion Headers
NumericStepper TextField, up button, down button
ColorPicker swatch panel

With the changes with this StyleProxy feature, you will be able to explicitly set the styles of these sub-components. Some of the components now have a style filter that specifies which non-inheriting styles will be passed from the parent component to its sub-component. (Inheriting styles have not changed). Here is an example of a style filter in DateChooser:

protected function get nextMonthStyleFilters():Object
return _nextMonthStyleFilters;
}private static var _nextMonthStyleFilters:Object =
“highlightAlphas” : “highlightAlphas”,
“nextMonthUpSkin” : “nextMonthUpSkin”,
“nextMonthOverSkin” : “nextMonthOverSkin”,
“nextMonthDownSkin” : “nextMonthDownSkin”,
“nextMonthDisabledSkin” : “nextMonthDisabledSkin”,
“nextMonthSkin” : “nextMonthSkin”,
“repeatDelay” : “repeatDelay”,
“repeatInterval” : “repeatInterval”

The _nextMonthStyleFilters object specifies the non-inheriting styles that will be passed onto the nextMonth button in a DateChooser. If you want to change what styles get passed to the nextMonth button, you would subclass DateChooser and override this nextMonthStyleFilters getter.

Other components like MenuBar do not use this concept of a style filter, however, the way they handle non-inheriting styles has changed. The sub-menus of a MenuBar will no longer get non-inheriting styles like backgroundColor from its parent MenuBar. Instead, you would need to specify backgroundColor in the “menuStyleName”. In Flex 2.0.1, this will work:

<mx:MenuBar backgroundColor=”0xFF0000″ dataProvider=”{someData}” />

However, in future versions of Flex (codename:Moxie), the backgroundColor set on MenuBar won’t affect the sub-menus. To have the backgroundColor affect the sub-menu, you need to use the menuStyleName style. Here is an example:

.myStyle {
backgroundColor: #FF0000;

<mx:MenuBar menuStyleName=”myStyle” dataProvider=”{someData}” />

Here is a list of Components that are changing:

Component/Container Change to Styles
Accordion The Accordion headers don’t get non-inherited styles like fillColors from the Accordion. Instead, use headerStyleName.
ColorPicker The swatch panel does not get non-inherited styles like columnCount, textFieldWidth, horizontalGap etc. from the ColorPicker anymore. Instead, these styles should be set using the swatchPanelStyleName.
ComboBox The dropdown does not get non-inherited styles set from the ComboBox. Instead, use dropdownStyleName.
DateChooser The nextMonth, prevMonth, nextYear, prevYear buttons and the calendar layout don’t get all of its styles from DateChooser anymore. To use different styles, subclass DateChooser and change the style filters.
DateField The DateChooser pop-up doesn’t get non-inheriting styles from the DateField anymore. Use the dateChooserStyleName instead.
LinkBar The LinkButtons don’t get non-inheriting styles from the LinkBar. Use linkButtonStyleName.
MenuBar The sub-menus no longer get non-inheriting styles like backgroundColor and backgroundAlpha from MenuBar. Use the menuStyleName instead.
NumericStepper Some styles are no longer passed from the NumericStepper to the up button, down button and/or TextField (some examples include borderColor). BorderColor no longer affects the buttons. To change the inherited styles subclass NumericStepper and change the style filters.
TabNavigator Tabs no longer get non-inherited styles from TabNavigator. Instead, use the ‘tabStyleName’.
All PopUps PopUps used to get styles from the parentApplication. PopUps will get styles from their ‘owner’

If you are compiling your Application in the newest version of Flex and you don’t want to have to update your application, you can get the old behavior by compiling your app with the -compatibility-version=2.0.1 argument.

These changes to style behaviors are available for your testing if you want to download a Flex SDK Nightly Build. The check-ins for these changes start at build 174443 and end around changelist 177145.

4 responses

  1. […] just sent me a link to a post by Joan Lafferty, titled Upcoming Changes to Flex Styles (codename:Moxie). Worth a […]

  2. So presumably this will impact the processor-heavy setStyle() method which currently runs through all the sub-components and will allow for better runtime style changes? Or if not, how will this impact setStyle()?

  3. i think this method makes a lot more sence.

  4. […] work anymore. These are mostly due to the Style Proxy changes that I described in a different post: Upcoming Changes to Flex Styles. These styles include items like columnCount, horizontalGap and backgroundColor for a ColorPicker. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: