Styles, Themes, and the stricter Compiler

In Flex 3, the styles defined using the [Style] metadata were validated by the flex compiler, but styles defined in css files were not validated..

Flex 4 has multiple themes:

1. Spark: The default theme for Flex 4. It contains the skins for Spark and MX Components
2. Halo: The default theme for MX components (if you set -compatibility-version=3.0.0)

Some style can be valid for only one theme but not the other. So if an app uses such a style(valid for one a specific theme), the style won’t work if the theme is switched. This could lead to confusion. To help avoid such situation the Flex 4 compiler is stricter than then Flex 3 compiler.

Flex 4 compiler now validates the styles against the theme.

So for example, if you have an app like:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<mx:Button label="Hello World !!" borderColor="#FF0000" />	
</s:Application>

Compiling it with the Flex 4 will generate an error like: Error: The style ‘borderColor’ is only supported by type ‘mx.controls.Button’ with the theme(s) ‘halo’.

If however, you had specified the “borderStyle” using an external css file or the <Style> block , for example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Style>
		@namespace mx "library://ns.adobe.com/flex/mx";
 
		mx|Button#buttonId
		{
			borderColor: #FFFF00;
		}
	</fx:Style>
	<mx:Button label="Hello" id="buttonId" /><mx:Button label="World" />		
</s:Application>

Compiling it with the Flex 4 would generate a warning like: Warning: The style ‘borderColor’ is only supported by type ‘mx.controls.Button’ with the theme(s) ‘halo’.

So the rule is “error if invalid style specified inline”, and “warning if invalid style is specified using css/<Style> block”

The recommended way of resolving these warnings/errors is to update the code.

But there may be situations where you would want to re-use some of the components written for your flex 3 apps into the flex 4 apps. If for some reason you can not update those components, you can make use of the newly introduced compiler switches (and buy yourself some time)

The new switches are:

1. -report-invalid-styles-as-warnings: this can be used if your app specified styles inline, and those styles are not valid for the current theme. The default value for this is false, and setting it to true will enables reporting of invalid styles as warnings.
2. show-invalid-css-property-warnings: this can be used if you app specified styles using the css files/<Style> block, and those styles are not valid for the current theme. The default value for this is false, and this switch can be used to toggle whether invalid css property warnings are reported.

You can download the latest nightly builds for Flex 4 from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4