Flex Apps in Visual Studio

BANGALORE, INDIA: 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.

C:\ uninstall_flash_player.exe /clean

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:

xmlns:mx="http://www.adobe.com/2006/mxml"

layout="horizontal" >

import flash.events.MouseEvent;

private function clickHandler ( event:MouseEvent ):void

{

Label1.text = "Flex application in Visual Studio 2008";

}

>>>

title="My Application" horizontalAlign="center"

paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" >

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:

/* CSS file */

Application

{

background-color:Olive;

}

Now add the following tag to 'FlexusingVS.mxml' file:

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.