Adobe Flex: Introduction to Flex 3 – Part 1

In this part, we will learn the following:

• Understanding Adobe Flex
• Adobe Flex product line
• Flex Architecture
• Flex resources

Understanding Adobe Flex

Adobe Flex is a RIA User Interface Framework that enables us to develop Rich Internet Application quickly, resulting in high productivity and customer satisfaction.

Adobe Flex is a highly productive, free open source framework which is used for building expressive web applications. Adobe Flex deploy consistently on:

• All major browser leveraging the Flash Player
• And on desktop with Adobe AIR

Where is Flex Used?

How Flex works?

The backbone of flex is ActionScript 3 and MXML (Macromedia XML). MXML again is set of ActionScript classes which comprises of some built-in UI components like Datagrid, Treegrid, Menubar, chart and so on.

MXML is used for creating the User Interface and ActionScript is used for event handling, data management etc.

Once the MXML and ActionScript is created and compiled, it gets converted into swf file and hence to view the Flex application we need flash player supported browsers.

Flex enables…

Flex Architecture

Lets look at high level of flex architecture

Flex Resources

Flex tutorials
http://www.tutorom.com/courses/460/Adobe-Flex-2-tutorials-Flex-2-programming-tutorials.htm

Documentations
http://flex.org/
http://www.adobe.com/support/documentation/en/flex/

Flex component explorer
http://examples.adobe.com/flex3/componentexplorer/explorer.html

Flex tutorial – Part 2 Topics

Flex Builder

• Understand the Flex builder and its workbenches
• Use Flex builder effectively for design, development and debugging
• Create a Flex Project
• Create, compile and run a Flex application

Go to part 2 of this tutorial

Rich Internet Applications (RIAs)

Rich Internet Application (RIA) – this is the buzz word we hear quite often these days. Rich Internet Application which was coined by macromedia in 2002, was not very common till few years back, but with Web 2.0 boom RIA got a solid place in the web world.

So what is RIA

Earlier web was known as a one way communication system, where company use to showcase their details to end users. With the web 2.0 emergence, things totally changed. Web 2.0 gave the world wide web altogether a different persona. Where web was known to be a one way communication system, web 2.0 made it two way communication, where user was the king. Users can comment, rate, network, tag and so on and so forth.

Along with these flexibilities web 2.0 brought lot of new tools and technologies and concepts like Ajax, Adobe AIR, Adobe Flex, SilverLight, Isomorphic SmartClient and so on. With all these concepts came a buzz of creating web applications with richness and that is where RIA comes into picture.

So what does ‘Rich’ means in Rich Internet Application?

Rich Internet Application are applications which combine the flexibility and responsiveness of a desktop application with broad reach of the web. RIA gives user the flexibility to use a web application with the features that of a desktop application.

What is the concept of ‘rich’ in Rich Internet Application ?

The concept of richness can divided into 2 parts

• Richness in User Interface
• Richness in Data model

Richness in User Interface

Rich Internet Application (RIA) offers a very rich set of user interface controls which can intelligently interact with data model. some of them are:

Drag and Drop control and Accordion control

Auto Complete control

Tree Grid control

Data Grid control and Data sorting control

Charting control

Calender control

Rich Text editor control
Inline editing control
Auto save control

Richness in Data model

Any website or application is incomplete without data, so having a rich data model to fetch or control these data is important. Richness in data model means

• Ability to send and receive data asynchronously
• Ability to obtain data from server without redrawing the entire page
• Efficiently utilizing network bandwidth transmitting only the portion of data that has been changed
• Support of sophisticated data models

Anatomy of RIA
Adobe in one of their presentation showcased RIA as follows

Benefit of Rich Internet Application
Rich Internet Application (RIA) brings in lot of benefits for the end users and well as developers and companies. Some of them are as follows:

For End Users

• Responsive and Interactive
• Real time communication
• Fast and easy to use
• Allow users to remotely monitor and manage data
• Allows quicker task completion
• Cross platform support

For Business

• Increased customer loyalty
• Increase in new customers
• Increased productivity
• longer site visits
• Reduced bandwidth and operational costs

For Developers

• Easy to learn
• Ease of development

RIA tools and technologies
The term Rich Internet Application(RIA) may be new, but the technologies which RIA uses is the combination of already existing technologies. Most commonly used RIA tools and technologies are:

RIA Technologies

• Ajax (Asynchronous JavaScript and XML)
• XML
• JavaScript Object Notation (JSON)
• Advanced JavaScript

UI Frameworks

• Adobe Flex
• Microsoft Silverlight
• Google Web toolkit (GWT)
• Isomorphic SmartClient
• Java server faces (JSF)

JavaScript Frameworks

• Yahoo UI (YUI)
• JQuery
• Prototype
• Scriptaculous
• Dojo Toolkit
• Mootools