What is Flex?

Flex is a developer toolkit for building exceptional rich Internet applications on the Flash platform.

Efficient Programming Model

Developers write Object Oriented code using the MXML,ActionScript 3, and CSS languages. These languages are easily learned by developers from many different backgrounds such as .NET, ASP, PHP, C#, JAVA, HTML, and JavaScript. Flex supports a component-oriented programming model that allows developers to easily assemble applications from hundreds of components and extend base components to create custom interactions.

Developer Tools

The Flex SDK includes a compiler, debugger, and hundreds of out of the box components. Using these tools from IDEs, the command line, or from build tools like Ant, code is compiled into cross-platform applications.

In addition to the free SDK, Flex developers can use Flash Builder to build applications. Flash Builder is an IDE for Flex development built on top of Eclipse. It includes a Design View and a sophisticated code view featuring code completion, smart editing and code refactoring. Flash Builder also includes a visual debugger, a visual profiler, a network monitor, and a Services view with service introspection.

Server Integration

Flex applications run on the client either in a browser with Flash Player, on the desktop with Adobe AIR, or on mobile devices. 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.

Runtime Consistency

The Flex source code (.mxml and .as files) is compiled into Flash bytecode (.swf) that is executed at the client side by the ActionScript Virtual Machine in Flash Player or Adobe AIR.

The Flash Platform runtimes, Flash Player and Adobe AIR, are cross-platform runtimes that work consistently on a variety of hardware, operating systems, and browsers.

Plentiful Components

The Flex SDK contains hundreds of out-of-the-box components. DataGrids, Charts, Formatters, Validators, and numerous other UI controls are the building blocks for applications of all sizes. Components can be styled and skinned to fit the look and feel you want. There are also hundreds of third party open source and commercial components available for Flex. Mapping APIs, Data Visualization libraries, and Cloud APIs provide the building blocks for assembling great applications. Check out Tour de Flex to see many of the available components for Flex.

Outstanding Performance

By doing data visualization and UI interactions on the client-side less time is spent waiting for a server to respond. This offloading and client-side state handling makes back-ends more scalable and efficient. Interactions like filtering and sorting no longer need to round-trip all the way to the server or database. This makes software more responsive and easier to use.

Learn to use Adobe Flex 4 and Flash Builder 4 in a week by stepping through this training course.

Prerequisite knowledge:
Basic programming concepts like C, C++, PHP, PHP++, JavaScript, XML, HTML, and CSS processes, and constructs

Course Content:

Flex basics

Introducing Adobe Flex 4

• Adobe Flex 4 - Introducing Flex and the Adobe Flash Platform
• Adobe Flex 4 - Incorporating Flex into the client/server world

Setting up Flash Builder

• Adobe Flex 4 - Exploring Flash Builder and Flash Player
• Adobe Flex 4 - Using Flash Builder
• Adobe Flex 4 - Compiling and viewing the application
• Adobe Flex 4 - Setting up Flash Builder and your project files

Event and data basics

Understanding event-driven development

• Adobe Flex 4 - Implementing event handlers
• Adobe Flex 4 - Handling a user event
• Adobe Flex 4 - Understanding the event object and bubbling
• Adobe Flex 4 - Using the event object
• Adobe Flex 4 - Adding event listeners with ActionScript
• Adobe Flex 4 - Using the addEventListener() method

Retrieving remote data

• Adobe Flex 4 - Introducing ArrayCollection and other data types
• Adobe Flex 4 - Verifying data retrieval with Debugger and Network Monitor
• Adobe Flex 4 - Populating an ArrayCollection with retrieved data
• Adobe Flex 4 - Introducing RPC

Creating a typed data model

• Adobe Flex 4 - Introducing the MVC pattern
• Adobe Flex 4 - Separating the model, view, and controller
• Adobe Flex 4 - Programming ActionScript classes
• Adobe Flex 4 - Creating an ActionScript class and instances
• Adobe Flex 4 - Implementing a value object and a typed data model
• Adobe Flex 4 - Creating an ArrayCollection of value objects
• Adobe Flex 4 - Generating value objects using Flash Builder data services
• Adobe Flex 4 - Using the Data Services wizards to connect to a service

Data handling and manipulation

Extending events

• Adobe Flex 4 - Creating an event type and dispatching the event object
• Adobe Flex 4 - Creating an event type and dispatching the event object
• Adobe Flex 4 - Extending the Event class to pass data in the event object
• Adobe Flex 4 - Extending the Event class to pass data in the event object
• Adobe Flex 4 - Dispatching a value object from the custom component
• Adobe Flex 4 - Dispatching a value object from the custom component

Validating and formatting data

• Adobe Flex 4 - Using formatters
• Adobe Flex 4 - Formatting dates
• Adobe Flex 4 - Validating form data
• Adobe Flex 4 - Validating form data

Learning more about handling data

• Adobe Flex 4 - Implementing two-way binding
• Adobe Flex 4 - Using a two-way binding
• Adobe Flex 4 - Using the Flash Builder data wizard
• Adobe Flex 4 - Creating a master/detail interface with a wizard

Page layout and animation

Displaying data with the DataGroup container

• Adobe Flex 4 - Representing data in default item renderers
• Adobe Flex 4 - Passing data to item renderers for display
• Adobe Flex 4 - Creating a custom item renderer
• Adobe Flex 4 - Displaying dynamic data in a custom item renderer

Displaying data with List-based control

• Adobe Flex 4 - Implementing a Spark item renderer in List-based controls
• Adobe Flex 4 - Implementing a Spark item renderer in List-based controls
• Adobe Flex 4 - Creating and formatting the DataGrid control
• Adobe Flex 4 - Using the DataGrid control
• Adobe Flex 4 - Creating item renderers and item editors
• Adobe Flex 4 - Creating and using item renderers and item editors

Creating and navigating "pages" in a UI

• Adobe Flex 4 - Understanding navigator containers
• Adobe Flex 4 - Navigating using navigator containers
• Adobe Flex 4 - Creating "pages" with Flex states
• Adobe Flex 4 - Creating and navigating application states
• Adobe Flex 4 - Laying out an application
• Adobe Flex 4 - Using constraints to control component layout
• Adobe Flex 4 - Creating a scalable UI

Animating components and states

• Adobe Flex 4 - Animating components with effects
• Adobe Flex 4 - Animating components with effects
• Adobe Flex 4 - Animating states with transitions
• Adobe Flex 4 - Applying transitions to view states

Adding visual appeal

Controlling text display

• Adobe Flex 4 - Introducing the text controls
• Adobe Flex 4 - Using text controls
• Adobe Flex 4 - Using the Text Layout Framework
• Adobe Flex 4 - Using text layout features

Styling the visual display

• Adobe Flex 4 - Defining styles in CSS
• Adobe Flex 4 - Defining selector styles
• Adobe Flex 4 - Introducing advanced CSS selectors
• Adobe Flex 4 - Using advanced CSS selectors

Skinning Spark components

• Adobe Flex 4 - Introducing skinning
• Adobe Flex 4 - Drawing with MXML graphics
• Adobe Flex 4 - Creating and applying skins
• Adobe Flex 4 - Creating custom skin properties
• Adobe Flex 4 - Creating custom skin properties
• Adobe Flex 4 - Implementing skin parts
• Adobe Flex 4 - Creating a vertical title bar on a Panel control
• Adobe Flex 4 - Implementing skin states
• Adobe Flex 4 - Animating button components
• Adobe Flex 4 - Skinning the SkinnableDataGroup container
• Adobe Flex 4 - Skinning the SkinnableDataGroup container