Flash Builder and Flash Catalyst - The New Workflow

Title Page

Copyright Page

Contents at a Glance

Table of Contents

About the Author

About the Technical Reviewer

Acknowledgments

Introduction

Layout conventions

Chapter 1 Flex and AIR: Taking RIAs to the Next Level

Taking Advantage of Flash Technology

Mainframe

Client-Server

Web Applications

Rich Internet Applications

Why Should You Use the Flash Platform?

Where is Flex Used?

Flex on the Web

Flex in the Enterprise

Testing Flex applications

Connecting Applications to a Back End

AMFPHP

Zend AMF

LiveCycle Data Services

Proxy Service

Web-Tier Compiler

Flash Remoting

Data Management

Reduce Written Code

Tracking Changes

Differences with Remote Procedure Calls (RPC services)

Fiber

BlazeDS

GraniteDS

Code Generation

ColdFusion Data Services

Adobe AIR: Why Do We Want Desktop RIAs?

Summary

Chapter 2 Flex 4 SDK: Overview of the New Features

Component Architecture

View States

FXG

Spark-ling Effects

Property Effects

Transform Effects

3D Effects

Pixel-Shader Effects

Filter Effects

Advanced CSS Selectors

Use of Namespaces

Type Selector

Class Selector

Universal Selector

ID Selector

Descendant Selector

Pseudo Selector

Two-Way Binding

Summary

Chapter 3 Flash Builder 4: The programming environment

What is Flash Builder 4?

What Happened to Flex Builder?

The New Features

Backward Compatibility

Improved Project Properties

Package Explorer

Code Generation

Refactoring Support

View States in Source Mode

Improved Design Editor

Generation of Detail Form

Improved Back-End Connectivity

Data/Services Panel

ZendAMF Integration

Drag-and-Drop Binding

Debugging

Conditional Breakpoints

Changing Values at Runtime

Network Monitor

Call Hierarchy View

Summary

Chapter 4 Flash Catalyst: bridging the gap

Introduction to Flash Catalyst

Interface overview

The artboard

The Pages/States panel

The Layers panel

The Library panel

Using component libraries

The Wireframe Components panel

The HUD

The Interactions panel

The Properties panel

Common

Component

Appearance

Text properties

Filters

The Design-Time Data panel

The Timelines panel

Working with the timeline

Adding effects manually

Building applications using Flash Catalyst

Building applications from scratch

Integration with Creative Suite 5

Creating mindblowing graphical components

Editing your Flash Catalyst graphics in Illustrator

Round tripping between Flash Builder and Flash Catalyst

A tool for the “devigner”

Building AIR applications with Flash Catalyst?

Summary

Chapter 5 Choosing the Best Workflow

Simple Design, Simple Functionality

A Product Manual Application

The designer/interaction designer perspective

Creating the application layout

Creating the navigation

Creating the content

Adding the Interactions

Conclusion

Simple Design, Complex Functionality

A Photo Resizer

The Developer Perspective

Creating the Application Layout

Creating the Content

Adding the Interactions

Conclusion

Simple Design, Connected to a Back End

A Twitter Search Client

The Designer Perspective

The Interaction Designer Perspective

Creating the Application Layout

Creating the Data List with a Custom Scrollbar

Adding the Interactions

The Developer Perspective

Retrieving the Data at Runtime

Adjusting the Item Renderer to Display the Runtime Data

Oops, the Design is Missing Something!

The Interaction Designer Changes

The Developer Changes

Conclusion

Complex Design, Simple Functionality

A Static Website

The Designer Perspective

The Interaction Designer Perspective

Creating the Components

Creating the Pages

Adding the Interactions

Conclusion

Complex Design, Complex Functionality

A Simulator

The designer perspective

The Interaction Designer Perspective

Creating the Components

Creating the Pages

The Developer Perspective

Adding the Calculation

Adding the Graph

Conclusion

Complex Design, Connected to a Back End

A Solar Panel Monitor

The Designer Perspective

Adding the Indicators

The Interaction Designer Perspective

The Developer Perspective

Retrieving the Data at Runtime

Solving the Cross Domain Issue

Interpreting the Retrieved Data

Adjusting the Labels and Arrow Rotation

Conclusion

Summary

Chapter 6 Case Study: An E-Commerce Site

Understanding the Project

Analyzing the Project

Functional Analysis

Team Composition

Designing the Application

Creating the Application’s Layout Structure

Creating the Tabs to Log In

Adding Design Elements

Adding the Navigation Bar

The Shopping Cart

The Search Box

Adding the Content

