Are you still using trace() in Flex 2.0 ?

If you're still using flash trace() in your Flex 2.0 applications you should have a look at the new ILogger interface in Flex 2.0. I'm using ILogger for my own components and it's great. It's not hard to learn how to use it, especially if you have any experience of logging with .NET's System.Diagnostics.TraceListener (or with Java's log4j).

Unfortunately, with the exception of the Flex v2.0 Data Services components, I've found that the Flash v9.0 framework runtime itself and the Flex v2.0 components don't log what they're doing and don't use the ILogger interface.

Debugging complex applications with lots of dynamically created nested MXML components would be a lot easier if the framework runtime did an :ILogger.debug("instantiating component") when components were newed, and did an :ILogger.debug("dispatching preinitialize/initialize/creationComplete event") when "lifecycle" events are dispatched on components and logged when the lifecycle methods (createChildren(), commitProperties(), measure(), layoutChrome() and updateDisplayList()) are called by the framework run-time.

Additionally debugging complex data binding would be a lot easier if the mx:Binding component in particular logged each time it was triggered.

Figuring out the sequence of things is proving to be one of the hardest challenges of developing big applications in Flex 2.0.

Why don't more developers use Flex?

Matt Chotin today posted a message from Flex marketing team asking for input from the Flex community on Adobe's marking strategy for the Flash Platform and Flex in particular. I've posted these ideas in this post already both here on this blog and in replies to Ryan Stewart's excellent Universal Desktop column, but I've pulled them together here into one post.


The importance of a good developer network

I agree with Ryan Stewart's comments about the need to learn from Microsoft's (and Sun's to a lesser extent) excellent developer programs. I suspect one of the consequences of Adobe's technical "high-command" being so Java-oriented is that the guys in decision-making positions just don't know how effective MSDN is. For a small annual fee, MSDN subscribers receive every Microsoft product (including Enterprise Editions of Windows Server, SQL Server, BizTalk, betas of Communication Foundation, Presentation Foundation, the lot) through the mail. The weekly .NET Rocks! podcast is hugely popular with over 500,000 weekly downloads and some smart guests.

Adobe's Enterprise Developer Network is fine if you're using LiveCycle but not much good for anything else. If you're building a proof of concept in a corporation your Adobe Flex Builder 30-day trial runs out before you're done building the PoC, never mind selling the concept to the management.

Adobe distributes code for a bunch of kick-ass sample Flex applications to its world-wide sales teams but this code's not available to the community. Sort it out guys. Developers need kick-ass demos to convince internal budget holders to adopt Flex.

What is a development manager's biggest concern about adopting Flash?

Adobe need to realize the importance of getting the ubiquity of the Player message across to developers. If I had to name one "message" that I have found the most effective at getting Flash taken seriously as a development target for the presentation tier, it is the ubiquity of the Player. Adobe has a blind spot here as "designers" in the web industry know about this already BUT DEVELOPERS DON'T KNOW THAT THE PLAYER IS INSTALLED ON 98% OF DESKTOPS. Adobe needs to get this message across more effectively to developers. I give the ubiquity results pride of place in every proposal I make for the adoption of Flash as a platform for enterprise applications.

The importance of selling Flex to the Java community

With the advent of Web 2.0 and the improvements to Microsoft's desktop technologies, enterprise Java developers are feeling the squeeze on the desktop. Many corporations are already migrating their legacy Swing applications to Ajax and Windows Forms. Ajax will be OK as "lipstick" on the JSP "pig" for a while but, unless Java developers get their act together, Microsoft developers will wipe them out on the desktop. There's an obvious opportunity here for Flex to become the Java developer's defense against the Microsoft Presentation Foundation onslaught. The problem is that right now most Java developers don't know Flex exists, and when they do, have completely the wrong idea about what is it, and what it offers them. Understandably Java developers don't yet think of Adobe as a provider of development technologies. Adobe must address that key perception problem.

The importance of leveraging potential industry alliances

There's also a potential mutual co-operation opportunity for Adobe with big technology providers who have a vested interest in seeing Java continue its success. IBM, Sun, BEA spring immediately to mind. Adobe needs to sell those corporations on how Flex can help defend their market share in the new "rich" world. "Is there life after JSPs?" (There's a good title for a billboard.) Why not work with the Eclipse foundation to integrate Flex Builder with the Eclipse Web Tools Platform Project (included in Eclipse, Rational and also now in BEA WebLogic)?

The importance of not giving up on .NET developers

