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. AddContentType="text/xml" to the page directive. The finished Rates.aspx page should look like this.
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
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();">
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.
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.
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:
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:
After graduating from Cambridge University I worked in SCO's UNIX kernel team and then in DEC's VMS kernel team at their European R&D center in Italy, a team led by David Solomon, the author of the Windows Internals books.
In 2000, I joined the award-winning British start-up, Searchspace, a company whose AI software is used by financial services organizations around the world to detect and investigate money laundering, terrorist financing, tax evasion and organized crime.
After working the City at one of the leading investment banks I went on to build a Flex development team at the world's largest betting exchange, betfair.com. I am currently with Rule Financial Ltd., a London-based consulting company providing specialist business and technical consulting to the investment banks.
The views in this blog are my own and do not necessarily represent the views of Rule Financial Ltd.