The Home Page

The About Page

The Photo Gallery Page

The List of Photographs

The Detail Pop-up

The Contact Page

The Login Page

The Registration Page

Bringing the Application to Life

The Components

The Navigation Items

The Shopping Cart Box

Creating the Combo Box

The Navigation Tabs

The Home Page Photo Button

The Custom Text Input Fields

Reusing Existing Components

The Photo Gallery Component

The Repeated Photo Item

Creating the Tiled List Component

Calling the Detail Pop-Up

The Pages

The Home Page

The About Page

The Photo Gallery Page

The Contact Page

The Login Page

The Registration Page

Navigating the Tabs

Hooking Up the Application to the Back End

Creating the Database

Writing the Back-End API

Enabling Object Relational Mapping (ORM)

Creating the Data Transfer Objects (DTOs)

Creating the Assembler Classes

Adding Dynamic Data to the Application

Adjusting the Flash Catalyst Components

Setting the Custom Focus State on the Text Input Components

Wiring Up the Combo Box Component

Making Properties Publicly Available

The CAPTCHA Component

Embedding the Font

Making Properties Publicly Available

Connecting the Application to the Back-End API

The Photo Gallery

Using the Data/Services Panel

Dynamically Fltering the Photos

Configuring the Returned Data Type

Using the Returned Data in the Item Renderer

Using Custom Events to Trigger the Detail Pop-Up

Using the Runtime Data in the Detail Pop-Up

The Contact Page

The Login Procedure

The Registration Procedure

Summary

Chapter 7 Managing RIA Projects

Projects and Complexity

Project Team

Team Compositions

Collaboration has Changed

Agile Development

Methodologies

Iterative Development

FlexPMD: A Useful Tool

Summary

Chapter 8 Frameworks

The Example Application

Mate

The Code

Conclusion

PureMVC

The Code

Conclusion

Swiz

The Code

Conclusion

Summary

Chapter 9 Best Practices

Project Setup

Use Workspaces

Determine the Target Platform

Determine the Back End Technology

Deploy Release Builds

Place External Libraries in the libs Folder

Use Runtime Shared Libraries

Externalize the Flex framework

Organize Code into Packages

Synchronize with Back End Packages

Plan the Illustrator/Photoshop File Structure

Use an Assets Directory

Organize Your Assets

Use an XML File for the Parameters

Coding and Naming Conventions

Don’t Link to External Image Files

Name All Design Layers

Design Only One Item for a Data List Component

Create Flash Catalyst Components Before Defining View States

Rename Flash Catalyst Components in the Library Panel

Reverse Engineer the Application’s URL as a Package Structure

Use Plural Names for Packages

Use Appropriate Package Names

Use Singular Names for Classes

Use Titlecase or Camelcase for Class Names

Append the Class Type to the Class Name

Consider Appending “Base” to Base Class Names

Consider Appending “Abstract” to Abstract Class Names

Maintain Order in Your Classes

Use Uppercase for Constants

Use Camelcase/Titlecase for Variables

Give Variables Proper Names

Put an Underscore in Front of Private Variables

Use Implicit Getters and Setters

Name Implicit Getters and Setters according to the Property

Use Implicit Getters and Setters Internally

Set Argument Types and Return Types Strictly

Always Name the Argument of Event Handlers “Event”

Use a Verb in the Method Name

Override the Clone() Method for Custom Events

Keep Order in Your MXML Files

Use Whitespace

Format Your Code

Every Visual Component Should Have an id Attribute

Set the id Attribute as the First One in an MXML Tag

Group MXML Tag Attributes on One Line

Use an External CSS File

Maintain Order in Your CSS File

Be Consistent in Naming Styles

Limit the Number of CSS Files

Define the CSS Files in the Main Application File

Collaboration

Talk to Each Other

Formalize Decisions

Use a Source Versioning Tool

Only Commit Code that Actually Works

Mark Duplicate Assets in Your Design

Design on a Single Artboard

Give Design Layers Proper Names

Don’t Define All Components in Your Design

Don’t Define All Component States in Your Design

Create Reusable “Black Box” Components

Consider Using Code Generation

Create Library Projects

Create a Manifest File for Your Library

Test, Test, Test

Use Different Deployment Levels

Set Up a Bug Reporting/Change Request Environment

Use a Unit Testing Framework

Use an Application Framework

Know When Not to Use an Application Framework

Perform Code Reviews

Comment Your Code

Validate Input Before Sending It to the Back End

Use the Same Local Server Settings For Everyone

Configure Your Application Externally

Summary

Index