Flex 4: Developing Rich Internet Applications

This 4-day course provides experienced application developers with hands-on, practical experience using Flex. It introduces developers to all the primary features of Flex they'll need to know in or build a fully functional, well architected front end..

Course Outline

Flex 4: Developing Rich Internet Applications provides experienced application developers with hands-on, practical experience using Flex. This four day course introduces developers to all the primary features of Flex they'll need to know in or build a fully functional, well architected front end for a Rich Internet Application (RIA).

Objectives: After completing this unit, you should be able to:

• Describe the target audience and prerequisites for this course
• Describe the course content and objectives

Audience To gain the most from this class, you should already:

• Be familiar with basic programming concepts, processes and constructs
• Be familiar with XML, HTML and CSS

Course outlines Unit 1: Introducing the Course

Introducing mastery learning

Understanding the course format

Reviewing the course prerequisites

Reviewing the course outline

Unit 2: Introducing Adobe Flex 4

Introducing the Adobe Flash Platform

Introducing the technologies

Building Flex applications

Experiencing web and desktop applications

Learning more about Flex

Understanding Flex development technologies

Understanding the Flex framework, SDK and tool

Understanding Adobe Flash Builder 4

Understanding Flex application deployment

Exploring the Flash Builder interface

Grouping projects with workspaces

Understanding the workbench

Understanding editors and views

Understanding perspectives

Adding and configuring components in Design mode

Creating a Flex project

Using the New Flex Project wizard

Walkthrough 1: Creating a main application file and running it

Unit 3: Understanding Flex 4 Fundamentals

Understanding Adobe Flex namespaces

Understanding how namespaces translate into Flex libraries

Understanding Flex components

Assigning component properties

Laying out and styling with Flash Builder

Setting component properties

Setting styles using a CSS style sheet

Compiling and running an application

Compiling the application

Running the application

Walkthrough 1: Creating an application and configuring its controls in Design mode

Creating custom components

Controlling component layout in containers

Defining and using a custom component

Introducing skinning

Defining a skin class

Applying a skin class

Walkthrough 2: Creating and skinning custom components

Accessing and using structured data within a custom component

Declaring non-visual objects in MXML

Defining inline event handlers

Generating event handler functions

Introducing data binding

Implementing data binding

Declaring and using bindable properties

Passing data to an embedded control through a custom component property

Walkthrough 3: Accessing and using structured data in a custom component

Updating visual controls using dynamic data

Capturing the current item in a list control

Using data binding to dynamically update visual controls

Adding and removing event listeners using ActionScript

Walkthrough 4: Updating visual controls with dynamically assigned data

Unit 4: Introducing Object Oriented Programming

Introducing OOP terminology

Understanding classes

Understanding instances and objects

Understanding class relationships

Understanding MXML classes

Exploring the Flex framework classes

Creating class instances

Extending the Flex framework classes

Walkthrough 1: Using MXML classesCreating a class property

Creating the property

Controlling access

Creating and using a public property

Walkthrough 2: Creating a class property

Writing a class definition in ActionScript

Creating a class

Packaging a class

Naming a class

Understanding the constructor

Creating class properties

Assigning property values through the constructor

Making properties or classes bindable

Walkthrough 3: Creating an ActionScript class

Creating instances of an ActionScript class

Walkthrough 4: Creating instances of an ActionScript class

Creating class methods

Walkthrough 5: Creating a class method

Unit 5: Understanding Components and Layouts

Introducing visual components

Introducing Spark vs MX components

Understanding components

Introducing Spark layout classes

Defining the layout property

Understanding the BasicLayout class

Understanding the HorizontalLayout class

Understanding the VerticalLayout class

Understanding the TileLayout class

Custom layout classes

Walkthrough 1: Using layout classes in an Application container

Introducing the Spark container classes

Understanding how the containers work

Understanding the Spark containers

Reviewing the Application container

Introducing the Group container

Introducing the Panel container

Sample application layout

Introducing the BorderContainer

Walkthrough 2: Using different containers with layouts

Using constraints to control component layout

Understanding constraint-based layout basics

Rules to control component layout

Constraint-based vs. traditional container layout

Visually assigning anchors

Walkthrough 3: Implementing a constraint-based layout

Adding scrollbars to containers

Implementing the Scroller class

Walkthrough 4: Using a Scroller

Unit 6: Handling Events

Understanding events

Handling Framework events

Handling user events

Implementing event handlers

Using inline ActionScript in MXML

Walkthrough 1: Using inline ActionScript for event handling

Creating ActionScript event handler functions

Defining a function in an MXML document

Creating functions in external files

Walkthrough 2: Using a function for an event handler

Understanding the event object

Introducing the event object

Exploring event object properties

Datatyping the event object

Understanding event bubbling

Distinguishing currentTarget and target

Introducing event bubbling

Walkthrough 3: Using the event object

Adding event listeners with ActionScript

