Tofino – Writing Adobe Flex Source Code(MXML and ActionScript) in Visual Studio


Today, I’ve used the Tofino, a plugin for Micorsoft Visual Studio to create Flex front ends for .Net applications built by Ensemble.

A brief intro What Ensemble Says about Tofino

” 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. Instead of using a separate text or XML editor and manually invoking the compiler, they can move smoothly between MXML and .NET file types within Visual Studio, and invoke Flex build and run commands from Visual Studio menus. Download Tofino 1.2009.01.19 including Flex SDK (80MB)  or Download Tofino 1.2009.01.19 without Flex SDK (4MB) ”

I’ve build a basic app that requests a stock price using a webservice. I’m posting here the step by step process to build this app. Hope this helps.

The first thing, as with any development in Visual Studio, is to create a new project – in this case making use of a new template that has been provided via the Ensemble Tofino plug-in.

When you create a new project (File > New Project) you will see a new project type: Flex. This will show you the three installed templates: Actionscript Application, Flex Project and Flex Library Project. Lets select a Flex Project.

Figure 1 – Project creation options

New Flex Project in Visual studio

Flex Project Creation Options in Visual Studio

In the solution explorer, you will see all the folders that a project uses for build and depply have been created( same as Adobe Flex Builder).

Figure 2 – Flex development environment, including the Solution Explorer

Flex-development-environment in Visual Studio

The first item that we want to put on the page is a text input control that will let the user type in the company symbol that they are looking for (e.g. ADBE, MSFT). The Flex framework provides us with a common set of controls for use in Flex applications; these can be accessed by targeting the mx namespace and then simply typing the control name – just as in Flex Builder (also same as Visual Studio).

So here we go – your first lines of MXML:

<?xml version=”1.0″ encoding=”utf-8″ ?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”horizontal”>
<mx:TextInput id=”stockName” />
</mx:Application>

To see what the application looks like you will need to build the solution using the usual VS build menu. You will see the output window confirms the build has been successful.

—— Build started: Project: StockTool, Configuration: Debug Any CPU ——

Loading configuration file C:Program FilesEnsemble SystemsTofinoflex_sdk_3frameworksflex-config.xml
created: C:Documents and SettingsAdministratorMy DocumentsVisual Studio 2008ProjectsStockToolStockToolbinStockTool.swf (250917 bytes)
========== Build: 1 succeeded or up-to-date, 0 failed, 0 skipped ==========

The Ensemble Tofino plug-in provides complete error feedback for the Flex framework – try missing a quote mark out for example and then building the solution to see an example.

Now we need to add a button for the user and then set about wiring it up to some sort of service to get the information that we want. A button is created in the same way as the other controls we have seen so far …

Getting the data

A Flex application is essentially data agnostic; you can use data from Web Services, XML, Java, PHP, .NET and a range of other technologies, and then render the results within data-aware display components. In the case of our application, we are going to use the webservicex price lookup Web Service. The WSDL can be viewed at http://www.webservicex.net/stockquote.asmx?WSDL

The Flex framework defines various data components to make working with data easy: Remote Object (for mapping to server side classes, including .NET classes), XML, HTTP Service, and, as we are going to use here, the WebService component.

Once again, defining it is a simple matter in MXML:

<mx:WebService id=”stockWebService” wsdl=”http://www.webservicex.net/stockquote.asmx?WSDL” />

The Ensemble Tofino plug-in provides information about the core Flex classes in the Visual Studio object browser, so if you wish to see the methods, properties and return types that a particular class uses, the they are fully exposed here. They are grouped according to the swc in which the classes are contained (similar to zip files which contain related collections of packages). So, we can find all the properties of the WebService class inside rpc.swc.

Figure 4 – Object Browser showing the WebService class

Object-Browser-showing-WebService-class

So, Lets call the webservice method.

<mx:Button label=”click for quote”  id=”stockBtn” click=”stockWebService.GetQuote(stockName.text)” />

Debugging

Before we add any display element to the application to view these results, we want to check that data is being returned correctly, which allows us to see the power of the Flex debugger. In order to view the results conveniently, lets specify a result handler and a fault handler for the web service. These are called automatically when the Web Service fires the event in question.

<mx:WebService id=”stockWebService”  wsdl=”http://www.webservicex.net/stockquote.asmx?WSDL” fault=”handleFault(event)” result=”handleResult(event)”/>

<mx:Script>
<![CDATA[
//import the classes that we will use
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

//handler function for successful call to web service
private function handleResult(ev:ResultEvent):void {
//result code goes here
}

//handler function for failed call to web service
private function handleFault(ev:FaultEvent):void {
//fault code goes here
}

]]>
</mx:Script>

Debugging is simple, but first you need to make sure that you have the debug version of Flash Player installed – this can be downloaded from http://www.adobe.com/support/flashplayer/downloads.html.

You can debug your application by adding a breakpoint on the closing brace of both functions and clicking the debug icon. Type in your stock symbol name and press the button in the application; a call will be made to the Web Service and either a fault or a result will be returned (hopefully the latter). Visual Studio should then bring up the locals panel for you to see the object that has been returned.

Figure 5 – The locals panel, showing the fault event object

The-locals-panel-showing-the-fault-event-object

Figure 6 – The locals panel, showing the result event object

The-locals-panel-showing-the-result-event-object

There is a huge amount of information here and the exposing of all these objects makes debugging simpler and – therefore – application development quicker.

Binding the result

Flex allows us to bind data from our data sources to a component. The framework handles all the necessary notifications and updates, all we need to do is define a control and bind the property that we actually want to display. Add a text control to the application, and set its text property to be bound to the lastResult property of the GetQuote service of our web service. We define data binding by wrapping the data property in braces ({}) as follows:

<mx:Text text=”{stockWebService.GetQuote.lastResult}” width=”200”/>

Controlling the visual look with CSS

Finally, we can add a style sheet to change the look of the application. The Flex framework supports a subset of CSS, allowing both class and selector level styles to be created. In order to create one, simply add a file to your project (File > Add file). You will see that there are a large number of file types available which all feed into the Flex application – select CSS and a create a file named styles.css. We’ll create a simple rule that is applied to the Application class and all its children:

Now we just have to apply this style sheet to the application by using the tag inside the MXML page:

 /* CSS file */
Application
{
    background-color:Olive;
    font-family: Arial;
    color:White;
    font-size:14;
}

 <mx:Style source="styles.css"/>

The application is now complete and can be rebuilt and tested.

first-Flex-application-running-in-browser

For more information about Flex with Dot Net: Go to the Home of Flex Developer Network : http://www.adobe.com/devnet/flex/flex_net.html

Advertisements

~ by mjcprasad2000 on April 6, 2009.

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

 
%d bloggers like this: