Flex Development using Visual Studio and Amethyst

• Download demo project (Visual Studio 2008) - 385.76 KB
• Download source - 613 B

Introduction

Flex is an open source development framework for creating a variety of rich applications like desktop applications, web applications and mobile applications.

Even though the Flex SDK itself is free, it lacks a free development environment or IDE which can accelerate development using features like intelligent code editing, debugging, profiling, etc.

Still there are a few options, most notably Flash Builder and Flash Develop. Flash Builder is a non-free alternative with a heavy price tag attached to it. Flash Develop is a good free alternative with excellent features like code completion and code generation but it does not have a Graphical User Interface(GUI).

Background

A lesser known free alternative to Flex development is Amethyst, a free Flex IDE by Sapphire Steel. Amethyst Personal is a free Flex IDE which provides development environment for Flex/ActionScript. Amethyst gets installed into the free Visual Studio shell edition and provides a professional environment for flex development like code completion, GUI support, debugging, etc.

To get started with Amethyst, you must first obtain and install the free Visual Studio shell edition from Microsoft.

You also need to download Adobe Flex SDK from the following site:

• http://www.adobe.com/products/flex/flexdownloads/

You can download Amethyst from the following link:

• http://www.sapphiresteel.com/downloads/amethyst_VS2008.zip

While installing Amethyst, you also need to specify the path where you have downloaded and unzipped Adobe Flex SDK.

Using the Code

You can create your flex application using the familiar drag and drop approach of Visual Studio.

As shown in the output screenshot above, I have placed a Label, a TextInput and two Button controls on the screen.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application height="600" layout="absolute" width="800" 
	xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			
		]]>
	</mx:Script>
<mx:Label height="18" text="Enter your name: " 
		width="112" x="87" y="96"/>	// Label Control
<mx:TextInput height="22" id="txtName" text="" 
		width="160" x="204" y="92"/>	// TextInput Control
<mx:Button click="button_click(event)" height="22" id="btnOK" label="OK" 
name="btnOK" width="65" x="126" y="133"/>	// Button Control
<mx:Button click="btnClear_click(event)" height="22" id="btnClear" label="Clear" 
	name="btnClear" width="65" x="204" y="133"/>	// Button Control

When we double click on the button controls in the design window, the code window opens:

<mx:Script>
	<![CDATA[
		import mx.controls.Alert;		// importing the Alert control
		private function button_click(event:flash.events.MouseEvent):void 
		{		// Event handler for button
			var username:String=txtName.text;	// Getting name entered 
							//by user
			Alert.show("Hello " + username, 
			"Welcome to Flex using VS2008");	// Showing message
		}
	]]>
</mx:Script>
<mx:Script>
	<![CDATA[
		private function btnClear_click(event:flash.events.MouseEvent):void 
	{		// Event handler for button
			txtName.text="";			// Clearing the TextInput
		}
	]]>
</mx:Script>
</mx:Application>

Points of Interest

Flex is an extremely interesting framework and quite easy to learn and Amethyst with Visual Studio provides a very simple yet productive environment for Flex development.

I hope that this article will help a novice start developing Flex applications in quite a short period.

History

• 14^th May, 2011: Initial version