StyleManager now implements IStyleManager2. If you recompile your Flex 3 app using Flex 4 SDK, you will get deprecation warnings because all static methods of StyleManager class except for getStyleManager() have been deprecated. In order to get rid of the deprecation warnings, you will need to use the StyleManager instance. You can either get the StyleManager instance using the getStyleManager() method or change StyleManager to styleManager (notice the lower case ’s’). mx.core.UIComponent now has a new public property called styleManager which is a reference to your current StyleManager.

Also StyleManager now has a new method called getMergedStyleDeclaration() which can be used to get the merged style declarations (both declared in the current style manager and those inherited from the parent style managers). One thing to be aware of with this method is that CSSStyleDeclaration obtained via this method can not be used to modify style values. In order to modify style values, you will have to obtain CSSStyleDeclaration using the getStyleDeclaration() method.

Lets look at an example:
Here is the code for an application that defines Style for a spark List (specifically it defines the borderColor and fontSize).

<?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" minWidth="1024" minHeight="768" creationComplete="application1_creationCompleteHandler(event)">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
 
		s|List
		{
			borderColor: #0000FF;
			fontSize: 16;
		}
	</fx:Style>
 
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayList;
			import mx.events.FlexEvent;
			import spark.components.TextInput;
                        // The following two lines (import and var declaration for PopUpManager) are to make sure that PopUpManager gets sucked into the app. Since PopUpManager
                        //  is a singleton, its definition should be available in the main app
                        // Otherwise module will throw an RTE when ColorPicker is used.
			import mx.managers.PopUpManager;			
			private var ph:PopUpManager;
 
			private var arr:Array =
			[
				{ label:'Apple', data:10.00},
				{ label:'Banana', data:15.00 },
				{ label:'Melon', data:3.50 },
				{ label:'Kiwi', data:7.65},
				{ label:'Strawberry',data:12.35 },
				{ label:'Other', data:00.00}
			];
 
			private var listArr :ArrayList = new ArrayList(arr);
 
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				appList.dataProvider = listArr;
			}
 
			public function iniit():void
			{
				mod_loader.url = "ModifyCSSDeclarationModule.swf";
			}
 
			public function unload():void
			{
				mod_loader.unloadModule();
				mod_loader.url = "";
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"/>
	</s:layout>
	<s:HGroup id="hgroupContainer" paddingLeft="5">
			<s:List id="appList"  />
			<mx:ModuleLoader id="mod_loader" />
	</s:HGroup>
	<s:Button label="Load Module" click="iniit()" />
	<s:Button label="UnLoad Module" click="unload()" />
</s:Application>

Below is the code for the module (ModifyCSSDeclarationModule.mxml) loaded by the app:

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
		   xmlns:s="library://ns.adobe.com/flex/spark" 
		   xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="module1_creationCompleteHandler(event)">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
 
		s|List
		{
			fontStyle: italic;
			color: #FF0000;
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayList;
			import mx.events.FlexEvent;
 
			private var arr:Array =
				[
					{ label:'Apple', data:10.00},
					{ label:'Banana', data:15.00 },
					{ label:'Melon', data:3.50 },
					{ label:'Kiwi', data:7.65},
					{ label:'Strawberry',data:12.35 },
					{ label:'Other', data:00.00}
				];
 
			private var listArr :ArrayList = new ArrayList(arr);
			private var myStyleManager: IStyleManager2;
 
			protected function module1_creationCompleteHandler(event:FlexEvent):void
			{
				moduleList.dataProvider = listArr;
				myStyleManager = StyleManager.getStyleManager(this.moduleFactory);	
			}
 
			public function modifyStyleValue(  ):void
			{
				var cssDecl:CSSStyleDeclaration = myStyleManager.getStyleDeclaration("spark.components.List");
				cssDecl.setStyle("color", colorPicker.value);
				cssDecl.setStyle("borderColor", colorPicker.value);
			}
 
			public function modifyMergedStyleValue( ):void
			{
				var cssDecl:CSSStyleDeclaration = myStyleManager.getMergedStyleDeclaration("spark.components.List");
				cssDecl.setStyle("borderColor", colorPicker.value);
				cssDecl.setStyle("color", colorPicker.value);
			}
		]]>
	</fx:Script>
	<s:List id="moduleList"  />
	<s:Label text="Choose Color" />	
	<mx:ColorPicker id="colorPicker" />
 
	<s:Button id="localButton" label="Modify Styles" click="modifyStyleValue( )" />
	<s:Button id="mergedButton"  label="Modify Merged Styles" click="modifyMergedStyleValue( )" />
