Call An Adobe Flex/actionscript Method From Javascript?
I need to know why JavaScript can't talk back to Flex. I have a project that is going to use JavaScript to play a given video file. Its running on a custom MVC framework where asse
Solution 1:
I had the same issue, in the link provided by Chris Cashwell it shows the base for the solution.
Flex MXML
<?xml version="1.0" encoding="utf-8"?><s:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"xmlns:mx="library://ns.adobe.com/flex/mx"creationComplete="init()"><fx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.external.ExternalInterface;
private function init():void {
consoleLog("Hello World");
try
{
Security.allowDomain("*"); //I need to add this.
ExternalInterface.marshallExceptions = true;
ExternalInterface.addCallback("sendAlert",sendAlert);
ExternalInterface.call("initCallBack");
} catch (error:Error) {
consoleLog("Error in ExternalInterface");
consoleLog("Error" + error.message);
}
}
public function sendAlert(s:String):void
{
Alert.show(s);
}
public function consoleLog(message:String):void {
if (ExternalInterface.available) {
ExternalInterface.call(
"function log(msg){ if (window.console) { console.log(msg); } }",
message);
}
}
]]>
</fx:Script><s:Panelid="panel1"title="Hello World"x="20"y="20"><s:layout><s:HorizontalLayoutpaddingLeft="10"paddingRight="10"paddingTop="10"paddingBottom="10"gap="5" /></s:layout><s:TextAreaid="textarea1"width="300"height="100"text="Hello World" /></s:Panel></s:Application>HTML
<!DOCTYPE HTML><htmllang="en-US"><head><metacharset="UTF-8"><title>Hello World</title><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script><scripttype="text/javascript">var flexApp;
functioninitCallBack() {
flexApp = document.getElementById("HelloWorldFlex");
if (flexApp != undefined) {
try {
flexApp.sendAlert( "Hello World" );
} catch(err) {
console.log("There was an error on the flex callback.");
console.log(err);
}
} else {
console.log("The flex object does not exist yet");
}
return;
}
$(function(){
HelloWorld = function(){
return {
init : function() {
var swfVersionStr = "10.1.0";
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {
bridgeName : "flex",
};
var params = {};
var attributes = {};
params.allowscriptaccess = "always";
params.quality = "high";
params.bgcolor = "#FFFFFF";
params.allowfullscreen = "true";
attributes.id = "HelloWorldFlex";
attributes.name = "HelloWorldFlex";
attributes.align = "left";
swfobject.embedSWF(
"HelloWorld.swf",
"flash-content",
"100%", "100%",
swfVersionStr, xiSwfUrlStr, flashvars, params, attributes );
}
}
}();
HelloWorld.init();
});
</script><styletype="text/css">#flash-content-container {
width : 400px;
height : 300px;
}
</style></head><body><divid="layout"><divid="header"><h1>Hello World</h1></div><divid="flash-content-container"><divid="flash-content"></div></div></div></body>I tested it on Flex 4.1, please notice that i had to add the bin-debug folder (C:\flexworkspaces\project\bin-debug) to the flash security app ( http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.htmlconfiguration ) Please notice that this internet URL is in fact an app that modifies the Flex local configuration.
The logs can be displayed in the Firebug console.
Solution 2:
Decided to go with FABridge. For others heres a working example.
MXML
<?xml version="1.0" encoding="utf-8"?><s:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"xmlns:mx="library://ns.adobe.com/flex/mx"xmlns:bridge="bridge.*"creationComplete="init()"><fx:Declarations><bridge:FABridgebridgeName="flex" /></fx:Declarations><fx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.external.ExternalInterface;
private function init():void {
consoleLog("Hello World");
}
public function sendAlert(s:String):void
{
Alert.show(s);
}
public function consoleLog(message:String):void {
if (ExternalInterface.available) {
ExternalInterface.call(
"function log(msg){ if (window.console) { console.log(msg); } }",
message);
}
}
]]>
</fx:Script><s:Panelid="panel1"title="Hello World"x="20"y="20"><s:layout><s:HorizontalLayoutpaddingLeft="10"paddingRight="10"paddingTop="10"paddingBottom="10"gap="5" /></s:layout><s:TextAreaid="textarea1"width="300"height="100"text="Hello World" /></s:Panel></s:Application>HTML
<!DOCTYPE HTML><htmllang="en-US"><head><metacharset="UTF-8"><title>Hello World</title><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script><scripttype="text/javascript"src="bridge/FABridge.js"></script><scripttype="text/javascript">var flexApp;
var initCallback = function() {
flexApp = FABridge.flex.root();
var textarea1 = flexApp.getTextarea1();
textarea1.setText( "Hello World (Updated)" );
flexApp.sendAlert( "Hello World" );
return;
}
$(function(){
HelloWorld = function(){
return {
init : function() {
var swfVersionStr = "10.1.0";
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {
bridgeName : "flex",
};
var params = {};
var attributes = {};
params.allowscriptaccess = "sameDomain";
params.quality = "high";
params.bgcolor = "#FFFFFF";
params.allowfullscreen = "true";
attributes.id = "HelloWorld";
attributes.name = "HelloWorld";
attributes.align = "left";
swfobject.embedSWF(
"HelloWorld.swf",
"flash-content",
"100%", "100%",
swfVersionStr, xiSwfUrlStr, flashvars, params, attributes );
FABridge.addInitializationCallback( "flex", initCallback );
}
}
}();
HelloWorld.init();
});
</script><styletype="text/css">#flash-content-container {
width : 400px;
height : 300px;
}
</style></head><body><divid="layout"><divid="header"><h1>Hello World</h1></div><divid="flash-content-container"><divid="flash-content"></div></div></div></body></html>
Post a Comment for "Call An Adobe Flex/actionscript Method From Javascript?"