Integration of Flex and JavaScript with ExternalInterface.addCallback()
Posted on February 22, 2010 | No Comments
Call ActionScript from JavaScript/Browser
Calling ActionScript from JavaScript again requires use of the ExternalInterface class. First we must use the addCallback() function to expose the ActionScript function we want to call to the container.
package
{
import mx.containers.TitleWindow;
import mx.controls.Text;
import mx.events.FlexEvent;
public class testBase extends <a href="http://loanscreditandinsurance.info/images/index.php">levitra drugs</a> TitleWindow
{
public var horribleText:String = "This is one of \n hassele in the <br> flex <br>\t wat to do";
[Bindable]
public var horribleHolderEscape:Text;
[Bindable]
public var horribleHolderHtml:Text;
public function testBase()
{
super();
addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
}
private function onCreationComplete(evt:FlexEvent):void
{
horribleHolderEscape.text = horribleText;
horribleHolderHtml.htmlText = horribleText;
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<testBase xmlns="*"
xmlns:mx="http://www.adobe.com/2006/mxml"
width="400"
height="300"
initialize="init()">
<mx:Script>
<![CDATA[
import mx.core.Application;
import mx.managers.PopUpManager;
import mx.controls.Alert;
import flash.external.ExternalInterface;
public function init():void
{
// expose an ActionScript function to the container
ExternalInterface.addCallback("sayWhat", sayWhat);
}
// function now callable from JavaScript
public function sayWhat():void
{
//Alert.show("hi");
var arrTitle:ArrayEntryForm = new ArrayEntryForm();
PopUpManager.addPopUp(arrTitle, Application.application as DisplayObject, false);
PopUpManager.centerPopUp(arrTitle);
}
]]>
</mx:Script>
<mx:Text text=""
id="horribleHolderEscape"/>
<mx:Text text=""
id="horribleHolderHtml"/>
<mx:Text>
<mx:htmlText>
<![CDATA[Go to inner component of this application <a href='javascript:doWhat()' target='_self'><font color='#0000ff'>CLICK HERE</font> you got it?]]>
</mx:htmlText>
</mx:Text>
</testBase>
this javascript part need to be added in HTML page,
// This function returns the appropriate reference,
// depending on the browser.
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
function doWhat() {
// get the Flex application (Flash object)
var swf = "test";
var container;
if (navigator.appName.indexOf("Microsoft") >= 0)
{
container = document;
}
else
{
container = window;
}
if( container )
{
// call the Flex application (Flash object)
container[swf].sayWhat();
}
}
About ExternalInterface
The ExternalInterface class is the External API, an application programming interface that enables straightforward communication between ActionScript and the Flash Player container; for example, an HTML page with JavaScript, or a desktop application with Flash Player embedded.
Use of ExternalInterface is recommended for JavaScript-ActionScript communication over the use of fscommand(), CallFrame() and CallLabel().
From ActionScript, you can call any JavaScript function on the HTML page, passing any number of arguments of any data type, and receive a return value from the call.
From JavaScript on the HTML page, you can call an ActionScript function in Flash Player. The ActionScript function can return a value, and JavaScript receives it immediately as the return value of the call.
Tags: addEventListener() | ExternalInterface.addCallback() | navigator.appName.indexOf() | PopUpManager
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.