Walkthrough 4: Using the addEventListener() method

Unit 7: Validating and Formatting Data

Using the Form container

Introducing the Form components

Using form components

Using the FormItem container

Creating a Form custom component

Walkthrough 1: Using a form

Using formatters

Using formatters

Walkthrough 2: Formatting currency

Validating form data

Creating a Validator with MXML

Creating a Validator with ActionScript

Handling Required Values

Triggering validation with events

When validation fails

Using the NumberValidator Class

Walkthrough 3: Validating Numeric Input

Triggering validation with ActionScript

Suppressing automatic validation

Using the validate() method

Triggering multiple validators

Walkthrough 4: Triggering Validation with ActionScript

Unit 8: Controlling Navigation

Understanding MX navigator containers

Controlling container display

Introducing the MX navigator containers

Using the ViewStack container

Understanding ViewStack basics

Navigating with the LinkBar control

Navigating with the TabBar control

Displaying and resizing the ViewStack child containers

Deferring instantiation of ViewStack child containers

Using a Spark container inside MX navigator containers

Walkthrough 1: Navigating using the ViewStack and TabBar control

Creating custom navigation for the ViewStack container

Setting the active ViewStack child containerEnabling buttons dynamically

Using the TabNavigator container

Using the Accordion container

Walkthrough 2: Navigating using the TabNavigator and Accordion containers

Unit 9: Controlling Application State

Understanding view states

Introducing view states

Creating view states in Design mode

Creating view states with code

Walkthrough 1: Creating multiple states

Controlling view states

Introducing the currentState property

Switching between states

Walkthrough 2: Controlling view states using MXML

Unit 10: Animating Components and States

Applying effects to components

Interacting with users using animated effects

Understanding effect basics

Reviewing available effects

Defining an effect

Playing an effect

Walkthrough 1: Applying an effect to a component

Creating composite effects

Walkthrough 2: Creating parallel and sequential effects

Applying transitions to application state changes

Creating transitions

Adding and removing components during animations

Walkthrough 3: Animating between states

Unit 11: Controlling Visual Display with Styling

Creating global application styles

Generating the styles using the Appearance view in Design mode

Flash Builder automatically creates CSS file

Global vs. Application selector

Walkthrough 1: Creating global styles

Defining styles and skins for components

Creating Flex component selectors

Create custom component selectors

Applying a component skin via CSS

Walkthrough 2: Creating selector styles and skins

Introducing Advanced CSS selectors

Descendent selector

id selector

Class selector

Pseudo selector

Walkthrough 3: Using advanced CSS selectors

Unit 12: Skinning Spark Components

Introducing skinning

Understanding Spark skins

Setting styles inline in the MXML tags

Introducing the skinnable Spark container classes

Creating a skin for Spark components

Walkthrough 1: Creating and applying skins

Incorporating visual elements drawn in other programs

Introducing FXG

Walkthrough 2: Using a shape drawn in Adobe Illustrator

Changing the default display of skin parts

Reviewing the contentGroup skin part for containers

Understanding a Button control’s skin part

Understanding the Panel container’s skin parts

Finding skin parts for any component

Choosing a component to display the skin part

Walkthrough 3: Creating a vertical header for the Spark Panel container

Unit 13: Implementing Advanced Skinning Techniques

Implementing different visual states for a skin

Understanding skin states in Button component

Assigning properties for each state

Animating the button states

Walkthrough 1: Creating animated states in a Button control skin

Accessing custom component properties from a skin

Defining the custom property in the custom component

Creating the skin and component contract

Referencing the properties in the skin

Walkthrough 2: Implementing a skin on multiple instances with different properties

Adding scrollbars to skins

Using the Scroller with nonskinnable containers

Using the Scroller with skinnable containers

Walkthrough 3: Making a component scrollable using a skin

Unit 14: Accessing Remote Data

Using HTTPService to load remote data

Using the HTTPService class

Process for making HTTP requests

Retrieving data with lastResult

Understanding the ArrayCollection results

Using results in data bindings

Walkthrough 1: Creating an HTTPService request and using the lastResult property

Handling returned data and faults

Handling results

Handling faults

Displaying messages with an Alert pop-up

Using result and fault handlers example

Walkthrough 2: Using result and fault handlers

Making HTTP requests with parameters

Using explicit parameter passing

Using parameter binding

Walkthrough 3: Making HTTP requests with parameters

Using the wizards

Understanding the CallResponder class

Creating a master/detail form

Walkthrough 4: Using the wizards

Unit 15: Creating a Typed Data Model

Understanding the need for a typed data model

Working with a model of generic data

Creating a model of typed data

Understanding value objects

Creating value objects

Creating an ActionScript class for typed data

Reviewing classpaths and packages

Creating class files

Defining class access modifiers

Creating class constructors

Defining class properties

Instantiating an ActionScript class

Walkthrough 1: Creating a value object class

Populating an ArrayCollection with value objects

