<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" creationComplete="initApp()">
    <mx:Script>
    import flash.external.*;
    public function initApp():void {
        ExternalInterface.addCallback("sendToFlex",getFromJavascript);
    }
    // Called from Javascript
    public function getFromJavascript(s:String):void {
        valueFromJavascript.text = s;
    }
    // Call to Javascript
    public function sendToJavaScript():void {
        ExternalInterface.call("getFromFlex",valueForJavascript.text); 
    }
    public function changeBGColor(event:Event):void {
        ExternalInterface.call("changeBGColor",event.target.selectedColor); 
    }
    </mx:Script>

    <mx:HBox width="100%" height="100%">
        <mx:Label text="Value from Javascript" color="#FFFFFF" fontWeight="bold" />
        <mx:TextInput id="valueFromJavascript" editable="false" />
    </mx:HBox>
    <mx:HBox width="100%" height="100%">
        <mx:TextInput id="valueForJavascript" />
        <mx:Button click="sendToJavaScript()" label="Send to Javascript" />
    </mx:HBox>
    <mx:HBox width="100%" height="100%">
        <mx:Label text="Change html page background" color="#FFFFFF" fontWeight="bold" />        
        <mx:ColorPicker id="colorValue" change="changeBGColor(event);"/>
    </mx:HBox>
</mx:Application>