.NET and Flex Integration

In This article I have tried to describe the integration of Flex Chart with the data that will come from .NET.
This two platformm integration can be done both by HTTP Service and Web Service.I have used HTTP service in this example.
To complete these walkthroughs you will need:
Adobe Flex Builder V2 Beta3 (trial) or Flex SDK V2 Beta3 (free)
Adobe Flash Player V9 Beta3 (free)
Microsoft Visual Web Developer 2005 Express Edition or the .NET V2.0 SDK (both free)
Microsoft Windows

I have taken one dropdown where the user will select a value and a button which will show the report depending on the selected value of the dropdown.The output will be as follows.



Step 1.Create a .NET web site
Open the VS.NET IDE and create a new web site as follows



Step 2.Create a folder "FlexChart" under the root of the web application

Step 3.Add two new webform "Default5.aspx" and "ShowChart.aspx"


Step 4.Modify the aspx page to generate xml output
Open the Default5.aspx page and go to the HTML code.Remove all code except the first line i.e the page directive.add the following tage at the page directive.

ContentType="text/xml"

Now the entire HTML page of Default5.aspx will be as follows

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" ContentType="text/xml" %>

Step 5.Write the server side code which will generate XML

open the cs file of Default5.aspx and write the following code in the page load event.

string strIndicator = (string)Session["Indicator"];
Response.Expires = 0;
if (strIndicator == "1900")
{
Response.Write("<Profit>");
Response.Write("<Rate JAN='3.429' FEB='2.030' MAR='1.761'/>");
Response.Write("<Rate JAN='3.248' FEB='1.975' MAR='1.891'/>");
Response.Write("<Rate JAN='3.206' FEB='1.901' MAR='2.166'/>");
Response.Write("<Rate JAN='3.186' FEB='1.703' MAR='2.014'/>");
Response.Write("<Rate JAN='3.325' FEB='1.616' MAR='2.870'/>");
Response.Write("<Rate JAN='3.431' FEB='1.310' MAR='2.451'/>");
Response.Write("<Rate JAN='3.592' FEB='1.110' MAR='1.546'/>");
Response.Write("<Rate JAN='3.645' FEB='1.274' MAR='0.972'/>");
Response.Write("<Rate JAN='3.756' FEB='1.539' MAR='0.924'/>");
Response.Write("</Profit>");
}
else
{
Response.Write("<Profit>");
Response.Write("<Rate JAN='9' FEB='0' MAR='1'/>");
Response.Write("<Rate JAN='8' FEB='5' MAR='1'/>");
Response.Write("<Rate JAN='6' FEB='1' MAR='6'/>");
Response.Write("<Rate JAN='6' FEB='3' MAR='4'/>");
Response.Write("<Rate JAN='5' FEB='6' MAR='0'/>");
Response.Write("<Rate JAN='1' FEB='0' MAR='1'/>");
Response.Write("<Rate JAN='2' FEB='0' MAR='6'/>");
Response.Write("<Rate JAN='5' FEB='4' MAR='2'/>");
Response.Write("<Rate JAN='6' FEB='9' MAR='4'/>");
Response.Write("</Profit>");
}


Step 6.Create the Flex Application

Create the Flex application Test.mxml using either Flex Builder or Notepad. The HTTPService component retrieves the data from the .NET Web appliction(Default5.aspx) and the LineChart component uses the results of the HTTPService as the data series for the chart:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" backgroundImage="" creationComplete="this.MyService.send();">
<mx:HTTPService id="MyService" url="../FlexChart/Default5.aspx" showBusyCursor="true" />
<mx:LineChart id="myChart" showDataTips="true" dataProvider="{MyService.lastResult.Profit.Rate}" >
<mx:series>
<mx:LineSeries yField="JAN" displayName="JAN" />
<mx:LineSeries yField="FEB" displayName="FEB" />
<mx:LineSeries yField="MAR" displayName="MAR" />
</mx:series>
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false"/>
</mx:verticalAxis>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}" direction="horizontal"/>
</mx:Application>


Step 7.Copy the swf file to the .NET application
Now save your flex application by clicking CTRL+S and copy Test.swf from the flex_bin under root directory.
Save Test.swf file in the FlexChart Folder of your web application

Step 8.Design the page which will show the swf file and take the user input

Open the HTML code of ShowChart.aspx and Modify the body portion as follows

<body>
<form id="form1" runat="server">
<div>
Select Year :
<asp:DropDownList ID="ddlYear" runat="server">
<asp:ListItem>1900</asp:ListItem>
<asp:ListItem>2000</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnOK" runat="server" Text="OK" OnClick="btnOK_Click" /></div>
<table>
<tr id="trGraph" runat="server">
<td align="left" colspan="3">
<fieldset class="fieldset" style="height: 300px; width: 640px;">
<legend class="input-group-label">Report Details</legend>
<div id="divImg1" runat="server" style="overflow: auto; width: 830px; height: 550px;">
<object id="objLeftGraph" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=" http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="830" height="550" align="middle">
<param name="movie" value="../FlexChart/Test.swf" />
<param name="allowScriptAccess" value="always" />
<param name="quality" value="High">
<param name="play" value="True">
<param name="loop" value="False">
<param name="menu" value="False">
<param name="scale" value="Showall">
<embed type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"
align="middle" src="FlexChart/Test.swf" allowscriptaccess="always"></embed>
</object>

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

</script>

</div>
</fieldset>
</td>
</tr>
</table>
</form>
</body>

Step 9.Add EnableEventValidation="false" in the page directive which will show the report

Go to the page directive of ShowChart.aspx and write EnableEventValidation="false" in this directive so that it will look like as follows

<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="ShowChart.aspx.cs"
Inherits="ShowChart" %>

Step 10.Now add a Javascript file "JScript.js" in the FlexChart Folder



Step 11.Set the start page of your web application
Right click on the Show chart .aspx and click on "set as start page"



Step 12.Now run your web application by clicking F5.Click on the OK Button ,you can see the following output depending on the value of the dropdown.


And that's how easy it is.