Flex 3 in Action

Tariq Ahmed with Jon Hirschi and Faisal Abid

February 2009
ISBN 9781933988740
576 pages

Flex 3 in Action

Tariq Ahmed with Jon Hirschi and Faisal Abid

Resources

Source Code Book Forum Tariq Ahmed's Blog Tariq Ahmed on Twitter: @tahmed show all

Flex 3 in Action

Tariq Ahmed with Jon Hirschi and Faisal Abid

February 2009
ISBN 9781933988740
576 pages

The code examples are its strength -- plentiful for almost every topic in the book.

Andrew Grothe, Triware Technologies Inc.

NEWER EDITION AVAILABLE

Flex 4 in Action is now available. An eBook of this older edition is included at no additional cost when you buy the revised edition!

Flex 3 in Action is an easy-to-follow, hands-on Flex tutorial. Chock-full of examples, this book goes beyond feature coverage and helps you put Flex to work in real day-to-day tasks. You'll quickly master the Flex API and learn to apply the techniques that make your Flex applications stand out from the crowd.

Interesting themes, styles, and skins? It's in there.
Working with databases? You got it.
Interactive forms and validation? You bet.
Charting techniques to help you visualize data? Bam!

The expert authors of Flex 3 in Action have one goal—to help you get down to business with Flex 3. Fast.

foreword

preface

acknowledgments

about this book

Part 1 Application basics

1. Introduction to Flex

1.1. Why are web applications so prolific?

1.2. Prolific, but at a price

1.3. The RIA solution

1.3.1. They all want it all

1.3.2. RIAs to the rescue

1.3.3. How RIAs do it

1.4. The RIA contenders

1.4.1. Flex by Adobe

1.4.2. Silverlight by Microsoft

1.4.3. JavaFX by Sun Microsystems

1.5. Flex vs. web applications

1.5.1. Web applications are based on documents

1.5.2. The role of browsers as transfer stations and document renderers

1.5.3. RWAs—the last stand

1.5.4. Cross-platform issues

1.5.5. Where’s the richness?

1.5.6. AJAX communication limits

1.5.7. Apples and oranges

1.6. Becoming acquainted with Flex

1.6.1. Taking advantage of Adobe Flash

1.6.2. Flex and JavaScript can play together

1.6.3. The Flex ecosystem

1.6.4. How Flex works

1.6.5. Events, events, events

1.7. What’s new in Flex 3

1.8. Summary

2. Getting started

2.1. Flex on the cheap

2.1.1. Setting up the compile environment

2.1.2. Setting up the editing environment

2.1.3. Next steps (if you’re still interested)

2.2. Get serious with Flex

2.2.1. Product and pricing matrix

2.2.2. Getting Flex Builder

2.3. Exploring Flex Builder

2.4. Views and perspectives

2.4.1. Out-of-the-box perspectives

2.4.2. Switching perspectives

2.4.3. Customizing perspectives

2.5. Our first project—Hello World!

2.5.1. Create the project

2.5.2. Entering code

2.5.3. Compile and run

2.5.4. Making it real

2.6. Using design mode

2.7. Built-in help

2.7.1. Object-oriented languages and their APIs

2.7.2. Accessing the API Reference

2.7.3. Perusing API Reference

2.8. MXML and ActionScript in a nutshell

2.8.1. The structure of MXML

2.8.2. How MXML and ActionScript relate

2.8.3. Events are handled by ActionScript

2.9. Summary

3. Working with ActionScript

3.1. Comments

3.1.1. Inline comments

3.1.2. Block comments

3.2. Variables

3.2.1. Variable names

3.2.2. Strict data typing

3.2.3. Static vs. dynamic type checking

3.2.4. Primitive and complex data types

3.3. Loops

3.3.1. For (starting value; valid condition; increment)

3.3.2. For (property names in array/object)

3.3.3. For each (item in array/object)

3.3.4. While (condition)

3.3.5. Do while (condition)

3.4. Conditional statements (if statements and switches)

3.4.1. If..else

3.4.2. Switch

3.5. Arrays

3.5.1. Indexed arrays

3.5.2. Associative arrays

3.6. ActionScript tidbits

3.6.1. Braces

3.6.2. Logical operators and shortcuts

3.7. Sneak peek at functions, classes, and packages

3.7.1. Your own functions

3.7.2. Separating ActionScript to individual files

3.8. Simple data binding

3.8.1. Once again, it is about events

3.8.2. Bidirectional binding

3.9. Summary

4. Layout and containers

4.1. Absolute layout

4.2. Constraint-based layout

4.2.1. Basic constraints

4.2.2. Enhanced constraints