</mx:Module>

The module code above tries to modify the styles (color, and borderColor) for the spark List. You can use the color picker to pick in the new color. If you press the “Modify Styles” button, the style values will get updated because modifyStyleValue() method obtains CSSStyleDeclaration via the getStyleDeclaration() method.
But if you press the “Modify Merged Styles” button, the setStyle() calls will fail silentely because CSSStyleDeclaration (in modifyMergedStyleValue) is obtained via getMergedStyleDeclaration().

Here is the running swf:

The feature for Per-Module Style Management was done to allow modules and sub applications to be able to manage their own styles. With this feature StyleManager will no longer be a singleton and as a result that will allow modules and sub applications to have their own instances of StyleManager.

Modules and sub applications will continue to inherit styles from the parent application/module. But only the style properties not defined by the child modules or sub applications will trickle down (i.e. child module/application will be able to override a style property defined by the parent). There will also be merging of styles properties.

To understand this better, lets take a look at a sample. Following is the code for a parent application:

<?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" minWidth="1024" minHeight="768" creationComplete="application1_creationCompleteHandler(event)">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
 
		global {
			chromeColor: #DDAA66;	
		}
 
		s|DropDownList
		{
			fontStyle: italic;
		}
 
		s|Button#gumboButton
		{
			fontStyle: italic;
		}
 
		s|Panel s|Label
		{
			fontStyle: italic;
		}
 
		s|Button.myStyle
		{
			fontStyle: italic;
		}
 
		s|HGroup s|RichText
		{
			fontStyle: italic;
		}
 
		.classOfStyle
		{
			fontStyle: italic;
		}
 
	</fx:Style>
 
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.collections.ArrayList;
			import mx.events.ModuleEvent;
			import mx.events.StyleEvent;
			import mx.controls.Alert;
 
			private var arr:Array =
				[
					{ label:'Apple', data:10.00},
					{ label:'Banana', data:15.00 },
					{ label:'Melon', data:3.50 },
					{ label:'Kiwi', data:7.65},
					{ label:'Strawberry',data:12.35 },
					{ label:'Other', data:00.00}
				];
 
			private var listArr :ArrayList = new ArrayList(arr);
 
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				appList.dataProvider = listArr;
			}
 
			public function load():void
			{
				if(mod_loader.url == null)
				{
					mod_loader.url = "LoadStylesModule.swf";	
				}
				else
				{
					mod_loader.loadModule();
				}
 
			}
 
			public function unload():void
			{
				mod_loader.unloadModule();
			}
 
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
	<s:HGroup>
		<s:VGroup id="groupId">
			<s:VGroup >
				<s:CheckBox id="checkBox" label="Check Box" />
				<s:Label text="Label Outside Panel"  />
			</s:VGroup>
			<s:HGroup rotation="10">
				<s:NumericStepper id="numericStepper" stepSize="1" minimum="1" maximum="10" />
				<s:RichText text="This Text is Rich !!" />
			</s:HGroup>
			<s:RichText text="This Text is also Rich !!" />
			<s:Panel title="Gumbo Panel" id="appPanel" rotation="-5">
				<s:layout>
					<s:VerticalLayout />
				</s:layout>
				<s:Button id="gumboButton" label="Gumbo Button"  />
				<s:Button id="gumboButton2" label="Second Gumbo Button" styleName="myStyle"  />
				<s:Label text="Spark Label"  />
				<s:Label text="Spark Label class selector" styleName="classOfStyle"  />
				<s:DropDownList id="appList"  />
			</s:Panel>
		</s:VGroup>	
		<mx:ModuleLoader id="mod_loader"/>
	</s:HGroup>
 
	<s:Button label="Load Module" click="load()" />
	<s:Button label="Unload Module" click="unload()" />
</s:Application>

If you notice, the above code defines a bunch of styles. It sets the chrome color to DDAA66 in the global selector and it sets the fontStyle to italic using various selectors (class, Id, Type, descendant).

Now let’s take a look at the code of the module (LoadStylesModule.mxml):

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
		   xmlns:s="library://ns.adobe.com/flex/spark" 
		   xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="module1_creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayList;
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			import mx.events.StyleEvent;
 
			private var arr:Array =
				[
					{ label:'Apple', data:10.00},
					{ label:'Banana', data:15.00 },
					{ label:'Melon', data:3.50 },
					{ label:'Kiwi', data:7.65},
					{ label:'Strawberry',data:12.35 },
					{ label:'Other', data:00.00}
				];
 
			private var listArr :ArrayList = new ArrayList(arr);
 
			protected function module1_creationCompleteHandler(event:FlexEvent):void
			{
				moduleList.dataProvider = listArr;
				localStyleManager  = StyleManager.getStyleManager(this.moduleFactory);
			}
 
			private var localStyleManager:IStyleManager2 = null;
 
			public var eventDispatcher:IEventDispatcher = null;
			protected function loadStylesButton_clickHandler(event:MouseEvent):void
			{
 
				eventDispatcher = localStyleManager.loadStyleDeclarations("testStyles.swf");
			}
 
			protected function unloadStylesButton_clickHandler(event:MouseEvent):void
			{
				localStyleManager.unloadStyleDeclarations("testStyles.swf");
			}
		]]>
	</fx:Script>
	<s:VGroup>
		<s:CheckBox id="checkBox" label="Check Box Module" />
		<s:Label text="Label Outside Panel"  />
		<s:HGroup rotation="-10">
			<s:NumericStepper id="numericStepper" stepSize="1" minimum="1" maximum="10" />
			<s:RichText text="This Text is Rich Module !!" />
		</s:HGroup>
		<s:RichText text="This Text is also Rich !!" />
		<s:Panel title="Gumbo Module Panel" id="appPanel" rotation="-5">
			<s:layout>
				<s:VerticalLayout />
			</s:layout>
 
			<s:Button id="gumboButton" label="Gumbo Module Button"  />
			<s:Button id="gumboButton2" label="Second Gumbo Module Button" styleName="myStyle"  />
			<s:Label text="Spark Module Label"  />
			<s:Label text="Spark Label Module class selector" styleName="classOfStyle"  />
			<s:ComboBox id="moduleList" height="24" width="147" />
		</s:Panel>
	</s:VGroup>	
	<mx:Button label="Load styles" id="loadStylesButton" click="loadStylesButton_clickHandler(event)" />
	<mx:Button label="Unload styles" id="unloadStylesButton" click="unloadStylesButton_clickHandler(event)" />
</mx:Module>

The code for the module above does not define any styles. So what that means is that it will inherit the styles from the parent app. It will have the chrome color of DDAA66 for all components and also the font styles will be italic. So far that’s all normal and boring stuff. Now you probably also noticed that the module loads a styles declaration swf (which is a css compiled to a swf), and when you load the styles swf you will see the magic of per-module style management. The module will override style definition for some properties (originally defined in the main app) and for other properties styles merging will happen.

Here is the code for the css (testStyles.css):

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
 
s|DropDownList
{
	borderColor: #FF0000;
	fontSize: 16;
}
 
s|Button#gumboButton
{
	chromeColor: #AAFFAA;
	fontSize: 16;
}
 
s|Panel s|Label
{
	fontSize: 16;
}
 
s|Button.myStyle
{
	chromeColor: #FFFFAA;
	fontSize: 14;
}
 
s|HGroup s|RichText
{
	chromeColor: #BBAAAA;
	fontSize: 14;
}
 
.classOfStyle
{
	color: #0FFFFA;	
	fontSize: 20;
}

Here is the running swf:

Click on the “Load Module” button to load the module. Once the module is loaded, notice the chrome color of most components is the same as in the parent app and the font is italicized for most components – this shows that the module inherits styles from the parent app. Now click on the “Load styles” button in the module, once the styles swf is loaded you can notice that the font size changes for most components but the fonts in the module are still italicized – this shows styles merging because we were only overriding the fontSize in the css and not the fontStyle property. Also notice the new chrome color for components in the module, its now different from the global chrome color (DDAA66). So the module is able to override the styles properties it chooses.

So, hopefully you find this short introduction useful. Stay tuned for more on this.. And if you want me to write about something else, please say so with your comments (which btw are welcome )

All developers using Flex 3.5 are encouraged to upgrade to Flex 3.5a. You can download this new build from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3

Also if you are using a Flex build older than Flex 3.5 then you are definitely encouraged to upgrade and try the latest builds. The milestone builds contain many bug fixes..

We are always interested in hearing from you, regarding the feedback. Also if you run into any bugs you can log them at http://bugs.adobe.com/jira

But if you have already tried it, you would have noticed that now ActionScript and MXML editors show ASDoc documentation when you hover over variables/method/class names. See screen shot below:

This means that you can now see the documentation as you are writing code. You can see the method/variable signature or any other documentation associated with any of the class elements. And for all this you don’t need to open the language reference in a separate browser window or search for the documentation.

Behind the scenes Flash Builder pulls this information from the Flex SDK swc files and the ASDoc info is stored in XML files inside the SWC files. For all nightly builds of Flex SDK, the swcs will come with these ASDoc XML files. In case you want to add similar ASDoc XML files to your custom swcs, you can do that too. Currently there is no single command to generate swc with ASDoc XML files, it is done in three simple steps. And the three steps are:

1. Generate SWC
2. Generate doc XML Files using ASDoc tool
3. Update SWC with doc XML fIles

I hope you already know how to generate a swc file. If not, take a look at http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_22.html
In order to generate the doc XML files using ASDoc tool, you will have to run the asdoc tool using -keep-xml=true and -skip-xsl=true
A swc file is a compressed file, so to update it (with doc XML files) you can simply use a zip command.

For reference, you can also look at the build.xml file in the framework project of the Flex SDK. Following is the “doc” target which performs step #2 and #3:

<target name="doc" depends="clean-temp-docs" description="updates framework.swc with asdoc xml">
		<!-- Load the <asdoc> task. We can't do this at the <project> level -->
		<!-- because targets that run before flexTasks.jar gets built would fail. -->
		<taskdef resource="flexTasks.tasks" classpath="${FLEX_HOME}/lib/flexTasks.jar"/>
 
	    <condition property="asdoc.jvm.args" value="-Xmx384m">
	        <os family="windows"/>
	    </condition>
 
	    <condition property="asdoc.jvm.args" value="-Xmx512m">
	        <os family="mac"/>
	    </condition>
 
	    <condition property="asdoc.jvm.args" value="-Xmx512m">
	        <os family="unix"/>
	    </condition>
 
		<!-- Call asdoc to generate dita xml files -->
		<asdoc output="${FLEX_HOME}/tempDoc" lenient="true" failonerror="true" keep-xml="true" skip-xsl="true" fork="true">
		    <compiler.source-path path-element="${basedir}/src"/>
		    <doc-classes class="FrameworkClasses"/>
		    <doc-namespaces uri="http://www.adobe.com/2006/mxml"/>
		    <namespace uri="http://www.adobe.com/2006/mxml" manifest="${basedir}/manifest.xml"/>
		    <jvmarg line="${asdoc.jvm.args}"/>
		</asdoc>
 
		<!-- updates framework.swc with asdoc xml -->
		<zip destfile="${FLEX_HOME}/frameworks/locale/en_US/framework_rb.swc" update="true">
		    <zipfileset dir="${FLEX_HOME}/tempDoc/tempdita" prefix="docs">
			    <include name="*.*"/>
				<exclude name="ASDoc_Config.xml"/>
				<exclude name="overviews.xml"/>
		    </zipfileset>
		</zip>
	</target>

So give it a try, and if you find any bugs you can log them at http://bugs.adobe.com/flex

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