To change the background color of a Flex widget for the background color of HTML page
Problem
It is necessary to implement a widget so that it merged with the HTML page
Solution
JSInterface library will be used.
Detailed explanation
Example of changing of the background of Flex application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout=" absolute "
preinitialize="{preinitializeHandler(event)}"
width=" 150 " height=" 250 " backgroundImage="" >
<mx:Script>
<![CDATA[
import aw.external.JSInterface;
protected function preinitializeHandler(event:Event): void {
JSInterface.initialize();
this .setStyle( 'backgroundColor' , JSInterface.document.bgColor);
}
]]>
</mx:Script>
</mx:Application>
This example can be rewritten using ExternalInterface:
protected function preinitializeHandler(event:Event): void {
this .setStyle( 'backgroundColor' ,
ExternalInterface.call(
'document.bgColor.toString'
)
);
}
In this way you can grab all the styles from the HTML page to change the UI of your application.
Of course, this method will work with the appropriate value of the allowScriptAccess - sameDomain attribute or always, depending on the situation.
Look into attached archive file for example Flex Builder project.
Visit the JSInterface official site.
