June 14, 2008

Flex Builder Basics

Posted by Jeremy Mitchell
A Flex application is the result of one or more MXML and / or ActionScript files compiled into a SWF and delivered via HTTP to the client's browser. The Flex SDK provides everything you need to create Flex applications and is available at no cost to you. Armed with a text editor and the Flex SDK, developers can create simple to complex Flex applications.

The process includes the following steps:
  1. Download the Flex SDK
  2. Create a text file with a .MXML extension to serve as your application root file
  3. Create one or more files with a .MXML extension to dictate your application structure and layout
  4. Create one or more files with a .AS extension to encompass your application functionality
  5. From a command line, launch the Flex compiler to convert your MXML and ActionScript files into a published SWF file
More detailed instructions on command line Flex development can be found at Adobe - Flex Developer Center.

Another more practical option available to Flex developers includes the use of Adobe's Flex Builder. Flex Builder is a fully-functional IDE (Integrated Development Environment) available as a plugin for the Eclipse open-source platform. A stand-alone version of Flex Builder is also available and includes a customized distribution of Eclipse coupled with the Flex Builder plugin.

Priced from $250, Flex Builder 3 provides a host of features designed to improve developer productivity and application quality. Features include:
  1. Coding tools (syntax coloring, code completion, code collapse, code refactoring)
  2. Debugging tools (step-through debugger)
  3. WYSIWYG design tools (prebuilt UI components, drag-and-drop layout manager, application transitions (view states), component property inspector)
  4. Styling / skinning tools (CSS design manager, skin manipulation)
  5. Charting tools
  6. Testing tools
  7. Performance monitoring (profiling) tools
The Flex Builder IDE is organized into three perspectives:
  1. Flex Development perspective
  2. Flex Debugging perspective
  3. Flex Profiling perspective
A Flex Builder perspective is a collection of views and editors utilized to perform a group of related tasks (i.e. development tasks, debugging tasks & performance monitoring (profiling) tasks).

Editors are provided for MXML, ActionScript & CSS code authoring and editing. The MXML & CSS editors operate in two modes - source mode & design mode. The ActionScript editor operates in source mode only. Most developers feel comfortable working with the source code of an application, and therefore, spend a lot of time in source mode. Certain tasks (i.e. web service consumption) require the use of Flex Builder's source mode while other tasks encourage the use of Flex Builder's design mode (i.e. UI layout). However, in many cases the choice is a matter of preference as many tasks can be accomplished in either mode (i.e. UI controls instantiation).

Views encapsulate related functionality required of productive developers. Examples include the ability to visually navigate your application hierarchy (Outline View), display properties for a selected element (Flex Properties View), instantiate containers and controls on-the-fly (Components View), or define application states (States View). Views are also used to organize attributes of a Flex application (i.e. problems, breakpoints, variables, expressions, etc.)

As an Eclipse plugin, Flex Builder integrates seamlessly with other complimentary development tools including Subversion and CVS (source control), ANT (automated build tool), FTP (file transfer), unit testing and more.

With Eclipse and Flex Builder 3, developers have the tools necessary to build high quality, robust business applications.

No comments: