In a previous example, “Calling JavaScript functions from your Flex applications using the ExternalInterface API”, we saw how we could call JavaScript functions from our Flex application.
The following example shows us how we can return a value from a JavaScript function call and use the data in our Flex application.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/11/returning-values-from-javascript-in-your-flex-applications-using-the-externalinterface-api/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
private function callJavaScript():void {
var keys:Array = "appCodeName,appName,appVersion,cookieEnabled,language,platform,systemLanguage,userAgent,userLanguage".split(",");
var arr:Array = ExternalInterface.call("getNavigatorObject", keys);
dataGrid.dataProvider = arr;
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Button label="Get browser navigator object"
click="callJavaScript();" />
</mx:ApplicationControlBar>
<mx:DataGrid id="dataGrid"
variableRowHeight="true"
width="100%"
height="100%" >
<mx:columns>
<mx:DataGridColumn dataField="key"
width="120" />
<mx:DataGridColumn dataField="value"
wordWrap="true" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
/src/externalInterface.js
// JavaScript
/** http://blog.flexexamples.com/2008/03/11/returning-values-from-javascript-in-your-flex-applications-using-the-externalinterface-api/ */
function getNavigatorObject(keys) {
var arr = [];
var i;
var len = keys.length;
var key;
var value;
for (i=0; i<len; i++) {
key = keys[i];
value = navigator[key];
arr.push({key:key, value:value});
}
return arr;
}
/html-template/index.template.html
<head> ... <script language="JavaScript" src="externalInterface.js"></script> </head>
View source is enabled in the following example.
How to trace a value returned for example
private function callJavaScript():void { var keys:Array = "appCodeName,appName,appVersion,cookieEnabled,language,platform,systemLanguage,userAgent,userLanguage".split(","); var arr:Array = ExternalInterface.call("getNavigatorObject", keys); for (var i:int = 0; iMArcio,
Does calling
trace(arr.appVersion);work after callingExternalInterface.call()?Peter
arr.appVersion: undefined
I’m usign on creationComplete of my mx:Application
private function callJavaScript_BrowserInfo():void { var keys:Array = "appCodeName,appName,appVersion,cookieEnabled,language,platform,systemLanguage,userAgent,userLanguage".split(","); var arr:Array = ExternalInterface.call("getNavigatorObject", keys); trace("arr.appVersion: " + arr.appVersion); dataGrid.dataProvider = arr; if (arr){ for (var i:int = 0; iMArcio,
If you’re using the
creationCompleteevent, it may be a timing issue. With the ExternalInterface API there is never really a guarantee that the Flex app will complete before/after the HTML container its in.What if you try using a timer and putting a delay of say, 2 seconds? (or 4 seconds).
If the code works in that scenario, I would guess its a simple timing issue and the HTML just isn’t fully initialized yet.
Peter
poking around to find out if JS can make a call to a function inside a flex app without flex initiating the interaction. Thoughts?
Thank you so much forthe code examples,
-Nathan
found it - for anyone else looking - you have to register the javascript function and associate it with the internal flex function you wish to call using the following syntax within your flex app:
ExternalInterface.addCallback(”jsFunctionName”, flexFunctionName);
or just try searching this blog (duh), apologies.
http://blog.flexexamples.com/2008/03/11/calling-actionscript-functions-from-your-html-templates-using-the-externalinterface-api/