Flex 3 Cookbook: Chapter 20, Browser Communication
Pages: 1, 2, 3, 4

Often, you may find it necessary to invoke a JavaScript function to return a value from JavaScript to your Flex application. To return a value from JavaScript to your Flex application, use this:

var result:String = ExternalInterface.call( "simpleJSFunctionWithReturn" );

You can see that the corresponding JavaScript function returns a string value, which will be stored in the result string instance within the ActionScript class:

function simpleJSFunctionWithReturn()
{
    return "this is a sample return value: " + Math.random();
}

Section 20.4: Invoke ActionScript Functions from JavaScript

Problem

You need to invoke ActionScript functions from JavaScript in the HTML containing the Flex application.

Solution

Use ExternalInterface to set up callbacks from JavaScript to Flex and invoke ActionScript functions from JavaScript.

Discussion

The ExternalInterface ActionScript class not only encapsulates everything you need to communicate with JavaScript at runtime, but also includes everything that you need to invoke ActionScript functions from JavaScript.

Before you can invoke ActionScript functions from JavaScript, you need to register callbacks for the ActionScript functions that you want to expose to JavaScript. The callbacks are registered through the ExternalInterface class within ActionScript. Callbacks provide a mapping for JavaScript function calls to actual ActionScript functions.

This example shows you how to register callbacks for three ActionScript functions:

private function registerCallbacks() : void
{
    ExternalInterface.addCallback( "function1", callback1 );
    ExternalInterface.addCallback( "function2", callback2 );
    ExternalInterface.addCallback( "function3", callback3 );
}

The corresponding ActionScript functions for these are as follows:

private function callback1() : void
{
    Alert.show( "callback1 executed" );
}

private function callback2( parameter : * ) : void
{
    Alert.show( "callback2 executed: " + parameter.toString() );
}

private function callback3() : Number
{
    return Math.random()
}

Notice that callback1 is a simple ActionScript function that can be invoked. It does not require any parameters and does not return a value. The function callback2 accepts a single parameter, and the function callback3 returns a randomly generated number.

When you want to invoke these functions from JavaScript, you must call a JavaScript function with the callback alias. The following JavaScript code will show you how to invoke these ActionScript functions that have been exposed:

function invokeFlexFunctions()
{
    var swf = "mySwf";
    var container;
    if (navigator.appName.indexOf("Microsoft") >= 0)
    {
        container = document;
    }
    else
    {
        container = window;
    }
    container[swf].function1();
    container[swf].function2( "myParameter" );
    var result = container[swf].function3();
    alert( result );
}

The variable swf contains the name of the Flex application, as it has been embedded within the HTML page (in this case, it is mySwf). The first thing that this script does is get a reference to the JavaScript DOM, based on the browser type. After the script has the proper browser DOM, it invokes the Flex functions based on the publicly exposed mappings that are specified when registering callbacks.

The ActionScript function callback1 gets invoked simply by calling the function1 callback on the Flex application instance within the JavaScript DOM, as shown:

container[swf].function1();

After this function is invoked, an alert message shows within the Flex application.

The ActionScript function callback2 gets invoked simply by calling the function2 callback and passing a value into it:

container[swf].function2( "myParameter" );

When invoked, this will display an Alert window within the Flex application that shows the parameter value specified by the JavaScript invocation.

The following example shows you how to return a value from Flex to JavaScript. The function3 callback invokes the callback3 ActionScript function. This function returns a randomly generated number to JavaScript.

When callback3 is invoked, a random number is generated by Flex and returned to JavaScript. This value is then displayed in a JavaScript Alert window. For example:

var result = container[swf].function3();
alert( result );

Section 20.5: Change the HTML Page Title via BrowserManager

Problem

You need to change the HTML page title for your Flex 3 application.

Solution

Use the BrowserManager class instance's setTitle method to change the HTML page title.

Discussion

The BrowserManager class in Flex 3 is used to easily interact with the HTML DOM of the HTML page that contains your Flex application. Among its features is the ability to change the title of the HTML page that contains your application. The following ActionScript code snippet sets the page title for you:

private function changePageTitle( newTitle : String ) : void
{
    //get an instance of the browser manager
    var bm : IBrowserManager = BrowserManager.getInstance();

    //initialize the browser manager
    bm.init();

    //set the page title
    bm.setTitle( newTitle );
}

Section 20.6: Parse the URL via BrowserManager

Problem

You need to read and parse data from the browser's current URL.

Solution

Use the BrowserManager and URLUtil classes to read and parse the current page URL.

Discussion

The following example shows you how to read and parse the current page URL by using the BrowserManager and URLUtil classes, as well as write the parsed results to an instance.

The URLUtil class has functions that will help you parse the different pieces of the current URL. When using deep linking within Flex 3, the URL is broken into two parts: the base and the fragment. The URL base is everything that is to the left of the # sign. The fragment is everything that is to the right of the # sign. The fragment is used to pass values into a Flex application and is also used in history management. A properly constructed fragment can be parsed by the URLUtil.stringToObject method into an ActionScript object that contains the values in the fragment, broken out to string values. Each name-value pair in the URL fragment should be delimited by a semicolon (;).

Pages: 1, 2, 3, 4

Next Page