Pimp Your PHP App with Flex!

Passing Parameters

The most basic way to pass parameters to a Flex application is by adding the parameters to the HTML template which contains our widget. For our example we’ll need to supply three values:

• the URL to an image to be displayed (imageURL)
• a product description (productTitle)
• a link to detailed information about the product (productLink)

We’ll do this by changing the HTML template, which is located in the html-template folder. By default this file contains code to detect the Flash plugin and a link to an installation site in case the client needs to install a Flash plugin. And once we’re finished, it’ll also contain code to pass parameters to our Flex application.

There are two calls to a function, AC_FL_RunContent, in the file. Make sure you use the one that’s used to call your SWF file (the other one is to update the Flash Player if an outdated version was detected). It was around line 77 in my template. This call contains all the parameters passed to the Flex application. In order to pass data to your Flex application, you need to add an additional parameter named flashVars; this parameter can contain several other parameters encoded with HTML URL encoding, like the variables in a GET call. I'm using a free image from stock.xchng by nitewind23, and the image’s detail screen will serve as a product for this demonstration:

} 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}",  
   "allowScriptAccess","sameDomain",  
   "type", "application/x-shockwave-flash",  
   "pluginspage", "http://www.adobe.com/go/getflashplayer",  
   "flashVars", "imageURL=http://www.sxc.hu/pic/m/n/ni/nitewind23/638995_dead_rubber_ducky.jpg&productTitle=Rubber%20duck&productLink=http://www.sxc.hu/photo/638995"  
 );  
 // …  
}

This is enough to make it work if the user has JavaScript enabled in the browser. For users browsing without JavaScript, you’ll also need to add the parameters in the noscript block of the template.

Our application will receive parameters from the HTML template—now we need to tell the application how to use them.

Code in .mxml files has to be placed in a mx:Script block. We’ll add the block after the closing bracket of the mx:VBox:

<mx:Script>  
 <![CDATA[  
   private var linkURL: String ="";  
     
   private function onCreationComplete() : void  
   {  
     setData(  
       application.parameters.imageURL,  
       application.parameters.productTitle,  
       application.parameters.productLink  
     );  
   }  
   private function setData(imageURL: String, productTitle:String, productLink:String) : void  
   {  
     image.source = imageURL;  
     link.label = productTitle;  
     linkURL = productLink;  
   }  
   private function onLinkClicked():void  
   {  
     navigateToURL(new URLRequest(linkURL));  
   }  
 ]]>  
</mx:Script>

The onCreationComplete method reads the parameters that were passed from the HTML file and calls another function, setData, which will populate variables for our code with the parameters we received from the HTML template. Since this method is called as soon as the application is created, we can be sure that our data will be set right at the beginning.

The setData function takes three parameters: imageURL, productTitle, and productLink. We’ll use the imageURL to set the source of the image, and the productTitle can be used to set the label displayed on the link button. The productLink needs to be saved in the linkURL variable we just defined, so we can use it as soon as the user clicks the link.

Finally, the onLinkClicked function will navigate to the link defined in the variable linkURL. We’ll attach that function to the button in the next step.

Let’s go back to the mx:VBox tag we created earlier, and look for the link button. We’ll add a click handler like so:

<mx:LinkButton label="LinkButton" id="link" click="onLinkClicked()"/>

And finally, we need to make all of this happen as soon as the application is loaded. We’ll add a handler to the application, creationComplete, to run our onCreationComplete function just as soon as—you guessed it—the creation of the element is complete. Look for the mx:Application tag at the top, and add the handler:

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

Your complete .mxml file should look like the code in Listing 1.

All done. Hit the Run button and give it a try! The result should look a little like the following: