my journey with flex: Passing arguments to SWC using flashVars

· If you are using the generated wrapper from Flash Builder, then 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.

Main Topics

· Normal Method.

· Passing through JSP page (two cases).

· Passing through PHP page.

· Passing via browser.

· Retrieval from Flex end.

Normal Method.

· Here I explain an example which add two properties to flashvars object (name,home) directly.

· Then passes that object to the embedSWF() method.

var swfVersionStr = "10.0.0";

var xiSwfUrlStr = "playerProductInstall.swf";

var flashvars = {};

flashvars.name = "Rohit";

flashvars.home = "Sunshine";

var params = {};

params.quality = "high";

params.bgcolor = "#ffffff";

params.allowscriptaccess = "sameDomain";

var attributes = {};

attributes.id = "TestProject";

attributes.name = "TestProject";

attributes.align = "middle";

swfobject.embedSWF("FlashVarTest.swf", "flashContent", "100%", "100%",
swfVersionStr,xiSwfUrlStr, flashvars, params, attributes);

swfobject.createCSS("#flashContent", "display:block;text-align:left;");

</script>

· If your wrapper uses the <object> and <embed> tags, you can pass variables to your applications by 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.

· Here is an example with the flashvars properties mentioned above.

<html>

<head>

<title>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' height

='100%' width='100%'>

        <param name='src' value='FlashVarTest.swf'/>

        <param name='flashVars' value='name=Rohit&home=Sunshine'/>

        <embed name='mySwf' src='FlashVarTest.swf' height='100%' width='100%'

        flashVars='name=Rohit&home=Sunshine'/>

    </object>

</td></tr></table>

</body>

</html>

Passing through JSP page (case 1).

· In this case we are passing the value via JSP page. (ie, use JSP to return the wrapper)

· The value of the flashVars properties do not have to be static.

· Here we add the property ‘variableInFlexSide’ to flashvars object.

· In this case JSP expression for the value of the flashVars properties that can be evaluated to a String.

var swfVersionStr = "10.0.0";

var xiSwfUrlStr = "playerProductInstall.swf";

var flashvars = {};

flashvars.variableInFlexSide = ${variableName};

var params = {};

params.quality = "high";

params.bgcolor = "#ffffff";

params.allowscriptaccess = "sameDomain";

var attributes = {};

attributes.id = "TestProject";

attributes.name = "TestProject";

attributes.align = "middle";

swfobject.embedSWF("SampleProject.swf", "flashContent", "100%", "100%",
swfVersionStr,xiSwfUrlStr, flashvars, params, attributes);

swfobject.createCSS("#flashContent", "display:block;text-align:left;");

</script>

    <object id='SampleProject' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000    ' height='100%' width='100%'>

        <param name='src' value=' SampleProject.swf'/>

        <param name='flashVars' value='variableInFlexSide = ${variableName}'/>

        <embed name='SampleProject' src='SampleProject.swf' height='100%'

         width='100%' flashVars='variableInFlexSide = ${variableName}'/>

    </object>

Passing through JSP page (case 2)..

· Another case using JSP to return the wrapper.

· The following example uses the values stored in the HttpServletRequest object.

· In this case, you can use form or query string parameters

<%

  String variableName = (String) request.getParameter("firstname");

%>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>

        <title>DynamicFlashVarTestWrapper.jsp</title>

        <script type="text/javascript" src="swfobject.js"></script>

var swfVersionStr = "10.0.0";

var xiSwfUrlStr = "playerProductInstall.swf";

var flashvars = {};

    flashvars.variableInFlexSide = "<%= variableName %>";

var params = {};

params.quality = "high";

params.bgcolor = "#ffffff";

params.allowscriptaccess = "sameDomain";

var attributes = {};

attributes.id = "TestProject";

attributes.name = "TestProject";

attributes.align = "middle";

swfobject.embedSWF("SampleProject.swf", "flashContent", "100%", "100%",
swfVersionStr,xiSwfUrlStr, flashvars, params, attributes);

swfobject.createCSS("#flashContent", "display:block;text-align:left;");

</script>

</head>

    <body>

        <div id="flashContent"/>

   </body>

</html>

Passing through PHP page.

· Here we use PHP expressions to pass query string parameters in a wrapper.

<html lang="en">

<head>

<?php

    @ $variableName= $_GET['firstname'];

?>

<script type="text/javascript" src="swfobject.js"></script>

var swfVersionStr = "10.0.0";

var xiSwfUrlStr = "playerProductInstall.swf";

var flashvars = {};

    flashvars.variableInFlexSide = "<?php echo $variableName; ?>"

var params = {};

params.quality = "high";

params.bgcolor = "#ffffff";

params.allowscriptaccess = "sameDomain";

var attributes = {};

attributes.id = "TestProject";

attributes.name = "TestProject";

attributes.align = "middle";

swfobject.embedSWF("SampleProject.swf", "flashContent", "100%", "100%",
swfVersionStr,xiSwfUrlStr, flashvars, params, attributes);

swfobject.createCSS("#flashContent", "display:block;text-align:left;");

</script>

</head>

<body >

    <div id="flashContent">

</body>

</html>

Passing via browser.

· If we requests the SWF file directly in the browser, without a wrapper,

· We can access variables on the query string without providing additional code in the wrapper (because there is no wrapper).

· The following URL passes the value of variable

        http://localhost:8100/flex/SampleProject.swf?variableInFlexSide=Rohit

·         If we want to pass more than one variable.

http://localhost:8100/flex/SampleProject.swf?variableInFlexSide=Rohit&another VariableInFlexSide=Raj

Retrieval from Flex end.

· To access the values of the flashVars properties, we want to use FlexGlobals object’s topLevelApplication.parameters property.

· We want to assign the values of these properties after the Application’s creationComplete event is dispatched.

· Otherwise, the run-time properties might not be available when we try to assign their values to local variables.

· The following example defines the variableInFlexSide and binds them to the text of Label controls in the initFlashVars () method:

<?xml version="1.0" encoding="utf-8"?>

<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="initFlashVars()">

<fx:Script>

<![CDATA[

import mx.core.FlexGlobals;

/**

* Declare bindable properties in Application scope.

[Bindable]

public var localVariable:String;

/**

* Assign values to new properties.

private function initFlashVars():void

{

localVariable
=FlexGlobals.topLevelApplication.parameters.variableInFlexSide;

}

]]>

</fx:Script>

<s:HGroup>

<s:Label text="Varible Value : "/>

<s:Label text="{localVariable}"

fontWeight="bold"/>

</s:HGroup>

</s:Application>

my journey with flex

Friday, January 21, 2011

Passing arguments to SWC using flashVars

No comments:

Post a Comment