O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Flex 4

Learning Flex 4

by Elijah Robison, Alaric Cole
Publisher: O'Reilly Media, Inc.
Release Date: November 2010
ISBN: 9781449397500
View table of contents
Start reading

Book Description

Learn Adobe Flex 4 in a fun and engaging way with this book's unique, hands-on approach. Using clear examples and step-by-step coaching from two experts, you'll create four applications that demonstrate fundamental Flex programming concepts.

Throughout the course of this book, you’ll learn how to enhance user interaction with ActionScript, and create and skin a user interface with Flex’s UI components (MXML) and Adobe's new FXG graphics format. You'll also be trained to manage dynamic data, connect to a database using server-side script, and deploy applications to both the Web and the desktop.

Learning Flex 4 offers tips and tricks the authors have collected from years of real-world experience, and straightforward explanations of object-oriented programming concepts to help you understand how Flex 4 works.

  • Work with Flash Builder 4 and the Eclipse IDE
  • Learn the basics of ActionScript, MXML, and FXG
  • Design a Flex application layout
  • Build an engaging user interface
  • Add interactivity with ActionScript
  • Handle user input with rich forms
  • Link Flex to a server with PHP and MySQL
  • Gather and display data
  • Style applications and add effects, filters, and transitions
  • Deploy applications to the Web, or to the desktop using Adobe AIR

