Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Flex

Flex Development using Visual Studio and Amethyst

4.75/5 (6 votes)
14 May 2011CPOL2 min read 30K   805  
Demonstration of building Flex applications using Visual Studio 2008 and Amethyst
Sample Image - maximum width is 600 pixels

Sample Image - maximum width is 600 pixels

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:

You can download Amethyst from the following link:

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

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

  • 14th May, 2011: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)