Flex 4

The Flex 4 is open source framework for building Rich Internet (RI) Application. In this section we will
see the features of Flex 4.

The Flex 4 is open source framework which allows the developers to write applications which runs in
Flash enabled browsers. The Flash player is available for almost all the browsers. So, if you develop
your application in Flex 4, your user's should be able to run the application in almost all the major
browser. The Flex 4 applications are compiled into .swf file and then distributed. It then runs on Flash
enabled browsers.

Here are the major features and changes in Flex 4

1. Integration with adobe Catalyst

2. Spark component architecture is major enhancement. It includes all the libraries to build user
interface for the applications. It includes data grids, buttons, layouts etc.
3. MXML 2009: The Flex 4 components are included in new package, so it has got a new name
space. So, you can use Flex 3 components along with Flex 4 components. Following example
defines both MXML 2009 and Halo component: 
<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/halo"> 
4. Improved view stack
5. FXG Support
6. Skinning Enhancements - Major enhancement is added into Flex 4 Skinning. It is much easy to
use.
7. Updated Layout Model
8. Flash Builder 4 - Commercial IDE for easy and fast development of Flex 4 based applications.
9. Compiler Performance
10. New Text Capabilities

Adobe Flex 4

Flex 4 is the next generation technology for Rich Internet Applications (RIAs). It is proving as a
magical tool for web developers as with the inception of Flash technology, the web development has
reached to a new paradigm. As it is known that Adobe Flex uses Adobe Flash platform for running its
applications, so in this perspective, the importance of Flex 4 increases because it offers the latest
features of Flex.

Flex 4 with its added extraordinary features can revolutionize the web development technology by
providing high-end features in the next generation web applications. Nowadays the trend of using RIA
is increased several times and most web browsers and latest mobile devices are being made to be
compatible to run the latest versions of Adobe Flash player. 

In the latest version of Flex, states can be separated from visual and can be created in Thermo as
well as Adobe suite CS4 tools that enables the developers to take advantage of the components built
on Flash XML Graphics (FXG) ? a new file format built on new MXML language namespace with
backward-compatibility with the older namespace ? and working directly with Flash player version 10.
This is the major advantage that can change the Flex development cycle paradigm.

So, it is essential for the web developers to have adequate knowledge of Flex 4 to counter the latest
demands of the clients. In this tutorial, we are covering the comprehensive course of Flex 4 from
Introduction to Flex 4 to creating the SocialStalkr project. 

You will also learn how to install Flex builder 4 software used for creating Flex 4 application and how
to create powerful Rich Internet Applications using Flex 4 in our tutorials. We will also provide you the
fundamental knowledge of Flex Builder 4 software and depth knowledge of developing applications
using the Flex XML-like scripting language, MXML, and ActionScript 3.0.

Moreover we will also provide you the information about how to build applications using layout and
navigation containers, and how to use states and transitions to maximize the ability of application to
respond to a large number of scenarios.

We have covered a wide range of syllabus including bringing data from various sources into your Flex
application, the procedure of using XML, PHP, and Adobe's powerful Live Cycle Data Services for
powerful interactions with Java environments, ActionScript 3, XML, E4X; Hello Spark, Spark
Containers, views states, effects and styling, Halo Flex4; building user-friendly forms using Flex
formatters and validators; and Cairngorm?s action for creating SocialStalkr like Twitter and Yahoo!
Maps etc. 

All our tutorials will full of practically proven codes that will help you further in developing complex
programs and flex based applications.

Getting started with Flex 4

Prior to begin working in Flex 4, you must have some prerequisite knowledge of basic programming
including concepts, processes, functions, constructions of programming, and softwares like XML,
HTML and CSS. 

The adequate knowledge of programming skills, and software will help you in assessing the
fundamentals of Flex 4. 

Flex 4 is the updated version of Flex 3 in which some extra features have been included, which ease
the difficulty in developing some more lucrative and intuitive applications very easily. 

For working in Flex 4, you will have to install the Flex 4 Software Development Kit (SDK) first. There
are two ways of using Flex framework first one and most recommended way is to install FlashBuilder
4 Integrated Development Environment (IDE) which includes Flex SDK4 and other essential
components like visual debugger, a visual profiler, a network monitor, and a Services view with
service introspection, and Adobe Flash Platform. The second option is to install SDK 4 and configure
it according to your settings. The SDK 4 too has similar components to FlashBuilder4 but lack of
Graphic User Interface. It means SDK4 users will have to use the command prompt to compile, run,
testing and debugging the applications. 

