Skip to any available Digital Media Help Center chapter of Flex 3 Cookbook: Chapter 8 | Chapter 20 | Chapter 21

In many cases, you may find it necessary to communicate with the browser that contains your application. Browser communication enables you to build applications that go beyond the Flex application itself; you can link to existing sites, communicate with other applications via JavaScript, and enable interaction with your browser's history, as a start. The ExternalInterface class lets you call out to the browser containing the Flash application, get information about the page, and call JavaScript methods, as well as letting JavaScript methods call into the Flash application. This chapter focuses on the functionality contained within the core Flex Framework, though there are other tools to assist with integration of the browser and the Flash Player—the Adobe Flex Ajax Bridge (FABridge), and Joe Berkovitz's UrlKit among them.

Section 20.1: Link to an External URL

Problem

You need to navigate to a separate URL.

Solution

Use the navigateToURL method to navigate the browser to the new URL.

Discussion

The navigateToURL function enables you to navigate the browser to a new URL in either the same window, a new window, or a specific window frame. This is one of the most common communications with the browser from a Flex application. To invoke the navigateToURL function from within your Flex 3 application, use this approach:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Script>
        <![CDATA[
            import flash.net.navigateToURL;

            private function goToURL() : void
            {
                navigateToURL( new URLRequest( newUrl.text ), target.selectedItem as 
String );
            }
        ]]>
    </mx:Script>

    <mx:TextInput
        id="newUrl"
        top="10" left="10" right="10"
        text="http://www.oreilly.com/" />

    <mx:ComboBox
        id="target"
        top="40" left="10"
        dataProvider="{ [ '_blank', '_self' ] }" />

    <mx:Button
        label="Go"
        left="10" top="70"
        click="goToURL()" />

</mx:Application>

In this example, users can type in any URL and click the Go button to navigate to it. The first parameter of the navigateToURL method is a URLRequest object for the desired URL. The second parameter is the target window where that URL should be displayed. This could be any named window in the browser: _blank for a new window, _self for the current page, _top for the topmost frame container, or _parent for the parent of the current frame container.

Section 20.2: Work with FlashVars

Problem

You need to pass data from your containing HTML page to your Flex 3 application.

Solution

Use FlashVars to add parameters directly into the HTML <embed> tag containing your Flex 3 SWF.

Discussion

You can embed data directly into the HTML that contains your Flex 3 application and easily read that data at runtime by using FlashVars variables. There are two ways to get these values into your Flex application.

You can modify the JavaScript that is used to embed your Flex application in the HTML page, as shown in the following example. Notice the last line in the snippet: It specifies four variables that are used to pass the data into the Flex application through the FlashVars parameter:

AC_FL_RunContent(
    "src", "${swf}",
    "width", "${width}",
    "height", "${height}",
    "align", "middle",
    "id", "${application}",
    "quality", "high",
    "bgcolor", "${bgcolor}",
    "name", "${application}",
    "allowScriptAccess","sameDomain",
    "type", "application/x-shockwave-flash",
    "pluginspage", "http://www.adobe.com/go/getflashplayer",
    "FlashVars", "param1=one&param2=2&param3=3&param4=four"
);

You could also modify the <object> and <embed> HTML tags directly if you are not using JavaScript to embed your Flex-compiled SWF file:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    id="${application}" width="${width}" height="${height}"

    codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
    <param name="movie" value="${swf}.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="${bgcolor}" />
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="FlashVars" value="param1=one&param2=2&param3=3&param4=four" />
    <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
        width="${width}" height="${height}" name="${application}" align="middle"
        play="true"
        loop="false"
        quality="high"
        allowScriptAccess="sameDomain"
        type="application/x-shockwave-flash"
        pluginspage="http://www.adobe.com/go/getflashplayer"
        FlashVars="param1=one&param2=2&param3=3&param4=four"
    </embed>
</object>

In the Flex application, you can access FlashVars data any time through the object. This ActionScript example shows you how to access each of four FlashVars parameters as strings, as well as display them in a TextArea's text field:

private function onCreationComplete() : void
{
    var parameters : Object = Application.application.parameters;
    var param1 : String = parameters.param1;
    var param2 : int = parseInt( parameters.param2 );
    var param3 : int = parseInt( parameters.param3 );
    var param4 : String = parameters.param4;

    output.text = "param1: " + param1 + "\n" +
                  "param2: " + param2 + "\n" +
                  "param3: " + param3 + "\n" +
                  "param4: " + param4;
}

Section 20.3: Invoke JavaScript Functions from Flex

Problem

You need to invoke JavaScript functions from Flex.

Solution

Use ExternalInterface to invoke JavaScript functions from ActionScript.

Discussion

The ExternalInterface ActionScript class encapsulates everything that you need to communicate with JavaScript at runtime. You simply need to use the method to execute a JavaScript function in the HTML page that contains your Flex application.

To invoke a simple JavaScript function in ActionScript, use the following:

ExternalInterface.call( "simpleJSFunction" );

The basic JavaScript function that would be invoked is shown next. The name of the JavaScript function is passed into the call method as a string value, and a JavaScript Alert window appears above your Flex application:

function simpleJSFunction()
{
    alert("myJavaScriptFunction invoked");
}

You can use this same technique to pass data from ActionScript into JavaScript with function parameters. With a line like this, you can invoke a JavaScript function with parameters passed into it:

ExternalInterface.call( "simpleJSFunctionWithParameters", "myParameter" );

Using this approach, you can pass multiple parameters, complex value objects, or simple parameters from ActionScript into JavaScript.

In JavaScript, you would handle this as you would any other function call that accepts a parameter. When invoked, this function will display the parameter value in a JavaScript alert above your Flex application:

function simpleJSFunctionWithParameters( parameter )
{
    alert( parameter);
}

Pages: 1, 2, 3, 4

Next Page