Flex 4: Developing Rich Internet Applications (4 days)
Onsite and private classes available. Please enquire directly for details...
Description
This is a hands-on introduction to developing Rich Internet Applications (RIAs) for the Adobe Flash Platform using the Adobe Flex 4 framework. Emphasized topics include:
- Custom components and layout control
- Handling and extending events
- Validating and formatting data
- Navigation, animation, and visual state control
- Text and style control
- Spark component skinning
- Introduction to remote data access
- Working with typed data in DataGroup and DataGrid components
- Deploying Flex applications over the web and on AIR
Price
$1,995 per student
Group discounts available (for groups of 4 or more, enrolling to take the same class together on the same dates).
Audience
This course is designed for application developers who want to bring the power of Rich Internet Applications to their web applications. To gain the most from this class, you should:
- Be familiar with an object oriented programming language such as Java, C++, or ActionScript.
- Be familiar with XML terminology.
Course Outline
Introducing the Course
- Introducing mastery learning
- Understanding the course format
- Reviewing the course prerequisites
- Reviewing the course outline
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
- Understanding views
- Understanding perspectives
- Adding and configuring components in Design mode
Creating a Flex project
- Using the New Flex Project wizard
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
Creating custom components
- Controlling component layout in containers
- Defining and using a custom component
Introducing skinning
- Defining a skin class
- Applying a skin class
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
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
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
Creating a class property
- Creating the property
- Controlling access
- Creating and using a public 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
Creating instances of an ActionScript class
Creating class methods
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
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
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
Adding scrollbars to containers
- Implementing the Scroller class
Handling Events
Understanding events
- Handling Framework events
- Handling user events
Implementing event handlers
- Using inline ActionScript in MXML
Creating ActionScript event handler functions
- Defining a function in an MXML document
- Creating functions in external files
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
Adding event listeners with ActionScript
Validating and Formatting Data
Using the Form container
- Introducing the Form components
- Using form components
- Using the FormItem container
- Creating a Form custom component
Using formatters
- Using formatters
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
Triggering validation with ActionScript
- Suppressing automatic validation
- Using the validate() method
- Triggering multiple validators
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
Creating custom navigation for the ViewStack container
- Setting the active ViewStack child container
- Enabling buttons dynamically
Using the TabNavigator container
Using the Accordion container
Controlling Application State
Understanding view states
- Introducing view states
- Creating view states in Design mode
- Creating view states with code
Controlling view states
- Introducing the currentState property
- Switching between states
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
Creating composite effects
Applying transitions to application state changes
- Creating transitions
Adding and removing components during animations
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
Defining styles and skins for components
- Creating Flex component selectors
- Create custom component selectors
- Applying a component skin via CSS
Introducing Advanced CSS selectors
- Descendent selector
- id selector
- Class selector
- Pseudo selector
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
Incorporating visual elements drawn in other programs
- Introducing FXG
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
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
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
Adding scrollbars to skins
- Using the Scroller with nonskinnable containers
- Using the Scroller with skinnable containers
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
Handling returned data and faults
- Handling results
- Handling faults
- Displaying messages with an Alert pop-up
- Using result and fault handlers example
Making HTTP requests with parameters
- Using explicit parameter passing
- Using parameter binding
Using the wizards
- Understanding the CallResponder class
- Creating a master/detail form
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
Populating an ArrayCollection with value objects
- Comparing ArrayCollection with ArrayList
Understanding data bindings with value objects
- Making ActionScript class properties bindable
- Binding the view to the model
- Binding two-way
Refactoring value objects
- Downcasting object references
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
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
Dispatching a value object with the extended event
- Accommodating a value object in the extended event
Overriding the clone method
- Passing a parameter to toggle event bubbling
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
Passing UI components in the data provider
- Rendering visual controls
- Mixing data item types
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
Using the SkinnableDataContainer
- Implementing the SkinnableDataContainer
- Creating the skin component
Displaying Data Using the DataGrid
Using the DataGrid control
- Supplying data to a DataGrid control
Specifying DataGrid control columns
Formatting DataGrid control columns
- Creating reusable label functions
Using item renderers and item editors
- Understanding Item renderers versus item editors
- Introducing the types of item renderers and item editors
Inline item renderers and item editors
Item renderer and item editor components
- Using Spark components in <mx:DataGrid> item renderers
Using events and selected items with a DataGrid component
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 buildCreating a desktop application
- Creating an AIR project
- Understanding some differences between Flex and AIR applications
- Exporting a release build
Appendix A: Student Setup Guide
System Requirements
- Machine requirements
- Software Requirements
Setup Instructions
- Installing Flash Builder 4
- Installing the Course Files