Home > Flex > Passing QueryString params to Flex 3 Application

Passing QueryString params to Flex 3 Application

You pass request data to Flex applications by defining the flashVars properties in the wrapper. You can also access URL fragments by using the BrowserManager.

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

Passing request data with flashVars properties

You can pass variables to your Flex applications using the flashVars properties in the <object> and <embed> tags in your wrapper. You do this by adding ampersand-separated sets of name-value pairs to these properties.

The following example sets the values of the firstname and lastname in the flashVars properties inside the <object> and <embed> tags in a simple wrapper:

<html>
<head>
<title>/flex2/code/wrapper/SimplestFlashVarTestWrapper.html</title>
<style>
body { margin: 0px;
 overflow:hidden }
</style>
</head>
<body scroll='no'>
<table width='100%' height='100%' cellspacing='0' cellpadding='0'><tr><td valign='top'>

<h1>Simplest FlashVarTest Wrapper</h1>

    <object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' height='100%' width='100%'>
        <param name='src' value='FlashVarTest.swf'/>
        <param name='flashVars' value='firstName=Nick&lastName=Danger'/>
        <embed name='mySwf' src='FlashVarTest.swf' pluginspage='http://www.adobe.com/go/getflashplayer' height='100%' width='100%' flashVars='firstName=Nick&lastName=Danger'/>
    </object>

</td></tr></table>
</body>
</html>

If you are using the wrapper that is generated by the web-tier compiler or Adobe® Flex® Builder™, or one of the wrappers that are included in the /templates directory, your wrapper will probably be very different from the previous example. These wrappers call functions in the AC_OETags.js file to build the <object> and <embed> tag structure in the HTML page. As a result, you pass the flashVars as parameters to the AC_FL_RunContent() function in the wrapper. For a function call that already has a flashVars parameter, you can append your flashVars to the end, as the following example shows:

"FlashVars","MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+'&myName=Danger&myHometown=Los%20Angeles'+"",

If the function parameters do not already include the flashVars variable, then you can insert it in the list, as the following example shows:

AC_FL_RunContent(
    "src", "TestApp",
    "flashVars", "myName=Danger&myHometown=Los%20Angeles",
    "width", "100%",
    "height", "100%",
    "align", "middle",
    "id", "TestApp",
    "quality", "high",
    "name", "TestApp",
    "allowScriptAccess","sameDomain",
    "type", "application/x-shockwave-flash",
    "pluginspage", "http://www.adobe.com/go/getflashplayer"
);

The value of the flashVars properties do not have to be static. If you use JSP to return the wrapper, for example, you can use any JSP expression for the value of the flashVars properties that can be evaluated to a String.

The following example uses the values stored in the HttpServletRequest object (in this case, you can use form or query string parameters):

<html>
<head>
<title>/flex2/code/wrapper/DynamicFlashVarTestWrapper.jsp</title>
<style>
body { margin: 0px;
 overflow:hidden }
</style>
</head>

<%
    String fName = (String) request.getParameter("firstname");
    String mName = (String) request.getParameter("middlename");
    String lName = (String) request.getParameter("lastname");
%>

<body scroll='no'>
<table width='100%' height='100%' cellspacing='0' cellpadding='0'><tr><td valign='top'>

<script>
<h1>Dynamic FlashVarTest Wrapper</h1>
</script>

    <object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' height='100%' width='100%'>
        <param name='src' value='../assets/FlashVarTest.swf'/>
        <param name='flashVars' value='firstname=<%= fName %>&lastname=<%= lName %>'/>
        <embed name='mySwf' src='../assets/FlashVarTest.swf' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' height='100%' width='100%' flashVars='firstname=<%= fName %>&lastname=<%= lName %>'/>
    </object>

</td></tr></table>
</body>
</html>

If your user requests the SWF file directly in the browser, without a wrapper, you can access variables on the query string without providing additional code. The following URL passes the name Nick and the hometown San Francisco to the Flex application:

http://localhost:8100/flex/myApp.swf?myName=Nick&myHometown=Jacksonville

About flashVars properties encoding

The values of the flashVars properties must be URL encoded. The format of the string is a set of name-value pairs separated by an ampersand (&). You can escape special and nonprintable characters with a percent symbol (%) followed by a two-digit hexadecimal value. You can represent a single blank space using the plus sign (+).

The encoding for flashVars properties is the same as the page. Internet Explorer provides UTF-16-compliant strings on the Windows platform. Netscape sends a UTF-8-encoded string to Flash Player.

Most browsers support a flashVars String or query string up to 64 KB (65535 bytes) in length. They can include any number of name-value pairs.

Using the src properties to pass request data

You can append the values of properties to the <object> and <embed> tags’ src properties in the wrapper. The src property identifies the location of the Flex application’s SWF file. You access these the same way that you access flashVars properties.

The following example appends query string parameters to the src properties in the custom wrapper:

<object ... >
    <param name='src' value='TitleTest.mxml.swf?myName=Danger'>
    ...
    <embed src='TitleTest.mxml.swf?myName=Danger' ... />
</object>

Variables you define in this manner are accessible in the same way as flashVars properties.

Accessing the flashVars properties

To access the values of the flashVars properties, you use the Application object’s parameters property. This property points to a dynamic object that stores the parameters as name-value pairs. You can access variables on the parameters object by specifying parameters.variable_name.

In your Flex application, you typically assign the values of the run-time properties to local variables. You assign the values of these properties after the application’s creationComplete event is dispatched. Otherwise, the run-time properties might not be available when you try to assign their values to local variables.

The following example defines the myName and myHometown variables and binds them to the text of Label controls in the initVars() method:

<?xml version="1.0"?>
<!-- wrapper/ApplicationParameters.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initVars()">
  <mx:Script><![CDATA[
     // Declare bindable properties in Application scope.
     [Bindable]
     public var myName:String;
     [Bindable]
     public var myHometown:String;

     // Assign values to new properties.
     private function initVars():void {
        myName = Application.application.parameters.myName;
        myHometown = Application.application.parameters.myHometown;
     }
  ]]></mx:Script>

  <mx:VBox>
  <mx:HBox>
     <mx:Label text="Name: "/>
     <mx:Label text="{myName}" fontWeight="bold"/>
  </mx:HBox>
  <mx:HBox>
     <mx:Label text="Hometown: "/>
     <mx:Label text="{myHometown}" fontWeight="bold"/>
  </mx:HBox>
  </mx:VBox>
</mx:Application>

When a user requests this application with the myName and myHometown parameters defined as flashVars properties, Flex displays their values in the Label controls.

To view all the flashVars properties, you can iterate over the parameters object, as the following example shows:

<?xml version="1.0"?>
<!-- wrapper/IterateOverApplicationParameters.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
  <mx:Script><![CDATA[
     private function init():void {
        for (var i:String in Application.application.parameters) {
           ta1.text += i + ":" + Application.application.parameters[i] + "\n";
        }
     }
  ]]></mx:Script>

  <mx:TextArea id="ta1" width="300" height="200"/>

</mx:Application>

Advertisements
Categories: Flex
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: