PopUpManager is a singleton and hence it lives in the top level application domain. When a component is displayed using the PopUpManager it will try to get its styles via the StyleManager in the top level application domain and so the styles that are defined in your module/sub app will be ignored. In order to provide a solution for this situation some apis were modified to accept a new optional parameter. Via the optional parameter the module factory can be specified (which is then internally used to locate the correct style manager). Some apis that were modified are:

• mx.controls.Alert – show() method was modified to take an optional moduleFactory parameter
• mx.manager.PopUpManager- createPopUp() and addPopUp() methods were modified to take an optional moduleFactory parameter

So if you are defining styles in your modules/sub apps, you should then pass the moduleFactory parameter to these methods. Lets look at some examples:

Following the code for a main app that loads one module(which shows Alert and TitleWindow) and one sub application (which shows ToolTip).

<?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" width="600" height="500" >
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
 
		s|TitleWindow
		{
			chromeColor: #FF0000;
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.managers.PopUpManager;
 
			import spark.components.TitleWindow;
 
			private var placeHolder: PopUpManager;
			private var placeHolder2: TitleWindow;
 
			protected function popup_load_clickHandler(event:MouseEvent):void {
				if(mod_loader_pop.url == null) {
					mod_loader_pop.url = "PopUpModule.swf";
				} else {
					mod_loader_pop.loadModule();
				}
			}
 
			protected function popup_unload_clickHandler(event:MouseEvent):void {
				mod_loader_pop.unloadModule();
			}
 
			protected function toolTip_load_clickHandler(event:MouseEvent):void {
				swfLoader.load("ToolTipSubApp.swf");
			}
 
			protected function toolTip_unload_clickHandler(event:MouseEvent):void {
				swfLoader.unloadAndStop();
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout paddingTop="5" paddingLeft="5" />
	</s:layout>
	<s:HGroup>
		<s:Button id="popup_load" label="Load PopUp Module" click="popup_load_clickHandler(event)"/>
		<s:Button id="popup_unload" label="Unload PopUp Module" click="popup_unload_clickHandler(event)" />
		<s:Button id="toolTip_load" label="Load ToolTip App" click="toolTip_load_clickHandler(event)"/>
		<s:Button id="toolTip_unload" label="Unload ToolTip App" click="toolTip_unload_clickHandler(event)" />
	</s:HGroup>
	<s:HGroup>
		<mx:ModuleLoader id="mod_loader_pop"/>
		<mx:SWFLoader id="swfLoader" />
	</s:HGroup>
</s:Application>

If you notice, the above app sets the chromeColor for the TitleWindow to #FF0000. Also it does not use any Alert.

Let’s look at the code for the module (PopUpModule.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" >
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
 
		s|TitleWindow
		{
			fontSize: 32;
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;
			import spark.components.TitleWindow;
			import mx.controls.Alert;
 
			public var titleWindow: TitleWindow;
 
			protected function btn1_clickHandler(event:MouseEvent):void {
				Alert.show("clicked","module",4,null,null,null,4);
			}
 
			protected function btn2_clickHandler(event:MouseEvent):void
			{
				Alert.show("clicked","module",4,null,null,null,4 , this.moduleFactory);
			}
 
			protected function btn1_1_clickHandler(event:MouseEvent):void {
				titleWindow = PopUpManager.createPopUp(DisplayObject(systemManager),TitleWindow, true, null) as TitleWindow;
				titleWindow.title ="Title Window";
				titleWindow.width = 136;
				titleWindow.addEventListener(CloseEvent.CLOSE, closeMe, false, 0, true); 
			}
 
			protected function btn2_1_clickHandler(event:MouseEvent):void {
				titleWindow = PopUpManager.createPopUp(DisplayObject(systemManager),TitleWindow, true, null, moduleFactory) as TitleWindow;
				titleWindow.title ="Module Title Window";
				titleWindow.width = 426;
				titleWindow.addEventListener(CloseEvent.CLOSE, closeMe, false, 0, true); 
			}
 
			private function closeMe(e:CloseEvent):void {
				PopUpManager.removePopUp(titleWindow);
				titleWindow.removeEventListener(CloseEvent.CLOSE, closeMe);
			}
		]]>
	</fx:Script>
	<s:Panel width="100%" height="100%" title="PopUp Module ">
		<s:layout>
			<s:VerticalLayout paddingTop="5" paddingLeft="5" />
		</s:layout>
		<s:Button label="Show alert" id="btn1" click="btn1_clickHandler(event)" />
		<s:Button label="Show alert (with moduleFactory)" id="btn2" click="btn2_clickHandler(event)" />
		<s:Button label="show title window" id="btn1_1" click="btn1_1_clickHandler(event)" />
		<s:Button label="show title window (with moduleFactory)" id="btn2_1" click="btn2_1_clickHandler(event)" />
	</s:Panel>
</mx:Module>

The module defines the fontSize for the TitleWindow. Also it has two calls to Alert.show() (with and without the moduleFactory parameter). Similarly two calls to PopUpManager.createPopUp() (with and without the moduleFactory parameter). When you run the example code, you will notice the only the Alert and TitleWindow displayed with the moduleFactory parameter are able to pick the correct styles.

Before looking at the running swf, lets also look at the code for the sub application (ToolTipSubApp.mxml):

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" height="200" width="200" 
			   xmlns:s="library://ns.adobe.com/flex/spark">
	<fx:Script>
		<![CDATA[
			import flash.events.MouseEvent;
 
			import mx.core.IToolTip;
			import mx.managers.ToolTipManager;
 
			public var mytoolTip:IToolTip;
 
			protected function panel1_mouseOverHandler(event:MouseEvent):void {
				if(useContext.selected) {
					mytoolTip = ToolTipManager.createToolTip("This is a custom tooltip in a sub App", 100, 100, null,this);
				} else {
					mytoolTip = ToolTipManager.createToolTip("This is a custom tooltip in a sub App", 100, 100, null);					
				}
			}
 
			protected function panel1_mouseOutHandler(event:MouseEvent):void {
				ToolTipManager.destroyToolTip(mytoolTip);
			}
		]]>
	</fx:Script>
	<fx:Style>
		@namespace ns "library://ns.adobe.com/flex/mx";
		@namespace s "library://ns.adobe.com/flex/spark";
 
		ns|ToolTip
		{
			color: blue;
			fontSize: 22;
		}
	</fx:Style>
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
	<s:Panel width="100%" height="90%" mouseOver="panel1_mouseOverHandler(event)" mouseOut="panel1_mouseOutHandler(event)" title="Sub App">
	</s:Panel>
	<s:CheckBox label="pass context" id="useContext" />
</s:Application>

The sub app contains a Panel and a CheckBox, it also contains a style declaration for the ToolTip. When you move the mouse over the panel it displays a tooltip. By default it does not passes the context to the createToolTip method, but when the checkbox is selected it passes the content parameter. In the previous releases the context parameter was not used, but starting from Flex 4 it is being used to locate the current moduleFactory. Only when you pass the context (by selecting the checkbox) the styles for ToolTip defined in the sub app are picked.

Let’s look at the running swf now:

If you load the PopUp Module and click on the “Show alert” button, you would notice that the Alert doesn’t show up with the proper window or title bar. This reason for this broken appearance of Alert is that when the module factory is *not* passed, Alert will try to get its style from the top level style manager. But the main app does not use Alert, so the styles for Alert are not available in the main app. The solution is to pass the moduleFactory to the Alert.show() method. When you click on the “Show Alert (with moduleFactory)” button, you would see an Alert with correct Styles.

Also when you click on the “Show title window” button, you would notice that the title window shows up with chromeColor red but the fontSize style defined in the module is ignored. This reason for this is same (i.e. when the module factory is *not* passed, TitleWindow will try to get its style from the top level style manager. But the main app only sets chromeColor to red, and the modified fontSize style is not available in the main app) . The solution is to pass the moduleFactory to the PopUpManager.createPopUp() method. And when you click on the “Show title window (with moduleFactory)” button, you would see an TitleWindow with correct fontSize and chromeColor.

You would also notice similar behavioral difference when you load the Tool Tip app and play with the tool tip. The ToolTip styles defined in the sub app will only be picked when you pass the context (by selecting the checkbox) to the ToolTipManager.createToolTip() method. Passing the context sets the correct moduleFactory (which is then used to get to the correct style manager).

So, I hope you find this information useful and continue to create awesome looking and mind blowing apps.