Adobe would be foolish to continue to ignore the .NET developer community. The .NET developer community is HUGE and growing, not least because it's a fantastic development environment and because it's free. It may surprise Adobe but there is insterest in Flex in the .NET community. When I posted my .NET tutorials on my blog it rose to being the 6th most visited Flex blog on Adobe's MXNA aggregator. I find the lack of .NET samples on flex.org completely astonishing. While it's true that many professional .NET developers will be using WPF on the desktop, .NET developers are not all idiots/mindless bigots, there will be many .NET developers who decide to adopt Apollo/Flex for the presentation tier (for lots of good reasons). Let's not concede defeat to WPF before we've started.

The importance of getting Ajax positioning right

Adobe needs to more marketing thinking about Flex' positioning against Ajax. While there are some functionality differentiators for Flex (and these are not well understood by developers), Flex' strongest differentiators against Ajax lie elsewhere. It's in the areas of scalability, performance, documentation and developer tooling where Flex is at it's strongest. That's where the messaging focus should be.

Internationalization

I agree with many of the comments in reply to Matt's original post about the need to make the Flex community appear to be more international. I was pleasently surprised that many of the visitors to my Flex.NET blog were based in Russia, India and Hong Kong. Has Adobe done any geographical analysis of the downloads of the Flex SDK?

Microsoft endorses the Flash Platform

Check out Microsoft's pre-release of the latest version of their Internet Messenger software brought to you using the Adobe Flash Platform.

InfoWorld announces Flex is better

Flex 2 is out the door and the response from the press is positive. This article by InfoWorld says Flex 2 is better than the previous version, mainly because of the new pricing, according to InfoWorld.

Unfortunately the apparent indecision at Adobe Marketing about whether to position Flex against Ajax or as a technology complimentary to Ajax shows up in the articles that are appearing in the press.

Jeff Vroom's video interview on TheServerSide.com also conveys some pretty confusing messages to market about what Flex is all about. Is a Flex application browser-deployed? Not according to Jeff. Insensitive to the enthusiasm in the industry for loosely-coupled systems, Jeff positions Flex as a environment for building tightly-coupled applications.

Microsoft's anti-Adobe podcast

Anyone at Adobe who's unaware how effectively Microsoft get their anti-Adobe message across should take time to listen to last week's .NET Rocks! podcast about Virtual Server. The presenters get so emotional about the Adobe dispute that they have to bleep the transmission. Man, these guys are not happy. They're only warming up at start of the broadcast. Listen through to the end for the heavy stuff. I figure Adobe must be doing something right!

Flex 2 - What's in it for .NET developers?

There's a lot of buzz in the market about user interfaces and improving the user experience. With Microsoft recently announcing its intention to rebrand Windows Presentation Foundation (WPF) as .NET V3.0 and with Adobe's new licensing strategy for Flex, we're going to see a lot more IT budget being spent on improving the user experience in the near future and a lot of developers making technology choices in this area.

Flash Everywhere

Developers working on applications for use outside the corporate firewall will typically choose HTML today because the browser is one of the few run-time environments that's universally available on users' desktops. WPF will offer an alternative in the future but developers should not overlook the powerful run-time environment that's already present today on 98% of users' desktops, the Flash Player.


Unfortunately Flash suffers from a brand problem since it is associated in most developers' minds with banner ads on web sites and isn't something that springs to developers' minds when they think of real applications. The reality is that the Flash Player is a a very attractive choice for the presentation tier of n-tier enterprise applications, especially if the presentation tier of the application has to be made available outside the corporate firewall and may need to run on Windows and Mac. Flash integrates well with .NET servers so the combination of Flash and .NET for multi-tier applications means that developers can leverage the productivity benefits that .NET offers on the server while leveraging the ubiquity and power of the Flash Platform on customers' desktops.

Flash as a Smart Client

Adobe positions Flex as a platform for the development of rich internet applications or RIAs. Rich because Flex applications provide a richer user experience more akin to traditional Windows applications a and internet because a Flex application can be zero-touch deployed to a browser. Microsoft would call Flex a smart client technology.

The run-time environment of a Flex application is similar to a Windows.Forms application where the the UI components are bound to a data model modified by event handlers. Flex applications run in the browser but, like Ajax web applications, don't need to do postbacks to the web server to change their state. As a consequence UI developers with experience of developing in Windows.Forms (or Java Swing) applications will find the Flex programming environment much more familiar than traditional HTML-based web development.

The design-time environment, on the other hand, has more in common with ASP.NET, where the static layout of the interface is described declaratively using an XML-based markup language and the dynamic aspects of the interface are defined in event handlers written in code. In Flex the event handlers are written in ActionScript, which, despite its name, is not a scripting language but a compiled and strongly-typed, object-oriented programming language like C# and Java. Additioanlly many of the things that are hard work in Windows.Forms, such as data binding, are much easier to do in Flex.

So Flex combines the stateful run-time model of Windows.Forms, the declarative design-time model of ASP.NET and the zero-touch deployment model of traditional HTML web applications. Best of all, since Flex applications run in the Flash Player, the powerful drawing, video, visualization, animation and charting capabilities of Flash, previously only available to Flash animators, are now available to your application's presentation tier via the Flash class library.

Integration with .NET servers

Flex applications communicate with the server tier using either XML Web services (SOAP over HTML) or XML over HTTP. An optional server product called Flex Data Services (previously called Flex Enterprise Services) provides additional support for Adobe's own protocols (AMF and RTMP) that support pub-sub messaging, data push and remote access to server-side objects. Flex Data Services is currently only available for Java servers but there are commercially available and an open source implementations of Flash remoting for .NET servers. For many applications, XML Web services and XML over HTTP are more than sufficient and since .NET provides good server-side support for XML/HTTP and SOAP/HTTP, you can quickly build an server tier to support Flex applications in .NET.

A new Flash IDE

Before the advent of Flex, developing Flash applications meant using an IDE designed for animators and that was hard to learn. Over the years a number of open source IDEs have emerged that make the task of developing Flash application less complex. Nonetheless Flash is a skill-set that is still rarely found outside of the media industry. Flex Builder is the new IDE from Adobe that makes the task of developing a Flash-based presentation tier a snap for programmers more used to Eclipse and Visual Studio.

A new Flex licensing model

The first version of Flex required a server license which made it hard for developers outside large companies with big budgets to justify adopting the Flash Platform for application development. In Flex version 2 Adobe has has adopted a similar licensing model to the model used by Microsoft for .NET (and Sun for Java) with a freely downloadable and freely redistributable run-time environment and freely downloadable SDK. The new Flex licensing model means that Flex applications can now be deployed on a regular webservers like IIS.

If you want to start building Flex applications with .NET check out my tutorials.

Flex and .NET Tutorials (1)

Updated for Flex 2 Beta 3.

This is the first in a series of walkthroughs for beginners in .NET that show how to integrate Adobe Flex applications with .NET servers. This first walkthrough guides you through the tasks involved in creating a simple Flex application that shows the growth rates for the US economy in a simple line chart whose data values are retrieved from a .NET servlet. Later walkthroughs will show you how to make your .NET servlets respond to events generated by Flex applicaitons and how to serialize complex server-side .NET data types so that they can be consumed by Flex.

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 chose Microsoft Web Developer 2005 Express for this tutorial because it's a free download, it's based on the .NET V2.0 framework and it includes a built-in web server. Using Visual Web Developer (or Visual Studio 2005) allows you to develop .NET servlets to test your Flex applications on XP Home. You could also use Dreamweaver8 or Notepad to develop the .NET servlets but if you use those IDEs you will need an IIS web server (included in XP Pro but not available for XP Home) and the .NET V2.0 SDK.

The finished Flex application looks like this.




Source: IMF

The application works like this. When the browser requests the Flex application's HTML page, the HTML page and the compiled Flex SWF embedded in the HTML page are download from the webserver. The browser then runs the Flex SWF in the Flash Player plug-in. The Flex SWF makes an HTTP request to the .NET servlet on the same webserver to obtain the data for the chart. The .NET servlet generates an HTTP response with the data formatted in XML. When the response is received by the SWF the chart line is drawn.

This is how you build this simple Flex charting application.

Step 1: Create the .NET Servlet

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 pure XML 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 Web Developer 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:



Select File system if you're using Visual Web Developer's build-in web server and ...\GrowthServlet as the web site's location in the file system. Select the language. I've used Visual C# in this example but you can use whichever of the .NET languages you are most familiar with.

Step 2: Remove the HTML from the Servlet's ASPX Page