4.3. Automatic layout

4.4. Variable and fixed sizing

4.4.1. Variable sizing

4.4.2. Fixed Sizing

4.5. Containers

4.5.1. Application container

4.5.2. Canvas container

4.5.3. Box, HBox, and VBox containers

4.5.4. Panel container

4.5.5. ApplicationControlBar and ControlBar containers

4.5.6. DividedBox, HDividedBox, and VDividedBox containers

4.5.7. Form container

4.5.8. Grid container

4.5.9. Tile container

4.6. Dynamic layout with Repeaters

4.6.1. dataProvider sneak peek

4.6.2. Properties and events of a Repeater

4.6.3. Creating the Repeater

4.6.4. Working with Repeater events

4.7. Summary

5. Displaying forms and capturing user input

5.1. The id attribute

5.2. Text controls

5.3. Date controls

5.4. Numeric controls

5.5. Buttons

5.5.1. Bars of Buttons

5.5.2. The PopUpButton and PopUpMenuButton

5.6. Picklist controls

5.7. Accessing the control’s value

5.7.1. Passing values to a function

5.7.2. Passing events to a function

5.7.3. Accessing properties directly

5.7.4. Which approach to use?

5.8. Summary

6. Validating user input

6.1. Overview of validation

6.2. Built-in validators

6.2.1. Validator

6.2.2. StringValidator

6.2.3. NumberValidator

6.2.4. DateValidator

6.2.5. EmailValidator

6.2.6. CreditCardValidator

6.2.7. CurrencyValidator

6.2.8. PhoneNumberValidator

6.2.9. RegExpValidator

6.2.10. SocialSecurityValidator

6.2.11. ZipCodeValidator

6.3. Real-time validation

6.4. Committed value validation

6.5. Pass-through validation

6.6. Scripted validation

6.7. Validation tidbits

6.7.1. Does a validator always check all criteria?

6.7.2. Validating what was entered vs. criteria matching

6.7.3. Controlling what triggers validation

6.8. Summary

7. Formatting data

7.1. Built-in formatters

7.1.1. Formatter

7.1.2. NumberFormatter

7.1.3. CurrencyFormatter

7.1.4. DateFormatter

7.1.5. PhoneFormatter

7.1.6. ZipCodeFormatter

7.1.7. SwitchSymbolFormatter

7.2. Real-time formatting

7.3. Scripted formatting

7.3.1. Using a function with a formatter component

7.3.2. Using a function with a formatter class

7.4. Working with formatting errors

7.5. Summary

8. DataGrids, lists, and trees

8.1. List genealogy

8.1.1. ListBase and AdvancedListBase’s properties

8.1.2. ListBase events

8.2. The dataProvider and collections

8.2.1. Feeding the dataProvider

8.2.2. Types of collections

8.2.3. Users of collections

8.3. Initializing collections

8.4. Populating collections

8.4.1. List

8.4.2. HorizontalList

8.4.3. TileList

8.4.4. DataGrid

8.4.5. Tree

8.4.6. AdvancedDataGrid

8.5. Interacting with lists

8.5.1. AdvancedDataGrid

8.5.2. Passing the event to a function

8.5.3. Passing data to a function

8.5.4. Accessing the selected row directly

8.5.5. Binding to a selected row

8.5.6. Using a different event as a trigger

8.6. Summary

9. List customization

9.1. Label functions

9.1.1. Types of label functions

9.1.2. Using a single-column label function

9.1.3. Using a multicolumn label function

9.1.4. Ideas for label functions

9.2. Item renderers

9.2.1. Types of renderers

9.2.2. Creating a (regular) item renderer

9.2.3. Adding logic to an item renderer

9.2.4. Creating an inline item renderer

9.2.5. Using drop-in item renderers

9.3. Item editors

9.3.1. Enabling item editing

9.3.2. Creating an item editor

9.3.3. Item-editing events

9.4. Combining an item editor and item renderer

9.5. Advanced item renderers

9.5.1. The AdvancedDataGridRendererProvider

9.5.2. Referencing the column

9.5.3. Spanning columns

9.5.4. Spanning an entire row

9.6. Filter functions

9.7. Summary

Part 2 Application flow and structure

10. Events

10.1. The event system

10.1.1. Event system—the Postal Service

10.1.2. Event-delivery system

10.1.3. Set your phases on stun

10.2. Sending and receiving events

10.2.1. Adding event listeners

10.2.2. Keying into binding events

10.2.3. Removing event listeners

10.3. Custom events

10.3.1. Using the dispatcher to send an event

10.3.2. Creating custom events

10.3.3. Stopping event propagation