The Flex 4 runs on two platforms Adobe Flash Player and Adobe AIR. The Flash Player runs on
client’s browser while Adobe AIR on desktop. User can choose one of them accordingly. 

To access back-end databases and other systems Flex has numerous networking APIs supporting
everything from plain XML, JSON, SOAP Web Services, and optimized protocols like AMF. The Flex
source code (.mxml and .as files) is compiled into.swf file that is executed at the client side by the
ActionScript Virtual Machine in Flash Player or Adobe AIR.
Flex 4 Features

Flex released its new version Flex 4 with huge changes in its architecture. Along with this new
release, adobe also released new flex application builder tool named Flash Builder which was
formerly known as Flex Builder

New version of flex emphasizes at features like:

1. Enhanced and greatly improved user appearance by extending features of existing

components and introducing new components.
2. Improved developer productivity and increased compilation speed.
3. Taking advantages of new features of flash player

Flex 4 features:

Flex 4 delivers wide variety of new and enhanced features. Here is a list of some important features.

1. New flex 4 components are spark based which are built on top of the existing flex 3 halo
components

2. Spark and Halo components can be used together

3. Use of FXG (Adobe Flash XML Graphics) to create shapes like eclipse, rectangle etc.

4. Enhanced States Syntax

5. ASDoc to generate documentation for MXML components

6. Two-way Data Binding

7. New Effects for Components and Graphics

8. Support for 3D effects

9. Support for CSS namespaces

10. Virtualized Layouts and DataGroups

11. Support for Vector to restrict to a single type

12. RSL linking by default to reduce the application size rather than static linking

13. StyleManager for every module

14. Support for FTE and TLF text providing new style text

15. Support for MXML Graphics runtime layout modifications

16. Validation of styles against the theme

 17. Support for layout mirroring for languages that are written from right to left instead of left to
right

List of spark components available in Flex 4

1. Application
2. WindowedApplication
3. Window
4. TitleWindow
5. BorderContainer
6. SkinnableContainer
7. SkinnableDataContainer
8. Panel
9. Group
10. DataGroup
11. Scroller
12. TabBar
13. Button
14. ButtonBar
15. ScrollBar
16. CheckBox
17. ComboBox
18. RadioButton
19. TextInput
20. RichText
21. RichEditableText
22. TextArea
23. Label
24. List
25. DropDownList
26. Spinner
27. Slider
28. NumericStepper
29. VideoPlayer

Installing and Running Flash Builder 4

With the release of Flex 4, adobe also released Flash Builder 4 tool that was formerly known as Flex
Builder. This tool is available commercially but you can use its trial version for 60 days period. Further
in this tutorial, you will see how to install and run it.

Step 1: Download the flash builder

Download the flash builder from adobe website url http://www.adobe.com/products/flashbuilder/

To buy the flash builder, click the link "Buy Now" and to download for trial purpose , click the link "Get
the trial". Create an account with Adobe and get the executable file for flash builder. Save the file to
your system.

Step 2: Execute the downloaded file

Double click the downloaded file and provide the location where you want the file to be extracted. In
our case, it is C:\FlashBuilder4

Step 3: Click the Next button, it will show screen like below:

Step 4:After files are extracted, go to the location as given in picture below where you will see Set-
up.exe.

Step 5:Double click the setup, a installer window opens.

Step 6:Next, you will see software license agreement window.

Step 7:Accept the agreement by clicking the ACCEPT button. Now, You will see new screen asking
for providing serial number or use as trial.

Step 8: If you want flashbuilder as trial product then select "Install this product as a trial" and click
NEXT button.
Step 9: Specify the location where you want to install the flash builder. In our case, it is default
location that is already selected by the installer. Click INSTALL button to start installing the builder.

Step 10: You will see the screen below when installation completes. Click done button.

Step 11: Now, to start flash builder, go to the location as shown in picture below. 
  

Step 12: Double click the FlashBuilder.exe. You will see the flash builder is  opened and is showing
the start page as shown in picture below:

Flex 4 Hello World

Developing Hello World Example in Flex 4 using Flash Builder 4

Before creating Hello World example, you need flash builder 4 installed already in your system. Open
Flash Builder 4 and follow the following steps to create this example.