Table of Contents

  1. Preface
    1. Who This Book Is For
    2. How This Book Is Organized
    3. Companion Website
    4. What This Book Covers
    5. Typographical Conventions Used in This Book
    6. Using the Code Examples
    7. We’d Like to Hear from You
    8. Safari® Books Online
    9. Acknowledgments
      1. Thanks from Alaric
      2. Thanks from Elijah
  2. 1. Getting Up to Speed
    1. What Is Flex?
      1. Flex Is a Modern, Hybrid Framework
      2. Flex Is Flash
      3. Flex Is the Flex SDK
    2. What About AIR?
    3. Where Flex Fits
    4. Why Use Flex?
      1. Flex Is for Applications
      2. For Easy Interactivity
      3. For Development Speed
      4. For Speed All Around
      5. Because It’s Clean
      6. Because It’s Free
      7. Because It’s Open
      8. For Data (and Fast)
      9. Because It’s Beautiful
    5. How Flex Compares to Other Technologies
      1. Flash
      2. C Languages
      3. Java/Java FX
      4. HTML/JavaScript/Ajax
      5. Silverlight/XAML
      6. OpenLaszlo
    6. When Not to Use Flex
    7. Summary
  3. 2. Setting Up Your Environment
    1. Using Alternatives to Flash Builder
    2. Introducing Flash Builder and Eclipse
      1. Flex Flavors
      2. Flash Builder Installation
      3. Your Editor at a Glance
    3. Running Your First Application
      1. Importing a Project Archive
      2. Opening the Application
      3. Running the Application
      4. Everything Is a Project
      5. Importing an Existing Project
    4. Creating a New Flex Project
      1. The Structure of a Flex Project
    5. Summary
  4. 3. Using Design Mode
    1. A Blank Slate: Your First Project
    2. Adding Components to the Application
      1. Dragging and Dropping Components
      2. Selecting Components in the Outline Pane
    3. Exploring Common Components
      1. Controls
      2. Layout Containers
      3. Navigators
      4. Nonvisual Components
    4. Modifying Properties Directly
      1. Examining the Properties Pane
        1. Standard view
        2. Category view
        3. Alphabetical view
      2. Common Properties
    5. Summary
  5. 4. Using Source Mode
    1. What Design Mode Does
    2. Anatomy of a Flex Application
    3. Adding Components in Source Mode
    4. Code Completion
    5. MXML in Depth
      1. The XML in MXML
      2. It’s All About Structure
      3. A Few Ground Rules
        1. All that is opened must be closed
        2. Case matters
        3. Declarations are optional, but polite
      4. The Anatomy of a Tag
    6. S, FX, and MX: Namespaces Explained
      1. Namespace Basics
      2. Namespaces and Third-Party Libraries
    7. Summary
  6. 5. ActionScript Basics for Flex Applications
    1. Getting Ready
    2. Dot Notation
    3. Inline ActionScript
    4. Assignment and Concatenation
    5. Functions
      1. Where to Place a Function
      2. How to Create a Function
      3. Function Access
      4. Function Parameters
    6. Variables
    7. Data Types
      1. Fundamental Data Types
      2. Typing Variables
      3. Typing Functions
    8. Objects
    9. Classes
      1. Packages
      2. Making a New Class
      3. Class Properties
      4. Class Methods
      5. Working with Custom Classes
    10. ActionScript’s Relationship with MXML
      1. MXML and ActionScript Work Together
      2. MXML Becomes ActionScript
      3. Tags Are Classes
      4. Attributes Are Properties
      5. Attributes Are Styles
      6. Attributes Are Event Listeners, Too
    11. Comments?
    12. Summary
  7. 6. Debugging Flex Applications
    1. Outputting Values to the Console Using trace()
    2. Inspecting Event Properties with trace()
    3. Using Breakpoints
      1. Seeing a New Perspective
      2. The Variables Pane
      3. “Walk, Don’t Run”
      4. Ending Your Debug Session
    4. Summary
  8. 7. ADDING INTERACTION WITH ACTIONSCRIPT
    1. Understanding Events
    2. Common Events
    3. Researching Events
      1. What Events Are Available to This Component?
      2. Flex/ActionScript Documentation
        1. Flash Builder’s help system
        2. ASDoc
        3. Adobe’s Flash Platform Language Reference
    4. Listening for and Responding to Events
      1. Handling Events Inline
        1. Inspecting screen coordinates with mouseMove()
        2. Testing data input using change()
      2. Handling Events in ActionScript
        1. Event constants
        2. Using addEventListener() in ActionScript
        3. Creating a draggable component
        4. Creating a self-powered, moving component
    5. Collision! A Whirlwind of Events
      1. Create the Supporting Classes
        1. Linking the external source and adding a package
        2. Ball.mxml
        3. Paddle.mxml
      2. The Main Application Code
      3. Initial Insights
        1. A new namespace
        2. The math
        3. The branching structures (decision logic)
      4. The Five Functions
        1. onAppComplete()
        2. resetGame()
        3. startBallMovement()
        4. ballMover()
          1. Calculating the trajectory
          2. Testing for collisions
          3. Handling collisions
          4. Handling game over
        5. keyDown()
      5. Game Play and Customizing Strategies
        1. Basic customizing variables
        2. Opportunities for improved performance
        3. Add a scorekeeping system
        4. Add additional component classes
        5. Automate game play when not in use
    6. Summary
  9. 8. Using Data Binding
    1. What Is Data Binding?
    2. Applying Data Binding
      1. One-Way Binding
      2. Binding Variables
      3. Multiple Destinations
      4. Concatenation
        1. Whitespace and inline bindings
        2. ActionScript between the braces
      5. Escape Sequences
      6. Resizable Application Layouts
      7. The <fx:Binding/> Tag
        1. Basic usage
        2. Multiple sources
      8. Curly Brace Syntax Versus Binding Tags
    3. Two-Way Bindings
    4. Handling Complex Data with Data Models
      1. Building the Data Model
      2. Multilevel Bindings
    5. When Data Binding Isn’t Appropriate
    6. Summary
  10. 9. Designing Application Layouts
    1. Types of Layouts
      1. Absolute Positioning
      2. Relative Positioning
    2. The Display List
      1. Default Layer Order
      2. Accessing Children
      3. Adding and Removing Children
      4. Rearranging Children
    3. Sizing
      1. Explicit Sizing
      2. Relative or Percentage-Based Sizing
      3. Minimum and Maximum Sizes
    4. Controlling Whitespace in the Layout
      1. Padding the Layout
      2. Gaps
    5. Advanced Containers
      1. Divided Boxes
      2. TileLayout and TileGroup
      3. Form
    6. Spacers and Lines
      1. Spacer
      2. FXG Line Graphic
    7. Alignment
    8. Constraints-Based Layout
      1. Constraints Explained
      2. top, bottom, left, and right
      3. horizontalCenter and verticalCenter
    9. Summary
  11. 10. Creating Rich Forms
    1. Preparing a Form-Based Application
      1. Starting the Form
      2. Making Inputs Required
      3. Adding a RadioButtonGroup
      4. Completing the Form Layout
        1. Address and ZIP Code
        2. DateField
        3. ColorPicker
        4. The finished form layout
    2. Validating Data
      1. Using Validators
        1. StringValidator
        2. EmailValidator
        3. PhoneNumberValidator
        4. ZipCodeValidator
        5. Additional validator components
      2. Custom Validation Techniques
        1. The triggerEvent and trigger properties
        2. The validate() method
        3. Linking several validators with Validator.validateAll()
    3. Restricting Input
    4. Formatting Input
    5. Combining Restrictions and Formatters
    6. Linking Formatters to Functions
    7. Summary
  12. 11. Gathering and Displaying Data
    1. Using List-Based Controls
      1. Lists of Simple Data
      2. Lists of Complex Data
        1. Custom label fields
        2. Advanced lists
    2. Using XML Data
      1. The XML Structure
      2. Handling XML Data as an XMLListCollection
      3. Reading XML Using E4X
      4. Handling XML Data in the Halo DataGrid
      5. Loading External Data at Compile Time
      6. Loading External Data at Runtime
    3. Implementing List Selection
    4. Connecting to Search Results
    5. Dragging and Dropping in Lists
    6. Creating Custom Item Renderers
    7. Working with External Data Services
      1. Web Services
      2. RemoteObject
      3. PHP and HTTPService
    8. Summary
  13. 12. Controlling Visibility and Navigation
    1. Controlling Visibility
    2. Navigation Components
      1. TabNavigator
      2. TabBar and ViewStack
      3. ButtonBar and ViewStack
      4. LinkBar and ViewStack
      5. Controlling the ViewStack with ActionScript
        1. Controlling navigation using inline ActionScript
        2. Controlling navigation using named functions
      6. The Accordion Navigator
    3. Creating a Photo Gallery Application
      1. Adding Multiple Tab Views
      2. Populating the Photo Gallery with XML
        1. Creating the photos.xml file
        2. Connect to the XML with an HTTPService component
      3. Displaying External Images
      4. Monitoring the Loading Progress of Images
      5. Creating the Thumbnails
      6. Syncing Two Lists
    4. Summary
  14. 13. Working with View States
    1. Scenarios for States
    2. Managing States in Design Mode
      1. Creating a New State
      2. Editing State Properties
      3. Modifying Layouts for States
      4. Changing the Current State with Script
    3. Making a Login/Registration Form
      1. The Base State
      2. Adding View States in Source Mode
      3. Including and Excluding Components from States
      4. Linking Component Properties to States
      5. Changing the Current State with Script
    4. Applying States to the Search Application
      1. Restoring the Application
      2. Revising the Search Application
      3. Adding States and State-Specific Properties
    5. Summary
  15. 14. Applying Effects, Transitions, and Filters
    1. Effects
      1. Effects Basics
      2. Effects Categories
      3. Applying Spark Effects
        1. Effects in sequence
        2. Effects in parallel
        3. Combining sequenced and parallel effects
        4. Passed-in targets
        5. Explicit targeting
    2. Transitions
      1. Transition Syntax
      2. Making State Changes More Interesting
        1. Building the transitions block
        2. Target filtering (targets of opportunity)
    3. Filters
      1. Types of Filters
      2. Applying Filters
    4. Summary
  16. 15. Styling and Skinning
    1. Inline Style Assignments
    2. Style Blocks and CSS
      1. The Style Block
      2. CSS Syntax
        1. Namespaces in CSS
        2. Style selectors
        3. Selector precedence
    3. External CSS
      1. Creating and Referencing the CSS File
      2. Adding Style Rules to the CSS File
      3. Creating Interesting Backgrounds with FXG Graphics
    4. Skinning
      1. Working with Packages
      2. Creating a Custom Skin
        1. Assigning a Host Component
        2. Embedding an asset
        3. Applying a custom skin in Source mode
        4. Applying a custom skin in CSS
        5. Applying a custom skin in Design mode
      3. Skinning with FXG Graphics and Effects
        1. Expanding the package directory
        2. Adding the FXG graphic
        3. About skin class requirements
        4. Creating the GraphicButtonSkin
    5. Summary
  17. 16. Making Data Dynamic: Linking Flex to the Server
    1. Some Background Information
      1. Our Choice of Server Technologies: PHP and MySQL
      2. Adobe AIR
    2. The ContactManager Application
      1. Creating an Adobe AIR Project
      2. Configuring the Server and bin Locations
      3. Code for the ContactManager
    3. Linking ContactManager to the Server Using the HTTPService Class
      1. Loading Contacts Using the HTTPService Component
      2. Sending Data with the HTTPService Class
    4. Summary
  18. 17. Deploying Flex Applications
    1. Deploying to the Web
      1. Checking Compiler Options
        1. Flex SDK version
        2. Adobe Flash Player options
        3. Use Flash Text Engine in MX components
        4. Copy non-embedded files to output folder
        5. Generate accessible SWF file
        6. Enable strict type checking
        7. Enable warnings
        8. HTML wrapper
        9. Flash Player version
        10. Enable integration with browser navigation
      2. Merge or Separate the Flex Framework Library
      3. Export a Release Build
        1. Sharing source code
        2. Setting the export path
        3. Upload files to the web host
    2. Deploying to the Desktop
      1. Creating an AIR Installer
      2. Customizing the Application
      3. Exporting an Installer
      4. Creating a Seamless Install
    3. Summary
  19. 18. What Comes Next?
    1. Third-Party APIs
    2. Print Resources
    3. Online Resources
      1. Articles and Blogs
      2. Reference Material
    4. Certification
    5. Enfin
  20. A. Creating a Development Environment
    1. Use WAMP (Windows) or MAMP (Mac OS)
      1. Inspecting the WAMP Tool Menu
      2. Test the Installation
    2. Add PHP Development Tools (PDT) to a Flash Builder Installation
      1. Installing PDT
      2. Testing the XML Developer Tools
      3. Testing the PHP Development Tools
    3. Summary
  21. B. MySQL Basics
    1. Language Elements and Syntax
    2. MySQL Statements
      1. The SELECT Statement and Fully Qualified References
      2. The INSERT Statement
      3. The UPDATE Statement and Primary Key Field
    3. Creating a Database with phpMyAdmin
      1. Creating the Database
      2. Creating the Table
      3. Adding Fields
      4. Inserting Records
      5. Browsing the Data
    4. Summary
  22. C. PHP Basics
    1. Language Elements and Syntax
      1. PHP Files
      2. Variable Declaration in PHP
      3. Concatenating Strings in PHP
      4. PHP MySQL Functions
    2. The PHP Scripts
      1. loadContacts.php
      2. insertContact.php
      3. updateContact.php
    3. Summary
  23. D. Compiling Flex Applications on Linux Using the Command Line
    1. Install Flash Player 10
    2. Install Java
    3. Download the Flex 4 SDK
    4. Create a Project Folder Structure
    5. Add an MXML File
    6. Add Environment Variables
    7. Tweak the Project Configuration File
    8. Create a Reusable Compiler Script in Bash
    9. Compile and Test
    10. Summary
  24. Index
  25. About the Authors
  26. Copyright