10.3.4. Adding event metadata to components

10.4. Summary

11. Application navigation

11.1. Feeding the data provider for menus and menu bars

11.1.1. Nested arrays

11.1.2. Nested array collections

11.1.3. Models

11.1.4. XML component and class

11.1.5. XMLList component

11.1.6. XMLListCollection component and class

11.1.7. Choosing a data type for the data provider

11.2. Working with menus

11.2.1. Creating a menu

11.2.2. Positioning the menu

11.2.3. Customizing menu items

11.3. Using a menu bar

11.3.1. Creating a menu bar

11.3.2. Positioning the menu bar

11.3.3. Customizing items in the menu bar

11.3.4. Handling user interactions with menu bars

11.4. Using view stacks

11.4.1. Creating a view stack

11.4.2. Adding navigation to the view stack

11.4.3. Determining which stack is selected

11.4.4. Handling user interactions with view stacks

11.5. TabNavigator

11.5.1. Creating a tab navigator

11.5.2. Handling user interactions with a tab navigator

11.6. Accordion

11.6.1. Creating an accordion

11.6.2. Populating an accordion

11.6.3. Handling user interactions with an accordion

11.7. Summary

12. Introduction to pop-ups

12.1. Creating your first pop-up

12.1.1. First things first: create your title window

12.1.2. Using PopUpManager to open the window

12.1.3. Closing the pop-up

12.2. Controlling the window location

12.2.1. Using the centerPopUp() method

12.2.2. Calculating window placement

12.3. Setting window transparency

12.4. Data integration with pop-ups

12.4.1. Getting data out of your pop-up window

12.4.2. Sending events

12.4.3. Getting data out

12.4.4. Sending data to the window

12.5. Using alerts

12.5.1. Creating a simple alert

12.5.2. Doing more with alerts

12.5.3. A more advanced alert

12.5.4. Pimp this alert

12.6. Summary

13. View states

13.1. Understanding view states

13.2. View states in Flex

13.2.1. View states classes

13.2.2. View-state example

13.2.3. Defining a view state (<mx:State />)

13.2.4. View-state transitions

13.2.5. States in components

13.3. Summary

14. Working with data services

14.1. What the heck is a WSDL document?

14.2. Reading WSDL

14.2.1. Reading the WSDL document: operations

14.2.2. Reading the WSDL: input types

14.2.3. Reading the WSDL document: output

14.3. Using WebService components

14.3.1. Creating a WebService component with ActionScript

14.3.2. Calling the WebService component

14.3.3. Handling the result

14.3.4. The ResultEvent

14.3.5. Working with the result

14.3.6. Fault events

14.3.7. Using asynchronous tokens

14.4. Using HTTPService to retrieve results

14.4.1. Connecting to an HTTP web service

14.4.2. Explicit parameter binding

14.5. Using the RemoteObject tag

14.6. Using the URLLoader

14.7. Using the Flex Import Web Service wizard

14.7.1. Using the Import Web Service wizard

14.7.2. Working with generated web-service code

14.8. Summary

15. Working with XML

15.1. XML primer

15.1.1. What is XML?

15.1.2. Benefits of XML

15.1.3. Drawbacks

15.1.4. Syntax and rules

15.1.5. DTDs and XML Schema

15.1.6. Namespaces

15.2. XML components and classes

15.2.1. The XML component

15.2.2. The XML class

15.2.3. The XMLList component

15.2.4. The XMLList class

15.2.5. The XMLListCollection component and class

15.3. Loading external XML source data

15.4. Binding in XML

15.4.1. Binding from XML

15.4.2. Binding to XML

15.5. ECMAScript for XML (E4X)

15.5.1. E4X syntax

15.5.2. Working with XML structure

15.6. Summary

16. Objects and classes

16.1. OO theory in 5 minutes

16.1.1. The relationship between objects and classes

16.1.2. Objects have properties and methods

16.1.3. Inheritance

16.1.4. Encapsulation and coupling

16.1.5. Objects: they’re everywhere!

16.2. Playing with objects

16.2.1. A closer look at objects

16.2.2. Methods of objects

16.2.3. Method parameters

16.2.4. Methods return information

16.2.5. Objects have properties

16.3. Creating a class

16.3.1. Creating the class file

16.3.2. Specifying a package

16.3.3. Naming classes

16.3.4. Class modifiers

16.3.5. Superclasses: extending a class

16.3.6. Interfaces

16.3.7. Looking at your class

16.4. Adding properties

16.5. Adding getter/setter methods

16.6. Creating methods for your class

16.7. Summary

17. Custom components

17.1. What are custom components?

