« Apollo is here!! The Revolution has begun. | Main | Apollo Self Updating Applications »
Apollo ActionScript / JavaScript Bridge
| By Rich Tretola | March 19, 2007 | |
| 6,250 views |
Bridging between JavaScript and ActionScript is very easy with Apollo. The following example will show how to call JavaScript functions from ActionScript and vice-versa. Special thanks to Oliver Merk of New Toronto Group for his contributions towards this example.
The MXML file defines a handler function for the call from JavaScript and then initializes the function when the DOM_INITIALIZE Event is fired. It’s function simply launches an ActionScript Alert. The doHTMLAlert() function calls the JavaScript function that is located within the loaded html file by scoping it as follows:
1 | html.htmlControl.window.calledFromAS(); |
html is the id of the HTML control, htmlControl is the control automatically embedded within mx:HTML and window is the reference to the loaded content. calledFromAS() is defined in the htmlwithJS.html file shown below. Finally htmlwithJS.html also demonstrated a normal JavaScript alert called from itself.
MXML file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?xml version=”1.0″ encoding=”utf-8″?> <mx:ApolloApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”init()”> <mx:Script> <![CDATA[ private var calledFromJSHandlerFunction:Function = calledFromJSHandler; private function init():void{ html.addEventListener(Event.DOM_INITIALIZE, domInitialized); html.location = “htmlwithJS.html”; } private function domInitialized(event:Event):void{ html.htmlControl.window.calledFromJSHandlerFunction = calledFromJSHandlerFunction; } private function calledFromJSHandler():void { mx.controls.Alert.show(”ActionScript called from JavaScript”, “Alert”); } private function doHTMLAlert( ):void { html.htmlControl.window.calledFromAS(); } ]]> </mx:Script> <mx:Button id=”alertBtn” label=”Call JavaScript from ActionScript” click=”doHTMLAlert()” x=”137″ y=”10″/> <mx:HTML id=”html” x=”137″ y=”40″ width=”339″/> <mx:Label x=”10″ y=”12″ text=”Normal MXML Button”/> <mx:Label x=”28″ y=”38″ text=”HTML component”/> </mx:ApolloApplication> |
htmlwithJS.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <script language=”Javascript”> function calledFromAS() { alert(’Hello from ActionScript’); } </script> <body> <input type=”button” value=”Call ActionScript from JavaScript” onclick=”calledFromJSHandlerFunction()” /> <br /> <input type=”button” value=”Normal JavaScriptAlert” onclick=”alert(’Hello from JavaScript’)”> </body> </html> |
JavaScript alert called from ActionScript:
ActionScript Alert called from JavaScript
Topics: Adobe AIR, Tutorials | 6 Comments »
March 19th, 2007 at 8:03 pm
Why do you need the calledFromJSHandlerFunction indirection, why can’t you call calledFromJSHandler directly?
Reply to this comment
March 20th, 2007 at 3:32 am
[...] Apollo ActionScript / JavaScript Köprü uygulaması [...]
March 21st, 2007 at 2:50 am
Rich,
Have you created a localConnection between an Apollo based swf and a swf hosted in a browser? If so, how did you do it? Thanks-b
Reply to this comment
May 30th, 2007 at 1:55 pm
You know what we need…
Video tutorials on how to make flex components. And more video tutorials on how to make them from flash components. Cuz, its kinda tricky at first. Anyone know of any?
Reply to this comment
August 10th, 2007 at 7:16 am
Hi,I used your example but I just get an error in Flex Builder 2 ,and to be more specific,this is all I get:”Error #1006″:”calledFromAS” is not a function.
Can you please answer me ,tx,
yonodo
Reply to this comment
August 10th, 2007 at 11:46 am
Ok,I’ve done it,it seamed that there were some problems in the html format
Reply to this comment