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.
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:\
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" >
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:
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.