Creating RIA with Adobe Flex framework

Introduction

Adobe Flex provides a platform for developing Rich Internet applications (RIA). Adobe Flex is not one thing but it is a combination of various languages, frameworks and builders like MXML, Action Script, SDK and Flex Builder. For creating Adobe Flex applications, we use the markup language MXML which is similar to XML in syntax. Action Script is the scripting language that provides dynamic capabilities. The Adobe Flex SD includes a rich set of APIs for building complex user applications and finally Flex Builder is an IDE based on Eclipse base platform that provides developmental support for building applications.

Download Adobe Flex Example Source Code

• Adobe Flex Sample Code

Download and Install Adobe Flex

The following section describes where to download and how to install Flex environment for building Adobe applications. Trial version of Adobe Flex builder is available for download from Adobe site from here for a period of 60 days. At the time of writing this article, the version of Adobe Flex builder available is version 4. After downloading it, install the product by opening up the file ‘Set-up.exe’. Choose the option ‘Continue to use as a trial’ and then click with proceed to get the product installed. For running Adobe Flex applications, a web browser is required with Adobe Flash player support. For IE browser, the flash player ActiveX control can be downloaded from here. For Mozilla firefox, the Adobe Flash player plugin can be downloaded from here.

Once the installation process is done, launch the IDE to setup the default browser used for running Adobe Flex applications. Go to Window –> Preferences and then expand the ‘General’ tree item and select ‘Web Browser’. From here you can configure the default browser to be used for running Adobe Flex applications.

Writing the first Adobe Flex application

Launch the Adobe Flash builder IDE if it is not already opened. Click File –> New –> Other and then expand the folder ‘Flash Builder’ to select the item ‘Flex Project’ and click ‘Next’ to proceed.

Provide a meaningful project name like ‘Hello’. Make sure that the application type ‘Web (runs in Adobe Flash player)’ is selected and the application server type is selected as ‘None/Other’ in the Server technology group and click next.

Leave the default output folder to ‘bin-debug’ and click finish. By default, a file ‘Hello.mxml’ is created with the following contents.

1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:Application>

As you can see the file ‘Hello.mxml’ contains the markup language. Edit the file in such a way that this file contains the following contents.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="500" minHeight="500" pageTitle="Hello World" backgroundColor="#A01A1A" 
			   width="600" height="400">
 
 
	<s:Button label="Hello world from Adobe Flex" 
		x="214" y="178" id="helloWorld" enabled="true" 
		fontFamily="Arial" fontSize="15" color="#000000">
	</s:Button>
 
</s:Application>

As you can see from the above code snippet, the root tag should be ‘Application’ for any Adobe Flex application. The minimum height and width are configured through the attributes ‘minWidth’ and ‘maxWidth’. The text appearing in the title bar of a web page can be controlled through the attribute ‘pageTitle’. The code also makes use of the attributes ‘backgroundColor’, ‘width’ and ‘height’. We want to display the text ‘hello world’ in this application and we wanted to get the text displayed in a button. For this purpose, we have declared the component ‘Button’ originating from the namespace ‘library://ns.adobe.com/flex/spark’. Note that we have used the attribute label to specify the caption for the button. Positioning of the button is done through the co-ordinates ‘x’ and ‘y’. Later on, in this article, we will show how to make use of various layouts for positioning the controls in a more controlled fashion. We have also used other properties of the ‘Button’ component just to illustrate its usage.

Once this application is written, it has to be compiled with a compiler. Adobe Flex builder comes with a pre-configured Flex compiler for compiling Adobe Flex applications. The name of the compiler for compiling MXML applications is ‘mxmlc.exe’ (read as compiler for mxml). Command-line invocation of this compiler can also be done. Go to the folder ‘ADOBE_FLEX_BUILDER_INSTALL_HOME\ sdks\4.1.0\bin’, note that ‘ADOBE_FLEX_BUILDER_INSTALL_HOME’ represents the home directory where the Adobe Flex builder IDE got installed and the version ’4.1.0′ may vary in your environment.

1

mxmlc PathToMxmlFile

However, this may not be required at all as the Adobe Flash builder IDE hides the complexities of compiling and running applications though a single click button. Click Ctrl+F11 to launch the application, this will open up the browser (as configured in the Preferences) .

Comments

comments