Flex Widgets - Inheritance of styles - css

Question

I have a main application (Flex 4.6), in which I intend to use any number of widgets. The widgets are .swf files (s:Module OR s:Application, Flex 4.6).
My problem is that the loaded widget does NOT inherit the styles of the application which is using it.
To put it briefly, I load the widget as an .swf file from the sever (using URLLoader class). After downloading it, I create the instances of the widgets (whereas a single widget can be cointained in the main application on several various places - multiply).
In the main application, the following CSS file is used:
<fx:Style source="css/common.css" />
common.css content is:
s|TextInput {
contentBackgroundColor: #9FD1F2;
focusColor: #8FD7F9;
skinClass: ClassReference("skins.textInputTestSkin");
}
s|Label {
color: #2211FF;
}
And this is how I create and load the widgets:
private var bytesLoader:Loader = null;
public var loadedApp:SystemManager = null;
public var loadedModule:Module = null;
...
bytesLoader.addEventListener(Event.COMPLETE, onBytesLoaderComplete);
var context:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
bytesLoader.loadBytes(urlLoader.data, context);
...
private function onBytesLoaderComplete(e:Event):void {
var dataContent:DisplayObject = bytesLoader.content;
//(Application)
if(dataContent && (dataContent is SystemManager)) {
loadedApp = dataContent as SystemManager;
loadedApp.addEventListener(FlexEvent.APPLICATION_COMPLETE,appWidgetCreationComplete);
appHolder.addChild(dataContent);
} else if(dataContent is IFlexModuleFactory) {
//(Module)
var moduleLoader:LoaderInfo = LoaderInfo(e.target);
moduleLoader.content.addEventListener("ready", moduleWidgetReadyHandler);
}
}
private function moduleWidgetReadyHandler(e:Event):void {
var factory:IFlexModuleFactory = IFlexModuleFactory(e.target);
if(factory) {
loadedModule = factory.create() as Module;
if(loadedModule) {
this.addElement(loadedModule);
}
}
}
My question is first, in what way can I apply the styles of the parents on the widget and secondly(s:Module), in what way is it possible for me to apply the styles of the parents on the widget (s:Application).
UPDATE 1
If I change getter moduleFactory (as seen below) in every single of the widgets, the styles are set just right. Meaning the textInput in the widget (Module and Application) has the same skin as in the main application.
override public function get moduleFactory():IFlexModuleFactory {
return FlexGlobals.topLevelApplication.moduleFactory;
}
It's workaround? It's good solution?

Answer 1

Ok, here is a solution:
Add before bytesLoader.loadBytes(urlLoader.data, context);
//init - moduleFactory
bytesLoader.contentLoaderInfo.addEventListener(Event.INIT, onContentLoaderInfoInit);
private function onContentLoaderInfoInit(e:Event):void {
if(bytesLoader && bytesLoader.contentLoaderInfo) {
bytesLoader.contentLoaderInfo.removeEventListener(Event.INIT, onContentLoaderInfoInit);
}
var loaderInfo:LoaderInfo = LoaderInfo(e.target);
loaderInfo.content.addEventListener(Request.GET_PARENT_FLEX_MODULE_FACTORY_REQUEST, onGetParentModuleFactoryRequest);
}
private function onGetParentModuleFactoryRequest(r:Request):void {
if(isGlobalStyleAllowed) {
if ("value" in r) {
r["value"] = FlexGlobals.topLevelApplication.moduleFactory;
}
}
//remove eventListener
if(bytesLoader && bytesLoader.contentLoaderInfo) {
var loaderInfo:LoaderInfo = LoaderInfo(bytesLoader.contentLoaderInfo);
loaderInfo.content.removeEventListener(Request.GET_PARENT_FLEX_MODULE_FACTORY_REQUEST, onGetParentModuleFactoryRequest);
}
}
It's works.