In some cases, the hosting web page needs to send values into a Flex application. You might do this if you
used server-side code to log in and you want to indicate to the Flex application that the user has loggedin
privileges. You could also use values from the web page to load a specific Flex application state.
Other than working with the External API, there are two main approaches to sending variables into a
SWF file so they can be used in your application:
Using querystring parameters when loading the SWF file
Using flashVars
Let’s start by seeing how to use querystring parameters at the end of the SWF file name.
Using querystring parameters
Querystring parameters are name-value variable pairs that are added at the end of a URL or file name;
for example:
mySWF.swf?userID=1234&admin=true
Once you add these parameters to the end of the SWF file name, they are accessible as variables in
your Flex application. Note that you can’t pass variables in this way to a SWF file that runs inside a
standalone application.
It’s easy to add the querystring variables when you’re embedding the SWF file directly using <object>
and <embed> tags within an HTML page. However, Flex generates a wrapper that hides these tags
within JavaScript. If you’re working with this default wrapper, you need to make modifications in the
html-template folder first.
Modifying the Flex wrapper files
The standard Flex SWF wrapper is created from the AC_OETags.js and index.template.html files in the
html-template folder of your project. You need to modify these template files as they’re used to generate
the hosting HTML page for your SWF file. Make sure you don’t modify the files in the bin folder as
those files can be overwritten each time you compile the SWF file. I’ll show you how to add the parameters
listed previously to the standard wrapper files and then we’ll work through an example.
To add the querystring variables, open the AC_OETags.js file in the html-template folder of your project
and locate the AC_FL_RunContent function. Modify the line that starts with the opening brackets,
adding the querystring variables as shown in bold:
function AC_FL_RunContent(){
var ret =
AC_GetArgs
( arguments, ".swf?userID=1234&admin=true", "movie",➥
"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"➥
, "application/x-shockwave-flash"
);
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
You also open the index.template.html file for your project and locate the <noscript> block at the
end of the page. Modify the following <param> attribute as shown, adding the parameters:
<param name="movie" value="${swf}.swf?userID=1234&admin=true" />
You also need to modify the start of the <embed> attribute:
<embed src="${swf}.swf?userID=1234&admin=true"
Accessing querystring variables in Flex
Once you’ve added the querystring parameters, you have to modify your Flex application file so it can
receive them. To start, you need to declare a variable for each parameter you want to access in the
<mx:Script> block of the MXML file:
private var myVar:String;
You can then assign the parameter value to the variable using the following:
myVar = Application.application.parameters.myVar;
You can do this in a single line of code if you want:
private var myVar:String = Application.application.parameters.myVar;
You might use the loaded variable in a function or bind it to the property of a component.
Let’s work through a simple example so you can see how to use both approaches.
Working through an example
We’ll work through an example using the project we created in the first exercise. Modify the
AC_OETags.js and index.template.html files in the html-template folder of your project, as shown in
the previous section, adding ?userID=1234&admin=true to the end of the SWF file references.
Create a new MXML application called qsVars.mxml. We don’t normally have multiple application files
in a project, but we’ll do so here for simplicity.
Modify the interface so it looks like the following code block:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:HBox x="10" y="10">
<mx:Label text="UserID"/>
<mx:Text id="txtUserID" width="100"/>
<mx:CheckBox label="Admin" id="chkAdmin"/>
</mx:HBox>
</mx:Application>
We’ll display the userID parameter in the Text control, and bind the value of the admin parameter to
the selected property of the chkAdmin CheckBox.
Add the following <mx:Script> block to the application file:
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var userID:int = 0;
[Bindable]
private var isAdmin:Boolean = false;
private function setVars(e:FlexEvent):void{
userID = Application.application.parameters.userID;
isAdmin = Boolean(Application.application.parameters.admin);
txtUserID.text = String(userID);
}
]]>
</mx:Script>
Start by importing the FlexEvent class, as we’ll use the creationComplete event to trigger the population
of the variables. We then create a variable called userID to which we assign a default value of
0. We also create a Bindable Boolean variable called isAdmin with a default value of false. By assigning
default values, we can easily check that we’ve changed the values with the querystring variables.
Notice that we needed to set the data type of the variables appropriately using Boolean and String.
The setVars function assigns the values from the querystring to the new variables. Notice that it
receives a FlexEvent event object as an argument. That’s because we’ll call the function in the
creationComplete event of the <mx:Application> tag. As well as assigning variable values, the
setVars function displays the userID in the txtUserID Text control.
We’ll bind the isAdmin variable to the selected property of the CheckBox. Modify the <mx:CheckBox>
tag as shown here in bold:
<mx:CheckBox label="Admin" id="chkAdmin" selected="{isAdmin}"/>
The final step is to call the setVars function in the creationComplete attribute of the
<mx:Application> tag. This function passes a FlexEvent event, so modify the tag as shown in bold:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="setVars(event)">
The complete code for the application follows:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="setVars(event)">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var userID:int = 0;
[Bindable]
private var isAdmin:Boolean = false;
private function setVars(e:FlexEvent):void{
userID = Application.application.parameters.userID;
isAdmin = Boolean(Application.application.parameters.admin);
txtUserID.text = String(userID);
}
]]>
</mx:Script>
<mx:HBox x="10" y="10">
<mx:Label text="UserID"/>
<mx:Text id="txtUserID" width="100"/>
<mx:CheckBox label="Admin" id="chkAdmin"
selected="{isAdmin}"/>
</mx:HBox>
</mx:Application>
When you run the application, Figure 5-3 shows how the interface will appear, populated with variables
sent from the wrapper.
Figure 5-3. Populating an application
interface using querystring parameters
You can see that it’s easy to send in querystring parameters and use them in your Flex application.
If you’re using the default wrapper, the main challenge is modifying the AC_OETags.js and index.
template.html tags in your html-template folder. The completed files for this example are available
inside folder 5-2 with the other chapter resources.
An alternative approach is to use flashVars to pass variables to your Flex application.
Using flashVars
You can pass variables to a SWF file by setting the flashVars property in both the <object> and
<embed> tags for the file:
<param name='flashVars' value='userID=1234&admin=true'>
<embed flashVars=' userID=1234&admin=true'...
As in the previous section, you need to modify the wrapper files if you’re using the default Flex wrapper.
This time you only need to change the index.template.html file. Add the relevant parameters as
shown here in bold:
AC_FL_RunContent(
"src", "playerProductInstall",
"FlashVars", "userID=1234&admin=true&MMredirectURL="+MMredirectURL+ ➥
'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
You also need to add the parameters in the next else if block in the file:
else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "${swf}",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"flashvars",'userID=1234&admin=true&historyUrl=history.htm ➥
%3F&lconid=' + lc_id + '',
Finally, you need to add them in the <noscript> block as well, as shown in bold:
<noscript>
<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="flashVars" value="userID=1234&admin=true" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
width="${width}" height="${height}" name="${application}"
align="middle" flashVars='userID=1234&admin=true'
You can access the parameters inside the flashVars value in the same way as previously discussed by
using the following:
private var myVar:String = Application.application.parameters.myVar;
The qsVars.mxml application that we completed in the last example will work exactly the same way if
you modify the index.template.html file as shown previously. You can find a completed example
using flashVars in the 5-3 folder with the chapter resources.
You’ve seen two approaches to setting variables inside a Flex application from an external source.
You’ve also learned how to pass variables from Flex to a web page. Both of these approaches are fairly
basic and occur asynchronously—the Flex application or web page can’t respond to the variables
when they’re sent. If you need synchronous communication between ActionScript and JavaScript, you
can use the External API.