Advertisment

Flex Apps in Visual Studio

author-image
PCQ Bureau
New Update

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.

Advertisment

Direct Hit!

Applies To: Web developers



USP: Developing Flex apps in Visual
Studio



Primary Link:


www.adobe.com/products/flex




Keywords: Ensemble Tofino

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:\ uninstall_flash_player.exe /clean

Advertisment
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:






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



layout="horizontal" >




Advertisment






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" >

Advertisment

fontSize="30" />



Advertisment

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.
Advertisment

/* CSS file */



Application


{


background-color:Olive;

}

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

Advertisment

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.

Advertisment