Flash Builder and Flash Catalyst: The New Workflowdi

Flash Builder and Flash Catalyst: The New Workflowdi

by Steven Peeters
Released May 2010
Publisher(s): Apress
ISBN: 9781430228356

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

The Flash Platform is changing. Flash Builder and Flash Catalyst have brought a new separation of design and coding to web development that enables a much more efficient and streamlined workflow. For designers and developers used to the close confines of Flash, this is a hugely liberating but at first alien concept. This book teaches you the new workflow for the Flash platform. It gives an overview of the technologies involved and provides you with real-world project examples and best-practice guidelines to get from design to implementation with the tools at hand.

  • Includes many examples

  • Focuses on real-world situations

  • Covers designer and developer workflow

Table of contents

  1. Copyright
  2. About the Author
  3. About the Technical Reviewer
  4. Acknowledgments
  5. Introduction
  6. Layout conventions
  7. 1. Flex and AIR: Taking RIAs to the Next Level
    1. 1.1. Taking Advantage of Flash Technology
      1. 1.1.1. Mainframe
      2. 1.1.2. Client-Server
      3. 1.1.3. Web Applications
      4. 1.1.4. Rich Internet Applications
    2. 1.2. Why Should You Use the Flash Platform?
    3. 1.3. Where is Flex Used?
      1. 1.3.1. Flex on the Web
      2. 1.3.2. Flex in the Enterprise
      3. 1.3.3. Testing Flex applications
    4. 1.4. Connecting Applications to a Back End
      1. 1.4.1. AMFPHP
      2. 1.4.2. Zend AMF
      3. 1.4.3. LiveCycle Data Services
        1. 1.4.3.1. Proxy Service
        2. 1.4.3.2. Web-Tier Compiler
        3. 1.4.3.3. Flash Remoting
        4. 1.4.3.4. Data Management
          1. 1.4.3.4.1. Reduce Written Code
          2. 1.4.3.4.2. Tracking Changes
          3. 1.4.3.4.3. Differences with Remote Procedure Calls (RPC services)
          4. 1.4.3.4.4. Fiber
      4. 1.4.4. BlazeDS
      5. 1.4.5. GraniteDS
        1. 1.4.5.1. Code Generation
      6. 1.4.6. ColdFusion Data Services
    5. 1.5. Adobe AIR: Why Do We Want Desktop RIAs?
    6. 1.6. Summary
  8. 2. Flex 4 SDK: Overview of the New Features
    1. 2.1. Component Architecture
    2. 2.2. View States
    3. 2.3. FXG
    4. 2.4. Spark-ling Effects
      1. 2.4.1. Property Effects
      2. 2.4.2. Transform Effects
      3. 2.4.3. 3D Effects
      4. 2.4.4. Pixel-Shader Effects
      5. 2.4.5. Filter Effects
    5. 2.5. Advanced CSS Selectors
      1. 2.5.1. Use of Namespaces
      2. 2.5.2. Type Selector
      3. 2.5.3. Class Selector
      4. 2.5.4. Universal Selector
      5. 2.5.5. ID Selector
      6. 2.5.6. Descendant Selector
      7. 2.5.7. Pseudo Selector
    6. 2.6. Two-Way Binding
    7. 2.7. Summary
  9. 3. Flash Builder 4: The programming environment
    1. 3.1. What is Flash Builder 4?
    2. 3.2. What Happened to Flex Builder?
    3. 3.3. The New Features
      1. 3.3.1. Backward Compatibility
      2. 3.3.2. Improved Project Properties
      3. 3.3.3. Package Explorer
      4. 3.3.4. Code Generation
      5. 3.3.5. Refactoring Support
      6. 3.3.6. View States in Source Mode
      7. 3.3.7. Improved Design Editor
        1. 3.3.7.1. Generation of Detail Form
    4. 3.4. Improved Back-End Connectivity
      1. 3.4.1. Data/Services Panel
      2. 3.4.2. ZendAMF Integration
      3. 3.4.3. Drag-and-Drop Binding
    5. 3.5. Debugging
      1. 3.5.1. Conditional Breakpoints
      2. 3.5.2. Changing Values at Runtime
      3. 3.5.3. Network Monitor
    6. 3.6. Call Hierarchy View
    7. 3.7. Summary
  10. 4. Flash Catalyst: bridging the gap
    1. 4.1. Introduction to Flash Catalyst
      1. 4.1.1. Interface overview
      2. 4.1.2. The artboard
      3. 4.1.3. The Pages/States panel
      4. 4.1.4. The Layers panel
      5. 4.1.5. The Library panel
        1. 4.1.5.1. Using component libraries
      6. 4.1.6. The Wireframe Components panel
      7. 4.1.7. The HUD
      8. 4.1.8. The Interactions panel
      9. 4.1.9. The Properties panel
        1. 4.1.9.1. Common
        2. 4.1.9.2. Component
        3. 4.1.9.3. Appearance
      10. 4.1.10. Text properties
      11. 4.1.11. Filters
      12. 4.1.12. The Design-Time Data panel
      13. 4.1.13. The Timelines panel
        1. 4.1.13.1. Working with the timeline
        2. 4.1.13.2. Adding effects manually
    2. 4.2. Building applications using Flash Catalyst
      1. 4.2.1. Building applications from scratch
      2. 4.2.2. Integration with Creative Suite 5
        1. 4.2.2.1. Creating mindblowing graphical components
        2. 4.2.2.2. Editing your Flash Catalyst graphics in Illustrator
      3. 4.2.3. Round tripping between Flash Builder and Flash Catalyst
    3. 4.3. A tool for the "devigner"
    4. 4.4. Building AIR applications with Flash Catalyst?
    5. 4.5. Summary
  11. 5. Choosing the Best Workflow
    1. 5.1. Simple Design, Simple Functionality
      1. 5.1.1. A Product Manual Application
        1. 5.1.1.1. The designer/interaction designer perspective
          1. 5.1.1.1.1. Creating the application layout
          2. 5.1.1.1.2. Creating the navigation
          3. 5.1.1.1.3. Creating the content
          4. 5.1.1.1.4. Adding the Interactions
      2. 5.1.2. Conclusion
    2. 5.2. Simple Design, Complex Functionality
      1. 5.2.1. A Photo Resizer
        1. 5.2.1.1. The Developer Perspective
          1. 5.2.1.1.1. Creating the Application Layout
          2. 5.2.1.1.2. Creating the Content
          3. 5.2.1.1.3. Adding the Interactions
      2. 5.2.2. Conclusion
    3. 5.3. Simple Design, Connected to a Back End
      1. 5.3.1. A Twitter Search Client
        1. 5.3.1.1. The Designer Perspective
        2. 5.3.1.2. The Interaction Designer Perspective
          1. 5.3.1.2.1. Creating the Application Layout
          2. 5.3.1.2.2. Creating the Data List with a Custom Scrollbar
          3. 5.3.1.2.3. Adding the Interactions
        3. 5.3.1.3. The Developer Perspective
          1. 5.3.1.3.1. Retrieving the Data at Runtime
          2. 5.3.1.3.2. Adjusting the Item Renderer to Display the Runtime Data
        4. 5.3.1.4. Oops, the Design is Missing Something!
          1. 5.3.1.4.1. The Interaction Designer Changes
          2. 5.3.1.4.2. The Developer Changes
      2. 5.3.2. Conclusion
    4. 5.4. Complex Design, Simple Functionality
      1. 5.4.1. A Static Website
        1. 5.4.1.1. The Designer Perspective
        2. 5.4.1.2. The Interaction Designer Perspective
          1. 5.4.1.2.1. Creating the Components
          2. 5.4.1.2.2. Creating the Pages
          3. 5.4.1.2.3. Adding the Interactions
      2. 5.4.2. Conclusion
    5. 5.5. Complex Design, Complex Functionality
      1. 5.5.1. A Simulator
        1. 5.5.1.1. The designer perspective
        2. 5.5.1.2. The Interaction Designer Perspective
          1. 5.5.1.2.1. Creating the Components
          2. 5.5.1.2.2. Creating the Pages
        3. 5.5.1.3. The Developer Perspective
          1. 5.5.1.3.1. Adding the Calculation
          2. 5.5.1.3.2. Adding the Graph
      2. 5.5.2. Conclusion
    6. 5.6. Complex Design, Connected to a Back End
      1. 5.6.1. A Solar Panel Monitor
        1. 5.6.1.1. The Designer Perspective
          1. 5.6.1.1.1. Adding the Indicators
      2. 5.6.2. The Interaction Designer Perspective
      3. 5.6.3. The Developer Perspective
        1. 5.6.3.1.
          1. 5.6.3.1.1. Retrieving the Data at Runtime
          2. 5.6.3.1.2. Solving the Cross Domain Issue
          3. 5.6.3.1.3. Interpreting the Retrieved Data
          4. 5.6.3.1.4. Adjusting the Labels and Arrow Rotation
      4. 5.6.4. Conclusion
    7. 5.7. Summary
  12. 6. Case Study: An E-Commerce Site
    1. 6.1. Understanding the Project
    2. 6.2. Analyzing the Project
      1. 6.2.1. Functional Analysis
      2. 6.2.2. Team Composition
    3. 6.3. Designing the Application
      1. 6.3.1. Creating the Application's Layout Structure
      2. 6.3.2. Creating the Tabs to Log In
      3. 6.3.3. Adding Design Elements
      4. 6.3.4. Adding the Navigation Bar
        1. 6.3.4.1. The Shopping Cart
        2. 6.3.4.2. The Search Box
      5. 6.3.5. Adding the Content
        1. 6.3.5.1. The Home Page
        2. 6.3.5.2. The About Page
        3. 6.3.5.3. The Photo Gallery Page
        4. 6.3.5.4. The List of Photographs
        5. 6.3.5.5. The Detail Pop-up
      6. 6.3.6. The Contact Page
      7. 6.3.7. The Login Page
      8. 6.3.8. The Registration Page
    4. 6.4. Bringing the Application to Life
      1. 6.4.1. The Components
        1. 6.4.1.1. The Navigation Items
        2. 6.4.1.2. The Shopping Cart Box
        3. 6.4.1.3. Creating the Combo Box
        4. 6.4.1.4. The Navigation Tabs
        5. 6.4.1.5. The Home Page Photo Button
        6. 6.4.1.6. The Custom Text Input Fields
        7. 6.4.1.7. Reusing Existing Components
        8. 6.4.1.8. The Photo Gallery Component
          1. 6.4.1.8.1. The Repeated Photo Item
          2. 6.4.1.8.2. Creating the Tiled List Component
          3. 6.4.1.8.3. Calling the Detail Pop-Up
      2. 6.4.2. The Pages
        1. 6.4.2.1. The Home Page
        2. 6.4.2.2. The About Page
        3. 6.4.2.3. The Photo Gallery Page
        4. 6.4.2.4. The Contact Page
        5. 6.4.2.5. The Login Page
        6. 6.4.2.6. The Registration Page
        7. 6.4.2.7. Navigating the Tabs
    5. 6.5. Hooking Up the Application to the Back End
      1. 6.5.1. Creating the Database
      2. 6.5.2. Writing the Back-End API
        1. 6.5.2.1. Enabling Object Relational Mapping (ORM)
        2. 6.5.2.2. Creating the Data Transfer Objects (DTOs)
        3. 6.5.2.3. Creating the Assembler Classes
      3. 6.5.3. Adding Dynamic Data to the Application
        1. 6.5.3.1. Adjusting the Flash Catalyst Components
          1. 6.5.3.1.1. Setting the Custom Focus State on the Text Input Components
          2. 6.5.3.1.2. Wiring Up the Combo Box Component
          3. 6.5.3.1.3. Making Properties Publicly Available
        2. 6.5.3.2. The CAPTCHA Component
          1. 6.5.3.2.1. Embedding the Font
          2. 6.5.3.2.2. Making Properties Publicly Available
        3. 6.5.3.3. Connecting the Application to the Back-End API
          1. 6.5.3.3.1. The Photo Gallery
          2. 6.5.3.3.2. Using the Data/Services Panel
          3. 6.5.3.3.3. Dynamically Fltering the Photos
          4. 6.5.3.3.4. Configuring the Returned Data Type
          5. 6.5.3.3.5. Using the Returned Data in the Item Renderer
          6. 6.5.3.3.6. Using Custom Events to Trigger the Detail Pop-Up
          7. 6.5.3.3.7. Using the Runtime Data in the Detail Pop-Up
          8. 6.5.3.3.8. The Contact Page
          9. 6.5.3.3.9. The Login Procedure
          10. 6.5.3.3.10. The Registration Procedure
    6. 6.6. Summary
  13. 7. Managing RIA Projects
    1. 7.1. Projects and Complexity
    2. 7.2. Project Team
      1. 7.2.1. Team Compositions
      2. 7.2.2. Collaboration has Changed
    3. 7.3. Agile Development
      1. 7.3.1. Methodologies
      2. 7.3.2. Iterative Development
    4. 7.4. FlexPMD: A Useful Tool
    5. 7.5. Summary
  14. 8. Frameworks
    1. 8.1. The Example Application
    2. 8.2. Mate
      1. 8.2.1. The Code
      2. 8.2.2. Conclusion
    3. 8.3. PureMVC
      1. 8.3.1. The Code
      2. 8.3.2. Conclusion
    4. 8.4. Swiz
      1. 8.4.1. The Code
      2. 8.4.2. Conclusion
    5. 8.5. Summary
  15. 9. Best Practices
    1. 9.1. Project Setup
      1. 9.1.1. Use Workspaces
      2. 9.1.2. Determine the Target Platform
      3. 9.1.3. Determine the Back End Technology
      4. 9.1.4. Deploy Release Builds
      5. 9.1.5. Place External Libraries in the libs Folder
      6. 9.1.6. Use Runtime Shared Libraries
      7. 9.1.7. Externalize the Flex framework
      8. 9.1.8. Organize Code into Packages
      9. 9.1.9. Synchronize with Back End Packages
      10. 9.1.10. Plan the Illustrator/Photoshop File Structure
      11. 9.1.11. Use an Assets Directory
      12. 9.1.12. Organize Your Assets
      13. 9.1.13. Use an XML File for the Parameters
    2. 9.2. Coding and Naming Conventions
      1. 9.2.1. Don't Link to External Image Files
      2. 9.2.2. Name All Design Layers
      3. 9.2.3. Design Only One Item for a Data List Component
      4. 9.2.4. Create Flash Catalyst Components Before Defining View States
      5. 9.2.5. Rename Flash Catalyst Components in the Library Panel
      6. 9.2.6. Reverse Engineer the Application's URL as a Package Structure
      7. 9.2.7. Use Plural Names for Packages
      8. 9.2.8. Use Appropriate Package Names
      9. 9.2.9. Use Singular Names for Classes
      10. 9.2.10. Use Titlecase or Camelcase for Class Names
      11. 9.2.11. Append the Class Type to the Class Name
      12. 9.2.12. Consider Appending "Base" to Base Class Names
      13. 9.2.13. Consider Appending "Abstract" to Abstract Class Names
      14. 9.2.14. Maintain Order in Your Classes
      15. 9.2.15. Use Uppercase for Constants
      16. 9.2.16. Use Camelcase/Titlecase for Variables
      17. 9.2.17. Give Variables Proper Names
      18. 9.2.18. Put an Underscore in Front of Private Variables
      19. 9.2.19. Use Implicit Getters and Setters
      20. 9.2.20. Name Implicit Getters and Setters according to the Property
      21. 9.2.21. Use Implicit Getters and Setters Internally
      22. 9.2.22. Set Argument Types and Return Types Strictly
      23. 9.2.23. Always Name the Argument of Event Handlers "Event"
      24. 9.2.24. Use a Verb in the Method Name
      25. 9.2.25. Override the Clone() Method for Custom Events
      26. 9.2.26. Keep Order in Your MXML Files
      27. 9.2.27. Use Whitespace
      28. 9.2.28. Format Your Code
      29. 9.2.29. Every Visual Component Should Have an id Attribute
      30. 9.2.30. Set the id Attribute as the First One in an MXML Tag
      31. 9.2.31. Group MXML Tag Attributes on One Line
      32. 9.2.32. Use an External CSS File
      33. 9.2.33. Maintain Order in Your CSS File
      34. 9.2.34. Be Consistent in Naming Styles
      35. 9.2.35. Limit the Number of CSS Files
      36. 9.2.36. Define the CSS Files in the Main Application File
    3. 9.3. Collaboration
      1. 9.3.1. Talk to Each Other
      2. 9.3.2. Formalize Decisions
      3. 9.3.3. Use a Source Versioning Tool
      4. 9.3.4. Only Commit Code that Actually Works
      5. 9.3.5. Mark Duplicate Assets in Your Design
      6. 9.3.6. Design on a Single Artboard
      7. 9.3.7. Give Design Layers Proper Names
      8. 9.3.8. Don't Define All Components in Your Design
      9. 9.3.9. Don't Define All Component States in Your Design
      10. 9.3.10. Create Reusable "Black Box" Components
      11. 9.3.11. Consider Using Code Generation
      12. 9.3.12. Create Library Projects
      13. 9.3.13. Create a Manifest File for Your Library
      14. 9.3.14. Test, Test, Test
      15. 9.3.15. Use Different Deployment Levels
      16. 9.3.16. Set Up a Bug Reporting/Change Request Environment
      17. 9.3.17. Use a Unit Testing Framework
      18. 9.3.18. Use an Application Framework
      19. 9.3.19. Know When Not to Use an Application Framework
      20. 9.3.20. Perform Code Reviews
      21. 9.3.21. Comment Your Code
      22. 9.3.22. Validate Input Before Sending It to the Back End
      23. 9.3.23. Use the Same Local Server Settings For Everyone
      24. 9.3.24. Configure Your Application Externally
    4. 9.4. Summary

Product information

  • Title: Flash Builder and Flash Catalyst: The New Workflowdi
  • Author(s): Steven Peeters
  • Release date: May 2010
  • Publisher(s): Apress
  • ISBN: 9781430228356