Tuesday, April 18, 2006

Integrating Flex and .NET - Part 2: Using XML Attributes

Part 1 explained how to create a simple Flex application that displays a chart of the US growth rate where the data for the chart is supplied by a .NET servlet. This post shows how to modify the application so that the chart also shows the growth rates for the Euro zone and Japan. To do this we'll use XML attributes in the servlet.

The finished Flex application, which shows the growth rates for the three economic areas, looks like this.



Step 1: Create a new Servlet in Visual Studio

The first step is to create a new
servlet to provide the HTTP response to the Flex application's HTTP request. The servlet will be an new web form in the same ASP.NET project you created in Part 1. To add a new form, right-click the project name in Solution Explorer and selecting Add New Item..., Web Form. Name the new form Rates.aspx.




Step 2: Modify the Servlet's ASPX Page to remove the HTML

As we did in
Part 1, the next step is to remove all the HTML elements from the servlet's ASPX page. When you create a new web form using Visual Studio it inserts template HTML that we don't need for an XML servlet. Leave the page directive element in place (the line enclosed by the <%@ Page %> tags) but strip out everything else. Add ContentType="text/xml" to the page directive. The finished Rates.aspx page should look like this.

<%@ Page Language="c#" ContentType="text/xml"
CodeFile="Rates.aspx.cs" Inherits="Rates" %>

Step 3: Modify the Servlet's Code Behind to generate the XML

The next step is to add code to the servlet's Page_Load event handler in the servlet's code behind file to generate the required XML programatically. Again we'll just use ASP.NET's Response.Write() to write XML literals directly to the HTTP response stream. Add the following code in bold to Rates.aspx.cs

using System;
 
public partial class Rates : System.Web.UI.Page
{
private void Page_Load(object sender, EventArgs e)
{
Response.Write( "<GrowthRates>" ) ;
Response.Write( "<Rate US='3.429' Euro='2.030' Japan='1.761'/>" );
Response.Write( "<Rate US='3.248' Euro='1.975' Japan='1.891'/>" );
Response.Write( "<Rate US='3.206' Euro='1.901' Japan='2.166'/>" );
Response.Write( "<Rate US='3.186' Euro='1.703' Japan='2.014'/>" );
Response.Write( "<Rate US='3.325' Euro='1.616' Japan='2.870'/>" );
Response.Write( "<Rate US='3.431' Euro='1.310' Japan='2.451'/>" );
Response.Write( "<Rate US='3.592' Euro='1.110' Japan='1.546'/>" );
Response.Write( "<Rate US='3.645' Euro='1.274' Japan='0.972'/>" );
Response.Write( "<Rate US='3.756' Euro='1.539' Japan='0.924'/>" );
Response.Write( "</GrowthRates>" ) ;

}
}

Step 4: Test the Servlet with IE

You can test that the servlet generates the XML you're expecting by hitting F5 in Visual Studio. This will launch IE. You should see the following screen.




Step 5: Create the Flex Application with Flex Builder

Modify the Flex application from Part1. Change the HTTPService to use the new ASP.NET servlet http://localhost/GrowthServlet/Rates.aspx which will provide the datafor the chart. The Flex application's MXML file should look like this.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*" backgroundColor="white"
creationComplete="this.servlet.send();
">
 
<mx:HTTPService id="servlet"
url="http://localhost/GrowthServlet/Rates.aspx"/>
 
<mx:LineChart showDataTips="true" dataProvider="{servlet.result.GrowthRates.Rate}" >
 
<mx:series>
<mx:LineSeries yField="US" displayName="US" />
<mx:LineSeries yField="Euro" displayName="Euro" />
<mx:LineSeries yField="Japan" displayName="Japan" />
</mx:series>
 
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" name="Change"/>
</mx:verticalAxis>
 
</mx:LineChart>

</mx:Application>

The finished application should look like the following figure with lines for the US, Euro zone and Japanese growth rates.



And that's how easy it is.

Saturday, April 08, 2006

Lack of Support for ISO 8601 Dates in Flex

It appears that Flex2 Beta2's Date.parse() doesn't accept date strings in ISO 8601 format. For example, Date.parse('2004-03-03') doesn't work. Since all databases understand date literals in ISO 8601, dates are commonly in that format when they're serialized as strings. This is particularly problematic in Flex2 Beta2 since Date.parse() is the method that's called by default by the charting component mx.charts.DateTimeAxis. If anyone knows whether this will be addressed before GA I'd be interested to know.

Wednesday, April 05, 2006

Integrating Flex and .NET - Part 1: Writing a .NET Servlet

Adobe Flex is a new application development technology for rich internet applications (RIA). RIA applications are internet because, like traditional web applications, they run in a browser but are rich because they provide a richer user experience than traditional web applications. Like Ajax applications, Flex applications don't need to do postbacks to change their state but unlike Ajax they're not constrained to render everything in HTML. Flex also includes support for real-time UI components such as slider bars and drag-and-drop. As such Flex applications have more in common with Windows.Forms applications than with traditional web applications. Flex combines the rich UI components of Windows.Forms, the asynchronous programming model of Ajax, the zero-touch deployment metaphor of browser-based appplications and the animation effects of Flash.

From a developer's point of view,
the run-time environment is similar to Windows.Forms where the dynamic aspects of the UI are written as event handlers in code. Hence developers with experience of developing Windows.Forms applications will be able to leverage their experience. The development environment on the other hand has more in common with ASP.NET, where the static layout of the UI is described in an XML-based markup language. In Flex the programming language is ActionScript, which now a fully-fledged object-oriented programming language like Java and C#.

