Flex 3 in Action
Flex 3 in Action
The code examples are its strength -- plentiful for almost every topic in the book.
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.
Table of Contents detailed table of contents
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.
Easy enough for the newbie, detailed enough for the veteran.
It's my user-friendly tutorial and reference.
An impressive amount of Flex content in a single volume.