17.1.1. A custom component example

17.2. How custom components work

17.2.1. Simple and composite types

17.2.2. Implementation choices

17.3. Simple custom components

17.4. Passing parameters

17.4.1. Using a function to pass a value

17.4.2. Passing a value as a property

17.4.3. Using a setter function as a property proxy

17.4.4. Using bound parameters

17.5. Retrieving values

17.5.1. Using a function to retrieve a value

17.5.2. Using a property to retrieve a value

17.5.3. Using a getter function as a property proxy

17.6. Creating composite components

17.7. Creating ActionScript components

17.8. Custom events

17.8.1. Passing along the event object

17.9. Namespaces and structure

17.9.1. The MX namespace

17.9.2. The local namespace

17.9.3. Directory structure and namespaces

17.9.4. Namespace in ActionScript

17.10. Summary

18. Advanced reusability in Flex

18.1. SWC files

18.2. Runtime shared libraries

18.2.1. Standard RSLs

18.2.2. Making your Flex application use RSL

18.3. Modular Flex application development

18.3.1. Components vs. modules

18.3.2. Creating a simple module

18.3.3. Loading modules the MXML way with the Module API

18.3.4. Loading and unloading modules with ActionScript

18.3.5. Pros and cons of modules

18.4. Adding patches in your Flex application lifecycle

18.4.1. Using a SWC to update and replace a class

18.5. Refactoring

18.6. Summary

Part 3 The finishing touches

19. Customizing the experience

19.1. Styles

19.1.1. Inline styles

19.1.2. Local style definitions

19.1.3. External stylesheets

19.1.4. The Style Explorer

19.1.5. Working with color

19.1.6. Transparency

19.1.7. Using gradients

19.1.8. Working with styles programmatically

19.2. Embedding fonts

19.2.1. Embedding via the font’s system name

19.2.2. Embedding using a font file

19.2.3. Leveraging CSS

19.3. Images and icons

19.3.1. Image types

19.3.2. To embed or not to embed

19.3.3. Images as variables

19.3.4. Icons

19.4. Skins

19.4.1. Types of skins

19.4.2. Graphical skins with images

19.4.3. Graphical skins with SWFs

19.4.4. Flex skin design extensions (SDE)

19.4.5. Image slicing

19.4.6. Programmatic skins

19.5. Summary

20. Working with effects

20.1. What is an effect?

20.1.1. Cause and effect

20.1.2. Out-of-the-box effects

20.1.3. Composite effects

20.2. Triggered effects

20.3. Programmatically applying an effect

20.3.1. Creating effects with ActionScript

20.3.2. Using just ActionScript

20.4. Creating composite effects

20.4.1. Sequential effects

20.4.2. Parallel effects

20.4.3. Composite composites

20.5. Using out-of-the-box effects

20.5.1. The AnimateProperty effect

20.5.2. The Blur effect

20.5.3. The Dissolve effect

20.5.4. The Fade effect

20.5.5. The Glow effect

20.5.6. The Iris effect

20.5.7. The Move effect

20.5.8. The Pause effect

20.5.9. The Resize effect

20.5.10. The Rotate effect

20.5.11. The SoundEffect effect

20.5.12. The Wipe effects

20.5.13. The Zoom effect

20.6. Easing functions

20.6.1. Out-of-the-box easing functions

20.6.2. Making your own easing functions

20.7. Fonts and effects

20.8. Summary

21. Drag-and-drop

21.1. The drag-and-drop process

21.2. Drag-and-drop events

21.3. Components that support drag-and-drop

21.4. Enabling D&D on List-based components

21.5. Moving versus copying

21.6. Multi-item drag

21.7. Two-way drag-and-drop

21.8. Using D&D for user-controlled sorting

21.9. Enter the DragManager

21.9.1. Operational values

21.9.2. DragManager functions

21.10. Accepting or denying a drop

21.10.1. Limiting who gets into the party

21.10.2. Preventing event propagation

21.10.3. Use the DragEvent object to find the drop target

21.11. Applying your own drop

21.11.1. Adding to the component’s dataProvider explicitly

21.11.2. Adding to the component’s dataProvider implicitly

21.12. Adding D&D to non-List components

21.12.1. Setting up the example

21.12.2. Initiating the drag

21.12.3. Adding visual feedback

21.12.4. Handling the drop

21.12.5. Handling the exit

21.12.6. Putting it all together

21.13. Customizing the drag-and-drop experience

21.13.1. Changing the drag image

21.13.2. Changing the drag proxy Icons

21.14. Summary

22. Charting

22.1. Introduction to charting

22.1.1. Chart parts

22.1.2. Chart types overview

