Flex Apps in Visual Studio

We all know about ever increasing richness of browser based applications and great solutions built around them. Now even business solutions are being built using technologies like Microsoft’s Silverlight, Adobe’s AIR etc that enable building RIA’s or rich Internet applications. Most developers have built Silverlight apps using VS but here we explore how VS can be used to build Flash based internet applications. Before showing how this is done let’s begin with a small introduction of Flex framework. We all know that plug-in based technologies like Flash player and Silverlight have enhanced capabilities of browsers manifold, and using these technologies developers can create applications that enable media playback within the browser, plus enable fast execution of code. Adobe Flex is a free and open source framework for building Flash based web applications. Besides using Visual studio plug-in as explained in this article, one can also use Adobe Flex Builder for fast development of Flex applications. The two core components of any Flex application include MXML, an XML mark-up language for declarative UI layout and ActionScript, a fully object oriented language, used for handling interactivity, events, data management and other client-side business logic. Flex also provides a comprehensive library of components and classes that can be used to accelerate development of web applications. This includes visual controls, containers, navigators and charting components, as well as providing support for component skinning, rich media streaming, data binding and interaction with RPC and messaging services.

How it works

To start developing Flex apps in Visual Studio 2008 one needs to download ‘Ensemble Tofino’ plug-in from tinyurl.com/yb8y5ow. Installing downloaded ‘EnsembleTofinoWithFlexSDK.1.2009.09.08.exe’ file results in creation of new project type in Visual studio. To build Flex applications, start Visual Studio and click on ‘File>New>Project.’ From project type select ‘Flex’ and then select ‘Flex Project’ from template and name your application (‘FlexusingVS’). One important point to note here is after you have built your application, debugging would only be possible if you have the debug version of Flash Player installed on your machine. Different debug versions of Flash Player can be downloaded from tinyurl.com/r59ere; in this implementation we used Flash Player 9 (debug version for Internet Explorer). If you already have Flash player installed on your browser, then you might not be able to install the older version unless you uninstall the previous version of Flash Player. Simply go to tinyurl.com/c3e657, download and install uninstaller tool (‘uninstall_flash_player.exe’). Now go to the command prompt and type:

C:\[path] uninstall_flash_player.exe /clean
Once you have installed ‘Ensemble Tofino’ plug-in one can find new project type ‘Flex’ in ‘New Project’ window.

This would uninstall the previous version of Flash Player and let you install a different version. Moving back to application building, you would find different folders of typical Flex application in solutions explorer. The first and most important one is ‘src’ folder. This contains files where actual code is written. Two important files included in this folder are MXML(.mxml) and ActionScript(.as) files. Second folder ‘html template’ contains template for the html wrapper. The Flex application, when deployed onto the web, is wrapped up inside an html page that takes care of detecting whether or not the user has the correct version of the Flash Player installed and, if required, can prompt the user to update their Flash Player. Here is a simple Flex application that displays a message on a button click event, MXML is an XML based language, and as such uses namespaces, the most important one � mx � is bound via the xmlns URI in the application tag and refers to the Flex framework classes:

The important tag worth mentioning here is ‘…../’. This is the defining container for the whole application. One can also customize the look of the application by adding style sheet. Just add a new file (.css) to ‘src’ folder and add these lines:
Building Flex Apps using VS is quite simple, one can see different components of the Flex project in Solutions Explorer; one also gets benefit of intelliSence.

/* CSS file */
Application
{
background-color:Olive;

}

Now add the following tag to ‘FlexusingVS.mxml’ file:

Here is the output of a sample Flex application. To view the output one needs to have Flash Player plug-in installed in browser.

It is evident from the above sample that using VS IDE for building Flex apps is one of the most efficient ways of doing the task, specially for those web developers who are already using VS and are not comfortable with any other IDE.

Advertisements

One response to “Flex Apps in Visual Studio

  1. Pingback: Flex Apps in Visual Studio « Kumar's Blog | Velocity Software Solutions (P) Ltd.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s