Flex Examples » call() http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Getting JavaScript variables into your Flex applications using the ExternalInterface API http://blog.flexexamples.com/2008/04/11/getting-javascript-variables-into-your-flex-applications-using-the-externalinterface-api/ http://blog.flexexamples.com/2008/04/11/getting-javascript-variables-into-your-flex-applications-using-the-externalinterface-api/#comments Sat, 12 Apr 2008 04:46:42 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/11/getting-javascript-variables-into-your-flex-applications-using-the-externalinterface-api/ The following example shows an easy way to get JavaScript variables into your Flex applications without having to write a single line of JavaScript or edit your HTML template using the Flash Player ExternalInterface API.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/11/getting-javascript-variables-into-your-flex-applications-using-the-externalinterface-api/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" [...]]]> The following example shows an easy way to get JavaScript variables into your Flex applications without having to write a single line of JavaScript or edit your HTML template using the Flash Player ExternalInterface API.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/11/getting-javascript-variables-into-your-flex-applications-using-the-externalinterface-api/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function init():void {
                var userAgent:String = ExternalInterface.call("navigator.userAgent.toString");
                Alert.show(userAgent, "navigator.userAgent:");
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Display user agent"
                click="init();" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/11/getting-javascript-variables-into-your-flex-applications-using-the-externalinterface-api/feed/ 9 Returning values from JavaScript in your Flex applications using the ExternalInterface API http://blog.flexexamples.com/2008/03/11/returning-values-from-javascript-in-your-flex-applications-using-the-externalinterface-api/ http://blog.flexexamples.com/2008/03/11/returning-values-from-javascript-in-your-flex-applications-using-the-externalinterface-api/#comments Wed, 12 Mar 2008 01:21:12 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/11/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 [...]]]> 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.

 
]]> http://blog.flexexamples.com/2008/03/11/returning-values-from-javascript-in-your-flex-applications-using-the-externalinterface-api/feed/ 0 Checking to see if the ExternalInterface API is available in Flex http://blog.flexexamples.com/2008/03/10/checking-to-see-if-the-externalinterface-api-is-available-in-flex/ http://blog.flexexamples.com/2008/03/10/checking-to-see-if-the-externalinterface-api-is-available-in-flex/#comments Mon, 10 Mar 2008 16:07:09 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/10/checking-to-see-if-the-externalinterface-api-is-available-in-flex/ The following example shows how you can check to see whether your Flex application is in a container that supports the ExternalInterface API.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/10/checking-to-see-if-the-externalinterface-api-is-available-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.controls.Alert; private function init():void { if (ExternalInterface.available) [...]]]> The following example shows how you can check to see whether your Flex application is in a container that supports the ExternalInterface API.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/10/checking-to-see-if-the-externalinterface-api-is-available-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function init():void {
                if (ExternalInterface.available) {
                    ExternalInterface.call("alert",
                            "ExternalInterface is available");
                } else {
                    Alert.show("ExternalInterface is not available");
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="ExternalInterface.available"
                click="init();" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/10/checking-to-see-if-the-externalinterface-api-is-available-in-flex/feed/ 8 Calling JavaScript functions from your Flex applications using the ExternalInterface API http://blog.flexexamples.com/2008/03/09/calling-javascript-functions-from-your-flex-applications-using-the-externalinterface-api/ http://blog.flexexamples.com/2008/03/09/calling-javascript-functions-from-your-flex-applications-using-the-externalinterface-api/#comments Sun, 09 Mar 2008 17:40:54 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/09/calling-javascript-functions-from-your-flex-applications-using-the-externalinterface-api/ The following example shows how you can call a JavaScript function from your Flex applications using the ExternalInterface class and the static ExternalInterface.call() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/09/calling-javascript-functions-from-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[ private function callJavaScript():void { ExternalInterface.call("sayHelloWorld"); } ]]> </mx:Script> [...]]]> The following example shows how you can call a JavaScript function from your Flex applications using the ExternalInterface class and the static ExternalInterface.call() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/09/calling-javascript-functions-from-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[
            private function callJavaScript():void {
                ExternalInterface.call("sayHelloWorld");
            }
        ]]>
    </mx:Script>

    <mx:Button label="Say 'Hello World'"
            click="callJavaScript();" />

</mx:Application>

Then, in your HTML document, add the following snippet between the <head> and </head> tags:

<script language="JavaScript" type="text/javascript">
    function sayHelloWorld() {
        alert("Hello World, from JavaScript");
    }
</script>

View source is enabled in the following example.

If you are using Flex Builder, you should edit the “index.template.html” document in the /html-template/ folder. This file is used to create the main HTML file in the /bin-debug/ and /bin-release/ folders. If you edit the HTML files in the /bin-debug/ and /bin-release/ folders directly, the changes may get overridden if you clean your project. It is also important to note that your changes to index.template.html may get overwritten if you change your compiler Flex SDK version or change settings in your project’s HTML wrapper (such as changing “Use Express Install” or “Enable integration with browser navigation”.

Or, instead of putting your JavaScript code directly into the HTML page, you may want to put it in an external .JS file and include that file in your HTML file.

/src/scripts.js

function sayHelloWorld() {
    alert("Hello World, from JavaScript");
}

/html-template/index.template.html

<script src="scripts.js" language="JavaScript"></script>

So far, so good, but what if you wanted to pass parameters to the JavaScript function? Well, consider the following JavaScript method:

// JavaScript
function sayString(str) {
    alert(str);
}

The previous JavaScript method takes a single parameter, str, which is a string value which will be displayed using the JavaScript alert() method. If you want to pass a parameter to the custom JavaScript sayString() method from ActionScript, simply pass additional parameters to the static ExternalInterface.call() method, as shown in the following snippet:

// ActionScript 3.0
private function callJavaScript():void {
    ExternalInterface.call("sayString", "Hello World, from ActionScript");
}

OK, your next question may be “That is pretty useful, but that seems like overkill just to use a builtin JavaScript method from Flex. Do I really need to create a custom JavaScript method wrapper for something simple like the alert() method”? And actually, you don’t. The previous JavaScript method (sayString()) could be deleted, and the ActionScript snippet could be simplified to the following:

// ActionScript 3.0
private function callJavaScript():void {
    ExternalInterface.call("alert", "Hello World, from ActionScript");
}
 
]]> http://blog.flexexamples.com/2008/03/09/calling-javascript-functions-from-your-flex-applications-using-the-externalinterface-api/feed/ 25