Comparing ArrayCollection with ArrayList

Walkthrough 2: Populating an ArrayCollection of value objects

Understanding data bindings with value objects

Making ActionScript class properties bindable

Binding the view to the model

Binding two-way

Walkthrough 3: Implementing data bindings

Refactoring value objects

Downcasting object references

Walkthrough 4: Refactoring a value object

Unit 16: Extending Events

Understanding the problem with bindings

The problem of using bindings

Creating loosely coupled components

Defining the event type

Defining the event in the dispatching component

Triggering the event from a user or system event

Instantiating the event

Dispatching the event to the main application

Handling the event in the main application

Walkthrough 1: Creating and dispatching an event

Extending the Event class

Creating the extended class

Extending the Event class

Adding properties

Creating the constructor

Using the extended event class

Using the Metadata compiler directive

Dispatch the extended event

Handling the event in the main application

Walkthrough 2: Extending the Event class to dispatch the event object with data

Dispatching a value object with the extended event

Accommodating a value object in the extended event

Walkthrough 3: Dispatching a value object in the extended event

Overriding the clone method

Passing a parameter to toggle event bubbling

Walkthrough 4: Utilizing the clone() method

Unit 17: Rendering Content with the DataGroup Container

Displaying string data in an item renderer

Understanding DataGroup container basics

Implementing the DataGroup container

Using the default item renderer

Walkthrough 1: Using DefaultItemRenderer

Passing UI components in the data provider

Rendering visual controls

Mixing data item types

Walkthrough 2: Using the DefaultComplexItemRenderer

Creating a custom item renderer

Understanding the limits of the default item renderer

Creating a custom item renderer

Creating a nested item renderer

Referencing an external item renderer class

Using data in an item renderer

Walkthrough 3: Creating a custom item renderer with data

Using the SkinnableDataContainer

Implementing the SkinnableDataContainer

Creating the skin component

Walkthrough 4: Applying a skin to the SkinnableDataContainer

Unit 18: Displaying Data Using the DataGrid

Using the DataGrid control

Supplying data to a DataGrid control

Specifying DataGrid control columns

Walkthrough 1: Specifying DataGrid control columns

Formatting DataGrid control columns

Creating reusable label functions

Walkthrough 2: Formatting data in DataGrid control columns

Using item renderers and item editors

Understanding Item renderers versus item editors

Introducing the types of item renderers and item editors

Walkthrough 3: Using a drop-in item editor

Inline item renderers and item editors

Walkthrough 4: Using an inline item editor

Item renderer and item editor components

Using Spark components in <mx:DataGrid> item renderers

Walkthrough 5: Using a component item renderer

Using events and selected items with a DataGrid component

Walkthrough 6: Using a change event on the DataGrid control

Unit 19: Deploying Flex and AIR Applications

Compiling the Flex application

Compiling automatically

Modifying compiler settings

Embedding the SWF in the HTML wrapper

Understanding the runtime shared libraries

Creating a Flex application production build

Creating a release build

Walkthrough 1: Creating a Flex application production build

Creating a desktop application

Creating an AIR project

Understanding some differences between Flex and AIR applications

Exporting a release build

Walkthrough 2: Creating a desktop application

Appendix A: Student Setup Guide

System Requirements

Machine requirements

Software Requirements

Setup Instructions

Installing Flash Builder 4

Installing the Course Files

Additional Details

Pre-Requisites

* Be familiar with basic programming concepts, processes and constructs * Be familiar with XML, HTML and CSS

Certificates offered

Certificate of completion

Cancellation Policy

Cancellation/Reschedule Policy:
Our cancellation/reschedule policy requires notification at least 10 business days before the class start date for a full refund. Please note that you are responsible for notifying NTG of your inability to attend class or you will be invoiced for the full payment.

Should you need to cancel in less than 10 business days before the start of the class, you will be given a 100% credit towards a future class that must be taken within 6 months of the start of the original class. If you are not able to reschedule to a future class, you will be charged 50% of the upfront registration fee.

Classes are subject to cancellation by NTG up to two weeks prior to the class date. It is important to keep this in mind before you purchase a non-refundable airline ticket.

Map & Reviews

New Toronto Group
[ View Provider's Profile ]

Reviews

 

This course has not yet been rated by one of our members.

If you have taken a course through this vendor please log into your account and leave feedback for this vendor. You will be helping ensure our members get directed to the best training facilities.

Here are some reviews of the training vendor.

   

The instructor was great and followed the curriculum as per Adobe's book but Dreamweaver is a beast of a software with a high learning curve. I found that this course just scratched the surface and taught me the basics and that I would need more practice and learning to create a simple website with ease. This is not a criticism of the course really but I felt I would personally benefit from a slightly slower pace and an extra day. I didn't know that at the time as I seemed to follow the instructor's instructions well and it seemed to make sense in the classroom but once I got home I felt a little stuck!

Reviewed by Jeni M. 2011