Step 1: Go to File->New->Flex Project and click on Flex Project

Step 2: Enter project name. For this example, it is HelloWorldApp as shown int the picture below. Let
the Use default location option selected if you want to make the application in the default directory the
flash builder selects. Also, you can select any other location which suits you best.

Step 3: Click Finish. Project directory structure is displayed on the left and application source code is
displayed on the right. You will see the screen as below.
Step 4: Click the Design tab to see the application in design mode. Components tab on the left
displays the list of components.

Step 5: Drag the Label component from the set of components on the left and drop on the application
design panel. You will see the label component is created. Change the properties of the label from
the properties tab on the right. For this example, change text to "Hello World in Flex 4", text font size
to 20 and text font color to "#43B145".
Click the source tab again, the source code modified will be displayed as in picture below:

Step 6:  Save all the changes by pressing Ctrl+S and run the application by pressing Ctrl+F11. The
default browser opens automatically and application will be displayed on it. The output of our example
will be like below:

This is simple hello world application, now you can modify the application based on the requirement
of your application. For this you need to learn about all components flex provides.
Flex Variables

A variable is a reference to the value associated with it. Variables are used to store values for the
application.

A variable is a reference to the value associated with it. Variables are used to store values for the
application. 

In flex, var statement is used to declare the variable.

var myVar:int;

Variable is assigned a value using assignment operator (=).

myVar = 10;

Declaration and assignment of the variable can be done simultaneously.

var myVar:int = 10;

The type of the variable can be any predefined type provided by flex or custom data type.
var myVar:MyClass
= new MyClass();

Flex Variable Scope

Scope of the variable defines the accessibility of the variable across the application.
The global variable has global access to the application and local variable is restricted to the block of
code only. The variable defined outside of the class or function is declared as global. Variables
defined inside a function or class is assigned the scope of the function or class itself.

Flex Data Types

The data type of the variable defines the type of the value this variable can have. Each data type
represents some set of values. For example, int variable can have any integer value and Boolean can
have true or false values.

Primitive Data types:

int, uint, Number, Boolean, String, Null and void

Complex Data types:

Array, Date, Error, Function, RegExp, XML, and XMLList

Flex Objects

Objects are real entity conforming the template or blueprint defined by its class. The class defines the
properties and behavior for its objects. Flex provides numerous built in classes like  String, Boolean,
Number, Array etc. You can also define your classes called user defined classes and make objects
of these classes according to the need of your application.

var bool:Boolean = new Boolean(true);

var myObj:MyClass = new MyClass();
Flex Functions

A function is a block of set of statements that is made to perform some specific task. It?s a reusable
entity and can be invoked several times in an application. 

public function init():void {

         var bool:Boolean
= new Boolean(true);

         var myObj:MyClass = new MyClass();

Flex Looping

Executing a set of statements repeatedly is performed through looping. For this purpose, Flex
provides some looping mechanism like:

1. for
2. for..in
3. for each..in
4. while
5. do..while

Flex Arrays

An array is a collection of elements. These elements can be accessed by indexing starting from 0.
Flex provides Array class to work with arrays. Array can store dissimilar type of elements like string,
number etc.

Declaration and assignment simultaneously:

var myArray:Array = {"RoseIndia", 10, new MyClass()};

Declaration and assignment separately:

var myArray:Array = new Array();

myArray[0] = "RoseIndia";

myArray[1] = 10;

myArray[2] = new MyClass();

You can add any element to the end of the array using push() method and remove the last element
by pop() method.
//push() adds the element in the last of the
arraymy
Array.push("RoseIndia");

// pop() removes the last element from the

array.
myArray.pop();

Flex ArrayCollection

ArrayCollection provides more functionalities than an Array. It provides methods

like addItem(), addItemAt(), contains(),getItemIndex(), removeAll() etc which makes
ArrayCollection more useful rather than using Array. It also supports change listener that listens when
arraycollection is updated. Listeners can be added to listen the event.

// Creates ArrayCollection of 0 elements

var myArrayCollection:ArrayCollection
= newArrayCollection();

// Creates ArrayCollection using existing Array

var myArrayCollection:ArrayCollection
= newArrayCollection(myArray);

// Creates ArrayCollection and assigns values

var myArrayCollection: ArrayCollection
= newArrayCollection(["RoseIndia", 10]);