By default Visual Web Developer includes some HTML in any new web page. Remove all of the HTML from the servlet's Default.aspx page . 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 servlet's 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
{
protected 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 Web Developer. The first time you do this Visual Web Developer will show the following dialogue to ask if you want to create a web.config file to enable the debugger.

Select Add a new web.config file and click OK. This will launch your default browser and show the XML generated by the servlet.

If your XML looks like the figure then you're ready to build the Flex application. Take a note of the port number that the ASP.NET Development Server is using for the servlet as you'll need that in your Flex application.

Step 5: Create the Flex Application

Create the Flex application GrowthRates.mxml using either Flex Builder 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"
backgroundColor="white" backgroundImage=""
creationComplete="this.servlet.send();">
 
<mx:HTTPService id="servlet"
url="http://localhost:1317/GrowthServlet/Default.aspx" />
 
<mx:LineChart showDataTips="true"
dataProvider="{this.servlet.lastResult.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.

Microsoft offers to bundle the Flex Player in Vista

According to this market watcher, in an attempt to reach agreement in the dispute with Adobe over the inclusion of a PDF-writer in Office 2007, Microsoft has offered to bundle the Flash Player in Vista. If this is true (and if there are no other hidden conditions that Microsoft is not telling us about) then Adobe would be mad not to accept this offer. It might mean the loss of revenue short-term for Adobe but would create a much larger market opportunity for Adobe over time. The arrival of WPF/E is a serious threat to Flex as an applications development platform and, given how much of a market secret Flex is, something pretty fundamental has to change to ensure Flex 2 is more sucessful than the previous version. Adobe will need to have its smartest marketing minds working on a strategy to counter Microsoft's ability to manipulate the market going forward.

We can all read about Microsoft's view of the PDF dispute but Adobe people are being much more tight-lipped and after the recent strong-arming of the creative tallent at FlashObject, there must be questions about whether Adobe's legal department is working for the benefit of Adobe's shareholders or working on some other agenda. Who's in charge at Adobe?

What does Gartner say about Flex in banking?

Banks Eye Rich Internet Applications is an great article by Gartner about the business opportunity that RIA technologies represent for the finacial services industry. It clearly been written by someone who knows what they're talking about and is an excellent resource for building a business case for the adoption of Flex for hard-core applications. It's just a shame it's so well-hidden on the Adobe web site and a shame there's no link to it from the Flex product home page.

Don't you love it that O'Reilly Flash books are green?

We all learned uncle O'Reilly's color codes in kindergarden. Java books are purple, Microsoft books are blue, Oracle books are orange and Flash and ActionScript books are green, in the same color category as books on W3C standards such as HTML and CSS. Eh? It's as if Tim O'Reilly sees Flash and ActionScript as a W3C web standard. I'm not complaining but it's a little curious.

Has Flex given up on the enterprise?

One of the many benefits of adopting a SOA in the enterprise is the increased organizational agility that enterprises gain from a new type of desktop application that orchestrates the services exposed by the enterprise's legacy systems in a more joined-up way that better matches each business process.

This new type of application is called a composite application by IBM, Sun, SAP, BEA and many others including innovative ISVs such as Digital Harbor and Above All, who already strongly position their offerings as development environments for composite applications.

In reality Flex is the best tool I've seen for the rapid development of robust composite applications for the enterprise (and I include Windows.Forms in that) but Flex is also one of the industry's best kept secrets. There's no mention on Flex's Home Page of its capabilities as a development environment for composite applications. Instead Flex is positioned as a tool for developing RIAs. What are they? Websites with fancy graphics?

Right now IT departments in enterprises are pulling their hair out trying to work out how to deliver better smart clients to the business that compose the services exposed by their SOA and that can be easily deployed and reconfigured at low cost. "Flex can do that", I hear you say and you'd be right. The trouble is enterprises don't perceive themselves as building internet applications, rich or otherwise, so (wrongly) don't see Flex as the solution to their problem.

Why Flex Data SERVICES but Flash Media SERVER?

I can understand why Adobe wanted to find a wider market for Flex Enterprise Services and choose a new name as part of that rebranding. I don't understand however why one product is called Flash Media Server and the another product is called Flex Data Services. That seems inconsistent to me. To tell you the truth I've never been keen on the name Flex Data Services, not least because FES had a subcomponent called Data Services. What's that subcomponent called now I wonder? What's wrong with Flex Server as a name for the server product?

Google Podcast on the Challenges of Ajax Development

Steffen Meschkat of Google spoke at a conference in London recently about the technical challenges of developing rich web applications in Ajax. He has some humourous observations about the quirks of XMLHttpRequest, JavaScript and CSS. The audio of his talk is at http://www.carsonworkshops.com/summit/

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.

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.

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.

Lack of an XML Editor in Flex Builder2 Beta2

Given how fundamental XML is to Flex applicaitons, how annoying is it that no plug-in to edit XML files is included in Flex Builder (as of Beta 2)? If, like me, you're used to Visual Studio, the lack of an XML editor in Flex Builder is a pain. Someone recomended X-Men's Eclipse Plug-in to me but it looks pretty basic. Has anyone had experience with other XML plug-ins for Flex Builder?