F4DRIA : Flex 4: Developing Rich Internet Client Applications
Description
Flex 4: Developing Rich Internet Client Applications provides experienced application developers with hands-on, practical experience using Flex. This three day course introduces developers to all the primary features of Flex they'll need to know in order to build a fully functional, well architected front end for a Rich Internet Application (RIA).
• 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
Audience
Developers wishing to build rich Internet applications in Flex
Prerequisites
Programming and XML experience
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 build
Creating 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 |
