Calendar

February 2008
M T W T F S S
« Jan   Mar »
 123
45678910
11121314151617
18192021222324
2526272829  

Tag Cloud

Categories

Archives

Highest Rated

Most Viewed

Recent Posts

Recent Comments


« AIR HTML Control | Main | Simple Drag and Drop into AIR »

AIR ActionScript / JavaScript Bridge

By Rich Tretola | February 25, 2008Print This Post Print This Post
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5 out of 5)
Loading ... Loading ...
239 views

Bridging between JavaScript and ActionScript is very easy with AIR. 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 when it was an Apollo sample.

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.htmlLoader.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. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
  3.     layout="absolute" creationComplete="init()">
  4.     <mx:Script>
  5.     <![CDATA[
  6.         private var calledFromJSHandlerFunction:Function = calledFromJSHandler;
  7.         private function init():void{
  8.             html.addEventListener(Event.HTML_DOM_INITIALIZE, domInitialized);
  9.             html.location = "htmlwithJS.html";
  10.         }
  11.         private function domInitialized(event:Event):void{
  12.             html.htmlLoader.window.calledFromJSHandlerFunction = calledFromJSHandlerFunction;
  13.         }
  14.         private function calledFromJSHandler():void {
  15.             mx.controls.Alert.show("ActionScript called from JavaScript", "Alert");
  16.         }
  17.         private function doHTMLAlert( ):void {
  18.             html.htmlLoader.window.calledFromAS();
  19.         }
  20.     ]]>
  21.     </mx:Script>
  22.     <mx:Button id="alertBtn" label="Call JavaScript from ActionScript"
  23.         click="doHTMLAlert()" x="137" y="10"/>
  24.     <mx:HTML id="html" x="137" y="40" width="339"/>
  25.     <mx:Label x="10" y="12" text="Normal MXML Button"/>
  26.     <mx:Label x="28" y="38" text="HTML component"/>
  27. </mx:WindowedApplication>

htmlwithJS.html

  1. <html>
  2.     <script language="Javascript">
  3.         function calledFromAS() {
  4.             alert('Hello from ActionScript');
  5.         }
  6.         </script>
  7.     <body>
  8.         <input type="button"
  9.             value="Call ActionScript from JavaScript"
  10.             onclick="calledFromJSHandlerFunction()" />
  11.         <br />
  12.         <input type="button"
  13.             value="Normal JavaScriptAlert"
  14.             onclick="alert('Hello from JavaScript')">
  15.     </body>
  16. </html>

JavaScript alert called from ActionScript:

asjs1.jpg

ActionScript Alert called from JavaScript

asjs2.jpg

Share/Save/Bookmark

Topics: Adobe AIR |

One Response to “AIR ActionScript / JavaScript Bridge”

  1. jagdish Says:
    August 7th, 2008 at 1:43 am

    nice one.. but can u plz help me in finding client ip address using flex3 and javascript????
    very urgent………………
    thanx in advance

    [Reply to this comment]

Comments