22.2. Setting the stage with series and data

22.3. Creating charts

22.3.1. Invoking a chart

22.3.2. Adding a legend

22.3.3. Changing chart types

22.4. Stacking charts

22.5. Exploring chart types

22.5.1. Changing chart types

22.5.2. Bar charts and column charts

22.5.3. Line charts

22.5.4. Bubble charts

22.5.5. Candlestick and HLOC charts

22.5.6. Pie charts

22.5.7. Plot charts

22.6. Customizing charts

22.6.1. Series strokes

22.6.2. Series fills

22.7. Summary

23. Debugging and testing

23.1. Debugging

23.1.1. Using the Flash Debug Player

23.1.2. Configuring logging

23.1.3. Using the trace() function

23.1.4. Trace-log viewers

23.1.5. Converting objects to strings

23.1.6. FxSpy

23.1.7. Monitoring network activity

23.1.8. Using the Debugger

23.2. Testing

23.2.1. Types of tests

23.2.2. Flex Profiler

23.2.3. FlexUnit (unit testing)

23.2.4. Fluint (unit testing)

23.2.5. FunFX (functional testing)

23.2.6. RIATest (functional testing)

23.2.7. HP QuickTest Pro (functional testing)

23.2.8. IBM Rational Functional Tester (functional testing)

23.3. Summary

24. Wrapping up a project

24.1. Printing

24.1.1. Flex’s approach to printing

24.1.2. Tools of the trade

24.1.3. Printing things

24.1.4. Scaling things for print

24.1.5. The art of adding objects

24.1.6. Printing lists

24.1.7. Catching when a user cancels

24.1.8. FlexReport

24.2. Customizing the wrapper

24.2.1. Wrapper files

24.2.2. Wrapper templates

24.2.3. The bare essentials

24.2.4. Embedding into a web application

24.2.5. Passing parameters in a wrapper

24.3. Deployment

24.3.1. Create a production build

24.3.2. Positioning client-side files

24.3.3. Positioning server-side files

24.3.4. Testing that it works

24.4. Summary

resources

index

About the Technology

New web applications require engaging user-friendly interfaces—and the cooler, the better. With Flex 3, web developers at any skill level can create high-quality, effective, and interactive Rich Internet Applications (RIAs) quickly and easily. Flex removes the complexity barrier from RIA development by offering sophisticated tools and a straightforward programming language so you can focus on what you want to do instead of how to do it. And now that the major components of Flex are free and open-source, the cost barrier is gone, as well!

About the book

Many Flex books are overwhelming to new users—focusing on the complexities of the language and the super-specialized subjects in the Flex eco-system; Flex 3 in Action filters out the noise and dives into the core topics you need every day. Using numerous easy-to-understand examples, Flex 3 in Action gives you a strong foundation that you can build on as the complexity of your projects increases.

What's inside

Flex 3 features like Profiler, AdvancedDataGrid, and Refactoring.
Layout your application using Containers.
Create interactive forms with upfront validation.
Connect to Databases with Data Services.
Use charting to visualize data.
Share code across multiple projects.
Customize with styles, themes, and skins.
Test, debug, and deploy Flex applications.
Drag and drop.
ActionScript 3.0 fundmentals.
Use Effects for more than just the "cool" factor.

About the reader

Flex 3 in Action will give you the skills you need to become productive pronto. Whether you want to make the next big Web 2.0 internet application, or take your enterprise applications to the next level—Flex 3 in Action will help you get there.

About the authors

Tariq Ahmed is an accomplished web application pioneer having introduced next generation web technologies to companies such as Bell Canada and REUTERS. He and Jon Hirschi were first to introduce eBay to Adobe Flex which later proliferated to other teams. As an Adobe Flex Community Expert, Tariq has been evangelizing the technology and supporting the community through various projects and is particularly known for his Community Flex (CFLEX.Net) site. Tariq is the Manager of Product Development at Amcom Technology.

Jon Hirschi has been innovating with Flex since its first version. As an Adobe Flex Community Expert, he's been sharing his expert-level knowledge through his personal blog, technology magazine articles, and user groups. Jon was also involved in not only the introduction of Flex at eBay, but also in the continuance of it via a cutting-edge command center that allows eBay to manage its servers.

Faisal Abid is a software engineering student in Toronto, Canada and runs his own RIA consulting company (G-uniX Technologies). He's written RIA solutions for various clients including internet startups Buzzspot and RazorCom. Faisal's community involvement includes numerous articles for magazines, and he is known for his experiments with technology.

new edition available Flex 4 in Action

placing your order...

Don't refresh or navigate away from the page.