Developing Flex applications in Microsoft Visual Studio with Ensemble Tofino

Additional Requirements

Ensemble Tofino

• Learn more

Ensemble Tofino for Visual Studio is a plugin that enables .NET developers to create Flex front ends for their applications in the same IDE that they normally use for .NET development. Although it is possible to use the Flex SDK outside an IDE, you'd need to use a separate text or XML editor and manually invoke the compiler via its command line interface. With Tofino, you can view and edit MXML and ActionScript 3.0 source directly in Visual Studio as you would with the more common .NET languages, with full IntelliSense support. Most importantly, you can build and debug Flex projects easily by invoking commands from Visual Studio menus.

As with Flex applications built using Adobe Flash Builder (formerly known as Adobe Flex Builder), the enterprise applications built using Tofino run in Flash Player in the browser or as a desktop application via the Adobe AIR runtime framework. In both IDEs you program using the ActionScript 3.0 programming language and a declarative XML-based component layout language called MXML.

Because Flash Builder is an Eclipse-based IDE, available both as an Eclipse plugin and as a standalone application, it tends to be readily adopted by Java developers already familiar with Eclipse for building web applications with Java-based server back ends. Tofino provides an easily-adopted alternative for developers who use Visual Studio and want to use Flex for the client-side user interface (UI) to their .NET-based web applications.

Much of the development process with Tofino—including how to perform builds, make edits, navigate code, and invoke debugging features—matches the process you use to develop with other Visual Studio languages such as C#.

This article provides an overview of the Flex development experience using Tofino.

Tofino is free and can be downloaded from Ensemble. Tofino versions are available for both Visual Studio 2008 and Visual Studio 2010, and each version is available with or without the Flex SDK. If you already have the Flex SDK installed, simply install a Tofino version without the Flex SDK included, which will be a smaller download. Then set up Tofino to use your installed SDK by choosing Tools > Options > Projects > Flex Projects and changing the Flex SDK Location setting.

Once you've installed Tofino you can create and open Flex projects in Visual Studio, which will have a .flexproj extension. Note that Flash Builder Eclipse projects and Tofino projects can coexist for the same source tree. Simply place the .flexproj file in the same folder as the .actionScriptProperties and .project files that Flash Builder uses.

Creating a Flex project

To create a Flex project with Tofino, start by choosing File > New Project, and then select Flex as the Project Type. The New Project dialog box will present the possible Flex projects you can create (see Figure 1).

If you select ActionScript Application or AIR ActionScript Application, the project will not include the Flex framework and only the ActionScript 3.0 language is allowed. These projects have a smaller footprint and can download faster than projects that include the Flex framework; however you are limited to pure ActionScript programming.

If you select Flex Project or ActionScript Application, your application will compile to SWF files that run in Flash Player in the web browser. In contrast, if you select AIR Flex Project or AIR ActionScript Application, it will compile to a standalone application that runs from the desktop. AIR applications have more access to the operating system, notably the file system.

You can also choose to create a Flex Library Project. This option produces SWC files, which are reusable library files that can be compiled into another Flex or AIR application. They are analogous to DLL files for .NET or JAR files for Java.

A sample web application

Included with the Tofino installation is a sample web application, which illustrates Tofino's capabilities. The file, EcoToursHTTP.zip, contains a Flex client project (EcoToursClient), an ASP.NET web site (EcoToursWebSite), and the C# server logic (EcoToursServer). For Visual Studio 2010, the file is installed in C:\Program Files\Ensemble\Tofino\VS2010\Samples by default. The web site is used to implement only a pure server that processes data requests only, there is no HTML generated for a user interface. The Flex client provides the UI experience.

With Tofino, client-side development proceeds much like development of desktop .NET UIs, with a rapid build/debug cycle that is typically much faster compared to more traditional HTML-based client development.

Source editing

To get started, unzip EcoToursHTTP.zip and open its solution file in Visual Studio. Next, open the main application file of the Flex client, EcoTourFlexClient.mxml. You'll see that you have the full editing experience for MXML and ActionScript files within Visual Studio, with syntax coloring, code navigation, code completion, and member selection (see Figure 2).

Compilation

To compile Flex projects, simply choose Build > Build Solution as you would with any Visual Studio project. For Flex projects, the Flex complier is invoked, creating SWF or SWC content as appropriate. Tofino also creates HTML wrappers (like Adobe Flash Builder), allowing control of how the SWF content is invoked within the browser. Tofino shows the output from the build process, detailing how the Flex compiler is invoked (see Figure 3).

If there are build errors, Tofino adds them to the Visual Studio error list where you can click them to navigate to the location of the error in the source code (see Figure 4).

Debugging

Once it is compiled, you can debug your Flex application by choosing Debug > Start Debugging or simply pressing the F5 key, as with any Visual Studio project. Because the sample project has a server-side component, you need to configure the solution's start options to invoke both the client and the website when F5 is pressed. Furthermore, you'll want to make sure the website has no start page, so that the Flex client being debugged will provide the sole interaction with the web server; this avoids confusion over which page to use. For more detailed instructions on debugging the EcoTours sample application, see the READ_ME.txt file in the Samples\EcoToursHTTP\EcoToursClient\ folder of the EcoTours sample files.

Once running, the EcoTours application presents a simple list of destinations for a user (see Figure 5).

You can debug your Flex application using the familiar Visual Studio debug capabilities, setting break points as needed. With Tofino, you can set break points both in the Flex code and in the .NET code on the back-end. As the application executes, you can step seamlessly from the client-side code (see Figure 6) to the server-side code (see Figure 7). The call stack and local variables can be inspected at the MXML and ActionScript breakpoints.

Deployment

When your application is ready for deployment, you'll need to make sure that the SWF file and HTML wrapper are included within the website itself so that navigating to it downloads the Flex client application. With the EcoTours sample, this is achieved by setting the build output path to the Client folder in the website project. That way the client HTML and SWF files are generated directly in the correct location.

For AIR applications, you'll build an AIR file, which acts as the installer for the application. To build an AIR file, right-click the application MXML file (or AS file if you're working on an ActionScript-only AIR application) and choose Package AIR Application.

• To follow Tofino announcements, or to offer feedback, please visit the Tofino forum.
• To learn more about Flex in general and how to program with it, visit Flex Developer Center.
• To learn about Adobe AIR, visit AIR Developer Center.

The current release of Tofino contains support for the new Flex 4 SDK. Tofino will continue to evolve alongside Flex.