Wednesday, January 6, 2010

Flex, FlashVars and your ASP.NET page

So, I spent some time earlier today researching an issue that I had some trouble finding a straightforward answer for. A current project I am working on is a Flex Application that will be embedded inside an ASP.NET page. I needed for the ASP.NET page to pass some credentials and variables to the Flex Application that will be used to process some data. Seems pretty straightforward, and I know it can be done, I just haven't done it before. My .NET is a bit rusty, and the folks I'm working with have not tried passing variables to a Flex application or Flash file before. Now, I knew this could be accomplished via FlashVars inside an HTML page. The question I had was how to pass dynamic variables into the FlashVars via .NET and utilize those inside my Flex Application.

That particular subject was tougher to track down than I thought. Most of the information I found was using some Visual Studio Add-In tool to display Flash files, or some forum would have a response to try
<%= %>
and see if that worked, without much more detail. Now I realize, that if you are an ASP.NET guy, it makes perfect sense. For those of us with weak ASP foo, I realized that would give me a variable, but how to populate that variable? So I dug around some more, experimented, failed some more and after about 45 minutes of toying around, I found that I could create an asp Label in the ASP page, and use the property to assign variables in my FlashVars. There is a ton of information out there on how to read FlashVars from Actionscript, so I won't bore you with details on that, but I will post my code below. Unfortunately, aspx pages won't work with my hosting, so I can't post a live example, but I think I've made them simple enough that you can figure it out.

My Flex Application that will be compiled as FlashVars.swf
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
addedToStage="init()">
<mx:Script>
<![CDATA[
[Bindable]
private var _name : String;

[Bindable]
private var _session : String;

private function init() : void {
_name = Application.application.parameters.name;
_session = Application.application.parameters.session;
}

]]>
</mx:Script>
<mx:Style>
Label {
fontFamily: Arial;
fontSize: 14;
fontWeight: bold;
}
</mx:Style>
<mx:Label text="Name: { _name }" />
<mx:Label text="Session: { _session }" />
</mx:Application>
Here is what the aspx page looks like.
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
font-family: Arial;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="style1">
<asp:Label ID="Label1" runat="server" Text="My Name: "></asp:Label>
<asp:Label ID="MyName" runat="server" Text="myName"></asp:Label>
</div>
<div class="style1">
<asp:Label ID="Label4" runat="server" Text="Session: "></asp:Label>
<asp:Label ID="SessionLabel" runat="server" Text="Session"></asp:Label>
</div>
<!-- SWF in ASP.NET -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"
width="500" height="500" id="myFlex" viewastext>
<param name=myswf value="swf/FlashVars.swf">
<param name=quality value=autohigh>
<param name=bgcolor value=black>
<param name=”menu” value=”false” />
<param name="FlashVars" value=”init=yes&check=true&name=<%=MyName.Text%>&session=<%=SessionLabel.Text%>&”>
<embed src="swf/FlashVars.swf" flashvars=”init=yes&check=true&name=<%=MyName.Text%>&session=<%=SessionLabel.Text%>&” quality=high bgcolor=#FFFFFF width="30" height="56"
name="myswf" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

</form>
</body>
</html>


Here is the key part from above. This is your FlashVars that has values that are tied to Lables in the asp page whose values are changed from the code-behind. It should be pretty simple to change this with any data you want .NET to pass on.
<param name="FlashVars" value=”init=yes&check=true&name=<%=MyName.Text%>&session=<%=SessionLabel.Text%>&”>

Here is the code-behind for the aspx page.
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.MyName.Text = "odoenet";
this.SessionLabel.Text = Session.SessionID.ToString();
}
}

You can make this label hidden or maybe find a different way to bind your FlashVars. I just found this to be the simplest way to show how it can be done. If someone has a better solution or experience with this, please let me know.

It might also interest some of you to check out this page about passing data to and from .NET web services and Flex applications. I was looking for this to find out how I can pass either an Array or as it turns out an ArrayCollection to a .NET Web Service to update a database.

Again, I realize this isn't ground-breaking material here, but I thought that if I had a tough time finding a straight answer, maybe some else will too and this might help them out.

No comments:

Post a Comment