Best of all, since Flex applicaitons run in the Flash player,
animation, drawing, sound and video effects, previously only available to Flash programmers, are now available via the Flex class library to enterprise application developers.

Flex v1.5 required a Java-based Flex server to compile and serve Flex pages on-demand. Flex v2 has a different licensing model which means Flex applications can be pre-compiled and deployed on a regular webserver such as IIS and can be easily integrated with a .NET-based servers tier.

At runtime, Flex applications
communicate with the server tier using either XML Web services (SOAP over HTML), REST (XML over HTTP) or Adobe's own proprietary binary protocol (AMF). AMF support on the server is provided by the optional Flex server component called Flex Data Services (previously Flex Enterprise Services). FDS provides support for pub-sub messaging, data push and remote access to Java objects but is currently only available for Java servers. The good news is that for many RIA applications, REST and/or Web services are more than sufficient and since .NET provides good server-side support for XML, SOAP and REST, you can build an server tier to support Flex applicaitons in .NET. If however you need the extra services provided by FDS, you're stuck with Java on the server.

This post is the first in a series that what is possible with Flex and .NET servers. This first walkthrough guides you through the tasks involved in creating a simple Flex application that uses a .NET servlet to provide its data.

To complete this walkthrough you will need:

  • Visual Studio (the example screens are VS2005 but no v2.0 features are used)
  • An IIS webserver (with ASP.NET enabled)
  • Flex Builder 2 or Flex2 SDK (the example is tested with Beta 2)
  • Flash Player Plug-in V8.5 (the example is tested with Beta 2)
The Flex application shows the growth rates for the US economy in a chart whose values are retrieved from a .NET servlet. The finished application looks like this.


Source: IMF

The pre-compiled Flex application downloads from the webserver and runs in the browser's Flash Player. To render the chart the application makes an HTTP request to the web server for the chart's data. In response, the server generates an HTTP response with the chart's data formatted in XML.


Step 1: Create a .NET Servlet in Visual Studio

The first step in building the application is to create the servlet that will respond to the Flex application's request for the growth rate data. ASP.NET is perfect for generating responses to HTTP requests but unfortunately is designed to generate HTML, not XML. Nonetheless, with a little persuasion, ASP.NET can be made to generate REST responses programatically. Microsoft hasn't invented a name yet for an ASP.NET page that generates dynamic XML but in Java, a page like this would probably be called a servlet so I use that term here.

There's no special project type in Visual Studio for an XML servlet so we'll use a regular ASP.NET Web Site project and modify the web application so that it responds with XML instead of HTML. Create a new web site as shown here:



I've used C# in this example but you can use whichever of the .NET languages you are most familiar with. Set the location type as HTTP and path as http://localhost/GrowthServlet. You can put the servlet on any server but note that, for security reasons, Flex, unless you configure it otherwise, will only retrieve data from the same server that it downloaded the Flex application from, so put the servlet on the same server that you plan to deploy the compiled Flex application.


Step 2: Modify the Servlet's ASPX Page to remove the HTML

The next step is to remove all the static HTML from the Default.aspx page that Visual Studio includes by default. Leave the page directive in place (the element enclosed by the <%@ Page %> tags) but strip out all the other elements. Add ContentType="text/xml" to the page directive. The finished Default.aspx page should look like this.

<%@ Page Language="c#" ContentType="text/xml"
CodeFile="Default.aspx.cs" Inherits="_Default" %>

Step 3: Modify the Servlet's Code Behind to generate the XML

The next step is to add code to the Page_Load event handler in the code behind file to generate the XML programatically. The simplest way to generate XML programatically is to use ASP.NET's Response.Write() to write XML literals to the HTTP response stream. The following example shows this approach:

using System;
 
public partial class _Default : System.Web.UI.Page
{
private void Page_Load(object sender, EventArgs e)
{
Response.Write( "<GrowthRates>" ) ;
Response.Write( "<Rate>36.5</Rate>" ) ;
Response.Write( "<Rate>36.1</
Rate>" ) ;
Response.Write( "<Rate>36.4</
Rate>" ) ;
Response.Write( "<Rate>36.7</
Rate>" ) ;
Response.Write( "<Rate>37.1</
Rate>" ) ;
Response.Write( "<Rate>37.4</
Rate>" ) ;
Response.Write( "<Rate>36.6</
Rate>" ) ;
Response.Write( "</GrowthRates>" ) ;

}

}

Step 4: Test the Servlet in a Browser

Check the ASP.NET servlet generates the XML you're expecting by hitting F5 in Visual Studio. This should launch IE and show the XML generated by the servlet.


If your XML looks like the figure then you're ready to build the Flex application.

Step 5: Create the Flex Application

Create a Flex application GrowthRates.mxml as shown here using either Flex Bulder or Notepad. The HTTPService component retrieves the data from the servlet 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"
xmlns="*" backgroundColor="white"
creationComplete="this.servlet.send();">
 
<mx:HTTPService id="servlet"
url="http://localhost/GrowthServlet/Default.aspx" />

 
<mx:LineChart showDataTips="true" dataProvider=
"{this.servlet.result.GrowthRates.Rate}"
>
<mx:series>
<mx:LineSeries />
</mx:series>
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" />
</mx:verticalAxis>
</mx:LineChart>
 
</mx:Application>

The finished Flex application should look like this.


The data tips should pop up as you mouse over the data points on the chart. It realy is as easy as that.