Communicating with the wrapper

You exchange data between an Flex application and the HTML page that embeds that application in several ways, depending on the type of integration that your application requires.

About exchanging data with applications

Applications built with Flex generally exist inside larger web applications that control everything from security to state management to the overall look and feel of the website. In this scenario it is important that the application is able to communicate with the surrounding environment, providing a deeper integration with the larger web application. Enabling the application to communicate with the environment provides a method of integration with other technologies such as Ajax.

Often, an application is loaded in a browser within a wrapper. This wrapper is often an HTML page that can include JavaScript or other client-side logic that the application can interact with.

There are several ways to communicate between the surrounding environment and the application; depending on the type of integration required, any combination of flashVars properties, query string parameters, the navigateToURL() method, and the ExternalInterface class can be employed. In addition, you can communicate between two applications on the same page by using SharedObjects.

To pass request data into your applications, you can define flashVars properties inside your HTML wrapper and access their values using the FlexGlobals.topLevelApplication.parameters. For more information, see Passing request data with flashVars properties. Using these techniques, you can personalize an application without requiring a recompilation.

Use the methods of the ExternalInterface API to call the methods of your applications and vice versa. The addCallback() method exposes methods of your application to the wrapper. The call() method invokes a method within the wrapper and returns any results. If the wrapper is HTML, the addCallback() and call() methods enable method invocation between your application and the hosted scripting language running within the browser. For more information, see About the ExternalInterface API.

In some situations, you want to open a new browser window or navigate to a new location. You can do this with the navigateToURL() global function. Although it is not part of the ExternalInterface API, this method is flexible enough to let you write JavaScript inside it, and invoke JavaScript functions on the resulting HTML page. The navigateToURL() method is a global function in the flash.net package.

Related information

Determining the application's URL

Flex provides some simple mechanisms for getting information about the browser and the environment in which the application runs. From within the application, you can get the URL to the SWF file by using the FlexGlobals.topLevelApplication.url property. To access properties of the FlexGlobals class, you must import mx.core.FlexGlobals.

The following example gets the SWF file's URL and extracts the host name from the URL:

<?xml version="1.0" encoding="utf-8"?> 
<!-- wrapper/GetURLInfo.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="getHostName()"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
  <fx:Script> 
    <![CDATA[ 
      import mx.core.FlexGlobals; 
 
      [Bindable] 
      public var g_HostString:String; 
      [Bindable] 
      public var g_ContextRoot:String; 
      [Bindable] 
      public var g_BaseURL:String; 
      private function getHostName():void { 
         g_BaseURL = FlexGlobals.topLevelApplication.url; 
         var pattern1:RegExp = new RegExp("http://[^/]*/"); 
         if (pattern1.test(g_BaseURL) == true) { 
            g_HostString = pattern1.exec(g_BaseURL).toString(); 
         } else{ 
            g_HostString = "http://localhost/" 
         }   
      } 
      ]]> 
    </fx:Script> 
 
  <mx:Form> 
     <mx:FormItem label="Base URL:"> 
        <mx:Label text="{g_BaseURL}"/> 
     </mx:FormItem> 
     <mx:FormItem label="Host Name:"> 
        <mx:Label text="{g_HostString}"/> 
     </mx:FormItem> 
  </mx:Form> 
</s:Application>

You can also use the flash.system.Capabilities class to access information about the client, such as Operating System, Player version, and language.

You can access more information about the browser and the application's environment using the ExternalInterface. For more information, see About the ExternalInterface API.

About the ExternalInterface API

You use the ExternalInterface API to let your application call methods in the wrapper and to allow the wrapper to call functions in your application. The ExternalInterface API consists primarily of the call() and addCallback() methods in the flash.external package.

The following browsers support the ExternalInterface API:

  • All versions of Internet Explorer for Windows (5.0 and later)

  • Embedded custom ActiveX containers, such as a desktop application embedding the Adobe® Flash® Player ActiveX control

  • Any browser that supports the NPRuntime interface (which currently includes the following browsers):

    • Firefox 1.0 and later

    • Mozilla 1.7.5 and later

    • Netscape 8.0 and later

    • Safari 1.3 and later

Before you execute code that uses the ExternalInterface API, you should check whether the browser supports it. You do this by using the available property of the ExternalInterface object in your application. The available property is a Boolean value that is true if the browser supports the ExternalInterface API and false if the browser does not. It is a read-only property.

The following example uses the available property to detect support for the ExternalInterface API before executing methods that use the class:

<?xml version="1.0" encoding="utf-8"?> 
<!-- wrapper/CheckExternalInterface.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="checkEI()"> 
     <s:layout> 
        <s:BasicLayout/> 
     </s:layout> 
     
     <fx:Script> 
        <![CDATA[ 
         [Bindable] 
         public var eiStatus:String; 
 
         private function checkEI():void { 
               eiStatus = ExternalInterface.available.toString(); 
         } 
         ]]> 
     </fx:Script> 
  
     <s:Label id="l1" text="External Interface supported? {eiStatus}"/> 
</s:Application> 

The available property determines only if the browser can support the ExternalInterface API, based on its version and manufacturer. If JavaScript is disabled in the browser, the available property still returns true.

For examples of using the ExternalInterface API with applications, see Using the ExternalInterface API to access JavaScript and Accessing Flex from JavaScript.

In addition to requiring that browsers meet certain version requirements, the ExternalInterface API requires that JavaScript is enabled in the browser. You can use the <noscript> tag in the HTML page to handle a browser with disabled JavaScript. For more information, see Handling browsers that disable JavaScript.

The ExternalInterface API is restricted by the security sandbox in which the SWF file is running. Its use relies on the domain-based security restrictions that the allowScriptAccess and allowNetworking parameters define. You set the values of the allowScriptAccess and allowNetworking parameters in the SWF file's wrapper.

Enabling Netscape connections

In some versions of Netscape browsers, you must set the value of the swliveconnect property to true in your HTML wrapper to enable the application to connect with the page's scripting language (usually JavaScript).

If you are using SWFObject 2 to embed your application, then set the value of the swliveconnect property on the params object to true, as the following example shows:
var params = {}; 
params.swfliveconnect = "true"; 
params.quality = "high"; 
params.bgcolor = "#ffffff"; 
params.allowscriptaccess = "sameDomain";

If your wrapper uses the <object> and <embed> syntax, include swliveconnect=true in the <embed> tag in your wrapper, as the following example shows:

 <embed pluginspage='http://www.adobe.com/go/getflashplayer'  
 	width='300'  
 	height='100' 
 	flashvars='' 
 	src='TitleTest.mxml.swf' 
 	name='MyApp' 
 	swliveconnect='true' 
 />

You are not required to set the value of swliveconnect to true in the <object> tag because the <object> tag is used by Microsoft Internet Explorer, and not by Netscape browsers.

Passing request data with flashVars properties

You pass request data to applications built with Flex by defining the flashVars properties in the wrapper. You can also access URL fragments by using the BrowserManager. For more information, see Passing request data with URL fragments.

The flashVars properties and URL fragments are read in the application at run time. As a result, changing flashVars properties or URL fragments does not require you to recompile the application.

Passing request data with flashVars properties

You add flashVars variables by creating an object called flashvars, setting properties on that object, and then passing that object to the swfobject.embedSWF() method of SWFObject 2.

The following example sets the firstname and lastname properties of the flashvars object, and then passes that object to the embedSWF() method: