Adobe Flex: Flex Builder – Part 2

Understanding Adobe Flex Builder

Adobe Flex Builder is eclipse based development tool enabling:

• Intelligent coding that included editors like MXML, ActionScript, CSS, XML.
• Interactive step-through debugging and code hinting
• Rich Visual layout
• Visual UI and behaviors
• Interactive data visualization
• Skinning and styling

Flex builder consists of workbenches which refers to the flex builder development environment. The Flex builder workbench contains three primary elements

• Perspectives
• Editors
• Views

Perspectives

Perspectives are one of the element of Flex builder workspace.
Perspectives includes combination of views and editors that are suited to perform certain set of task.

Flex builder has two default perspectives

Development

This area is the development workspace and is used for code level development.

Debugging

This area is used for debugging the code.

Flex builder can have other perspectives if we are using plug-in configuration, like java.

Editors

An editor is the visual component in the workbench that is typically used to edit or browse the resource.

Flex builder Editor is where files of various types are edited in either

• Design mode

Design mode consists of visual components, which can be dragged , dropped and used.

• Source mode

Source modes is used for hand coding.

Views

A view supplies support tool when modifying a file in editor. Flex builder workbench consists of the following views

• Navigator view

Navigator view allows you to manage files, folders and projects

• Problems view

Problems view show errors in your code

• Outline view

Outline view hierarchically present and allows you to navigate to, all of the code elements and user interface in a file

Flex builder high level description with design mode enabled.

Flex builder high level description with source mode enabled.

Back to part 1 of this tutorial | part 3 – Creating a Flex project and your first application

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