Flash Builder and Flash Catalyst (eBook)

Title Page 1
Copyright Page 2
Contents at a Glance 3
Table of Contents 4
About the Author 12
About the Technical Reviewer 13
Acknowledgments 14
Introduction 15
Layout conventions 16
Chapter 1 Flex and AIR: Taking RIAs to the Next Level 17
Taking Advantage of Flash Technology 17
Mainframe 17
Client-Server 18
Web Applications 18
Rich Internet Applications 19
Why Should You Use the Flash Platform? 20
Where is Flex Used? 21
Flex on the Web 21
Flex in the Enterprise 22
Testing Flex applications 23
Connecting Applications to a Back End 23
AMFPHP 24
Zend AMF 26
LiveCycle Data Services 28
Proxy Service 29
Web-Tier Compiler 31
Flash Remoting 31
Data Management 34
Reduce Written Code 34
Tracking Changes 35
Differences with Remote Procedure Calls (RPC services) 37
Fiber 41
BlazeDS 41
GraniteDS 44
Code Generation 46
ColdFusion Data Services 47
Adobe AIR: Why Do We Want Desktop RIAs? 52
Summary 53
Chapter 2 Flex 4 SDK: Overview of the New Features 54
Component Architecture 54
View States 57
FXG 64
Spark-ling Effects 66
Property Effects 68
Transform Effects 69
3D Effects 69
Pixel-Shader Effects 69
Filter Effects 71
Advanced CSS Selectors 71
Use of Namespaces 71
Type Selector 73
Class Selector 74
Universal Selector 75
ID Selector 76
Descendant Selector 78
Pseudo Selector 80
Two-Way Binding 82
Summary 85
Chapter 3 Flash Builder 4: The programming environment 86
What is Flash Builder 4? 86
What Happened to Flex Builder? 87
The New Features 88
Backward Compatibility 88
Improved Project Properties 89
Package Explorer 91
Code Generation 92
Refactoring Support 94
View States in Source Mode 96
Improved Design Editor 99
Generation of Detail Form 102
Improved Back-End Connectivity 104
Data/Services Panel 104
ZendAMF Integration 106
Drag-and-Drop Binding 107
Debugging 109
Conditional Breakpoints 109
Changing Values at Runtime 111
Network Monitor 111
Call Hierarchy View 112
Summary 113
Chapter 4 Flash Catalyst: bridging the gap 114
Introduction to Flash Catalyst 114
Interface overview 115
The artboard 117
The Pages/States panel 117
The Layers panel 118
The Library panel 120
Using component libraries 122
The Wireframe Components panel 123
The HUD 124
The Interactions panel 126
The Properties panel 129
Common 129
Component 130
Appearance 130
Text properties 132
Filters 132
The Design-Time Data panel 133
The Timelines panel 135
Working with the timeline 137
Adding effects manually 138
Building applications using Flash Catalyst 139
Building applications from scratch 139
Integration with Creative Suite 5 139
Creating mindblowing graphical components 140
Editing your Flash Catalyst graphics in Illustrator 141
Round tripping between Flash Builder and Flash Catalyst 142
A tool for the “devigner” 142
Building AIR applications with Flash Catalyst? 143
Summary 145
Chapter 5 Choosing the Best Workflow 146
Simple Design, Simple Functionality 148
A Product Manual Application 148
The designer/interaction designer perspective 148
Creating the application layout 149
Creating the navigation 151
Creating the content 153
Adding the Interactions 154
Conclusion 155
Simple Design, Complex Functionality 155
A Photo Resizer 155
The Developer Perspective 156
Creating the Application Layout 156
Creating the Content 158
Adding the Interactions 160
Conclusion 163
Simple Design, Connected to a Back End 163
A Twitter Search Client 164
The Designer Perspective 164
The Interaction Designer Perspective 165
Creating the Application Layout 165
Creating the Data List with a Custom Scrollbar 166
Adding the Interactions 168
The Developer Perspective 169
Retrieving the Data at Runtime 170
Adjusting the Item Renderer to Display the Runtime Data 171
Oops, the Design is Missing Something! 172
The Interaction Designer Changes 172
The Developer Changes 172
Conclusion 174
Complex Design, Simple Functionality 174
A Static Website 175
The Designer Perspective 175
The Interaction Designer Perspective 177
Creating the Components 177
Creating the Pages 178
Adding the Interactions 179
Conclusion 180
Complex Design, Complex Functionality 180
A Simulator 180
The designer perspective 182
The Interaction Designer Perspective 184
Creating the Components 184
Creating the Pages 186
The Developer Perspective 186
Adding the Calculation 188
Adding the Graph 190
Conclusion 191
Complex Design, Connected to a Back End 191
A Solar Panel Monitor 192
The Designer Perspective 192
Adding the Indicators 193
The Interaction Designer Perspective 194
The Developer Perspective 195
Retrieving the Data at Runtime 195
Solving the Cross Domain Issue 196
Interpreting the Retrieved Data 197
Adjusting the Labels and Arrow Rotation 198
Conclusion 199
Summary 200
Chapter 6 Case Study: An E-Commerce Site 201
Understanding the Project 201
Analyzing the Project 202
Functional Analysis 202
Team Composition 204
Designing the Application 205
Creating the Application’s Layout Structure 206
Creating the Tabs to Log In 208
Adding Design Elements 209
Adding the Navigation Bar 210
The Shopping Cart 210
The Search Box 210
Adding the Content 212
The Home Page 212
The About Page 213
The Photo Gallery Page 213
The List of Photographs 213
The Detail Pop-up 215
The Contact Page 215
The Login Page 215
The Registration Page 216
Bringing the Application to Life 217
The Components 218
The Navigation Items 218
The Shopping Cart Box 218
Creating the Combo Box 218
The Navigation Tabs 221
The Home Page Photo Button 222
The Custom Text Input Fields 222
Reusing Existing Components 222
The Photo Gallery Component 224
The Repeated Photo Item 224
Creating the Tiled List Component 225
Calling the Detail Pop-Up 226
The Pages 226
The Home Page 227
The About Page 227
The Photo Gallery Page 228
The Contact Page 229
The Login Page 229
The Registration Page 229
Navigating the Tabs 231
Hooking Up the Application to the Back End 232
Creating the Database 232
Writing the Back-End API 233
Enabling Object Relational Mapping (ORM) 234
Creating the Data Transfer Objects (DTOs) 235
Creating the Assembler Classes 236
Adding Dynamic Data to the Application 238
Adjusting the Flash Catalyst Components 239
Setting the Custom Focus State on the Text Input Components 239
Wiring Up the Combo Box Component 240
Making Properties Publicly Available 240
The CAPTCHA Component 241
Embedding the Font 241
Making Properties Publicly Available 242
Connecting the Application to the Back-End API 243
The Photo Gallery 243
Using the Data/Services Panel 244
Dynamically Fltering the Photos 244
Configuring the Returned Data Type 245
Using the Returned Data in the Item Renderer 247
Using Custom Events to Trigger the Detail Pop-Up 249
Using the Runtime Data in the Detail Pop-Up 249
The Contact Page 250
The Login Procedure 251
The Registration Procedure 252
Summary 252
Chapter 7 Managing RIA Projects 254
Projects and Complexity 254
Project Team 256
Team Compositions 256
Collaboration has Changed 260
Agile Development 261
Methodologies 261
Iterative Development 263
FlexPMD: A Useful Tool 264
Summary 271
Chapter 8 Frameworks 272
The Example Application 273
Mate 274
The Code 276
Conclusion 281
PureMVC 282
The Code 284
Conclusion 290
Swiz 291
The Code 293
Conclusion 298
Summary 300
Chapter 9 Best Practices 301
Project Setup 301
Use Workspaces 302
Determine the Target Platform 302
Determine the Back End Technology 302
Deploy Release Builds 302
Place External Libraries in the libs Folder 302
Use Runtime Shared Libraries 303
Externalize the Flex framework 303
Organize Code into Packages 304
Synchronize with Back End Packages 305
Plan the Illustrator/Photoshop File Structure 305
Use an Assets Directory 306
Organize Your Assets 306
Use an XML File for the Parameters 306
Coding and Naming Conventions 307
Don’t Link to External Image Files 307
Name All Design Layers 307
Design Only One Item for a Data List Component 307
Create Flash Catalyst Components Before Defining View States 308
Rename Flash Catalyst Components in the Library Panel 308
Reverse Engineer the Application’s URL as a Package Structure 309
Use Plural Names for Packages 309
Use Appropriate Package Names 310
Use Singular Names for Classes 310
Use Titlecase or Camelcase for Class Names 310
Append the Class Type to the Class Name 310
Consider Appending “Base” to Base Class Names 310
Consider Appending “Abstract” to Abstract Class Names 310
Maintain Order in Your Classes 311
Use Uppercase for Constants 312
Use Camelcase/Titlecase for Variables 312
Give Variables Proper Names 312
Put an Underscore in Front of Private Variables 312
Use Implicit Getters and Setters 312
Name Implicit Getters and Setters according to the Property 313
Use Implicit Getters and Setters Internally 313
Set Argument Types and Return Types Strictly 314
Always Name the Argument of Event Handlers “Event” 314
Use a Verb in the Method Name 314
Override the Clone() Method for Custom Events 314
Keep Order in Your MXML Files 315
Use Whitespace 316
Format Your Code 316
Every Visual Component Should Have an id Attribute 316
Set the id Attribute as the First One in an MXML Tag 316
Group MXML Tag Attributes on One Line 317
Use an External CSS File 317
Maintain Order in Your CSS File 317
Be Consistent in Naming Styles 318
Limit the Number of CSS Files 318
Define the CSS Files in the Main Application File 319
Collaboration 319
Talk to Each Other 319
Formalize Decisions 319
Use a Source Versioning Tool 319
Only Commit Code that Actually Works 320
Mark Duplicate Assets in Your Design 320
Design on a Single Artboard 321
Give Design Layers Proper Names 321
Don’t Define All Components in Your Design 321
Don’t Define All Component States in Your Design 322
Create Reusable “Black Box” Components 322
Consider Using Code Generation 323
Create Library Projects 323
Create a Manifest File for Your Library 323
Test, Test, Test 324
Use Different Deployment Levels 324
Set Up a Bug Reporting/Change Request Environment 325
Use a Unit Testing Framework 325
Use an Application Framework 326
Know When Not to Use an Application Framework 326
Perform Code Reviews 326
Comment Your Code 326
Validate Input Before Sending It to the Back End 327
Use the Same Local Server Settings For Everyone 327
Configure Your Application Externally 327
Summary 329
Index 330