Returning values from JavaScript in your Flex applications using the ExternalInterface API

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.

View MXML

<?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.

0 thoughts on “Returning values from JavaScript in your Flex applications using the ExternalInterface API

  1. 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; i
    
  2. 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; i
    
  3. MArcio,

    If you’re using the creationComplete event, 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

  4. 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

  5. hi peter, this is realy what im looking for.
    simple example, just simple example that explains everything.

    great!