Peeters Flash Builder and Flash Catalyst

The New Workflow
1. ed
ISBN: 978-1-4302-2836-3
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 360 Seiten

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 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

Autoren/Hrsg.

Peeters, Steven

Inhaltsverzeichnis

1;Title Page;1
2;Copyright Page;2
3;Contents at a Glance;3
4;Table of Contents;4
5;About the Author;12
6;About the Technical Reviewer;13
7;Acknowledgments;14
8;Introduction;15
8.1;Layout conventions;16
9;Chapter 1 Flex and AIR: Taking RIAs to the Next Level;17
9.1;Taking Advantage of Flash Technology;17
9.1.1;Mainframe;17
9.1.2;Client-Server;18
9.1.3;Web Applications;18
9.1.4;Rich Internet Applications;19
9.2;Why Should You Use the Flash Platform?;20
9.3;Where is Flex Used?;21
9.3.1;Flex on the Web;21
9.3.2;Flex in the Enterprise;22
9.3.3;Testing Flex applications;23
9.4;Connecting Applications to a Back End;23
9.4.1;AMFPHP;24
9.4.2;Zend AMF;26
9.4.3;LiveCycle Data Services;28
9.4.3.1;Proxy Service;29
9.4.3.2;Web-Tier Compiler;31
9.4.3.3;Flash Remoting;31
9.4.3.4;Data Management;34
9.4.3.5;Reduce Written Code;34
9.4.3.6;Tracking Changes;35
9.4.3.7;Differences with Remote Procedure Calls (RPC services);37
9.4.3.8;Fiber;41
9.4.4;BlazeDS;41
9.4.5;GraniteDS;44
9.4.5.1;Code Generation;46
9.4.6;ColdFusion Data Services;47
9.5;Adobe AIR: Why Do We Want Desktop RIAs?;52
9.6;Summary;53
10;Chapter 2 Flex 4 SDK: Overview of the New Features;54
10.1;Component Architecture;54
10.2;View States;57
10.3;FXG;64
10.4;Spark-ling Effects;66
10.4.1;Property Effects;68
10.4.2;Transform Effects;69
10.4.3;3D Effects;69
10.4.4;Pixel-Shader Effects;69
10.4.5;Filter Effects;71
10.5;Advanced CSS Selectors;71
10.5.1;Use of Namespaces;71
10.5.2;Type Selector;73
10.5.3;Class Selector;74
10.5.4;Universal Selector;75
10.5.5;ID Selector;76
10.5.6;Descendant Selector;78
10.5.7;Pseudo Selector;80
10.6;Two-Way Binding;82
10.7;Summary;85
11;Chapter 3 Flash Builder 4: The programming environment;86
11.1;What is Flash Builder 4?;86
11.2;What Happened to Flex Builder?;87
11.3;The New Features;88
11.3.1;Backward Compatibility;88
11.3.2;Improved Project Properties;89
11.3.3;Package Explorer;91
11.3.4;Code Generation;92
11.3.5;Refactoring Support;94
11.3.6;View States in Source Mode;96
11.3.7;Improved Design Editor;99
11.3.7.1;Generation of Detail Form;102
11.4;Improved Back-End Connectivity;104
11.4.1;Data/Services Panel;104
11.4.2;ZendAMF Integration;106
11.4.3;Drag-and-Drop Binding;107
11.5;Debugging;109
11.5.1;Conditional Breakpoints;109
11.5.2;Changing Values at Runtime;111
11.5.3;Network Monitor;111
11.6;Call Hierarchy View;112
11.7;Summary;113
12;Chapter 4 Flash Catalyst: bridging the gap;114
12.1;Introduction to Flash Catalyst;114
12.1.1;Interface overview;115
12.1.2;The artboard;117
12.1.3;The Pages/States panel;117
12.1.4;The Layers panel;118
12.1.5;The Library panel;120
12.1.5.1;Using component libraries;122
12.1.6;The Wireframe Components panel;123
12.1.7;The HUD;124
12.1.8;The Interactions panel;126
12.1.9;The Properties panel;129
12.1.9.1;Common;129
12.1.9.2;Component;130
12.1.9.3;Appearance;130
12.1.10;Text properties;132
12.1.10.1;Filters;132
12.1.11;The Design-Time Data panel;133
12.1.12;The Timelines panel;135
12.1.12.1;Working with the timeline;137
12.1.12.2;Adding effects manually;138
12.2;Building applications using Flash Catalyst;139
12.2.1;Building applications from scratch;139
12.2.2;Integration with Creative Suite 5;139
12.2.2.1;Creating mindblowing graphical components;140
12.2.2.2;Editing your Flash Catalyst graphics in Illustrator;141
12.2.3;Round tripping between Flash Builder and Flash Catalyst;142
12.3;A tool for the “devigner”;142
12.4;Building AIR applications with Flash Catalyst?;143
12.5;Summary;145
13;Chapter 5 Choosing the Best Workflow;146
13.1;Simple Design, Simple Functionality;148
13.1.1;A Product Manual Application;148
13.1.1.1;The designer/interaction designer perspective;148
13.1.1.2;Creating the application layout;149
13.1.1.3;Creating the navigation;151
13.1.1.4;Creating the content;153
13.1.1.5;Adding the Interactions;154
13.1.2;Conclusion;155
13.2;Simple Design, Complex Functionality;155
13.2.1;A Photo Resizer;155
13.2.2;The Developer Perspective;156
13.2.2.1;Creating the Application Layout;156
13.2.2.2;Creating the Content;158
13.2.2.3;Adding the Interactions;160
13.2.3;Conclusion;163
13.3;Simple Design, Connected to a Back End;163
13.3.1;A Twitter Search Client;164
13.3.1.1;The Designer Perspective;164
13.3.1.2;The Interaction Designer Perspective;165
13.3.1.2.1;Creating the Application Layout;165
13.3.1.2.2;Creating the Data List with a Custom Scrollbar;166
13.3.1.2.3;Adding the Interactions;168
13.3.1.3;The Developer Perspective;169
13.3.1.3.1;Retrieving the Data at Runtime;170
13.3.1.3.2;Adjusting the Item Renderer to Display the Runtime Data;171
13.3.1.4;Oops, the Design is Missing Something!;172
13.3.1.4.1;The Interaction Designer Changes;172
13.3.1.4.2;The Developer Changes;172
13.3.2;Conclusion;174
13.4;Complex Design, Simple Functionality;174
13.4.1;A Static Website;175
13.4.1.1;The Designer Perspective;175
13.4.1.2;The Interaction Designer Perspective;177
13.4.1.2.1;Creating the Components;177
13.4.1.2.2;Creating the Pages;178
13.4.1.2.3;Adding the Interactions;179
13.4.2;Conclusion;180
13.5;Complex Design, Complex Functionality;180
13.5.1;A Simulator;180
13.5.1.1;The designer perspective;182
13.5.1.2;The Interaction Designer Perspective;184
13.5.1.2.1;Creating the Components;184
13.5.1.2.2;Creating the Pages;186
13.5.1.3;The Developer Perspective;186
13.5.1.3.1;Adding the Calculation;188
13.5.1.3.2;Adding the Graph;190
13.5.2;Conclusion;191
13.6;Complex Design, Connected to a Back End;191
13.6.1;A Solar Panel Monitor;192
13.6.1.1;The Designer Perspective;192
13.6.1.2;Adding the Indicators;193
13.6.2;The Interaction Designer Perspective;194
13.6.3;The Developer Perspective;195
13.6.3.1;Retrieving the Data at Runtime;195
13.6.3.2;Solving the Cross Domain Issue;196
13.6.3.3;Interpreting the Retrieved Data;197
13.6.3.4;Adjusting the Labels and Arrow Rotation;198
13.6.4;Conclusion;199
13.7;Summary;200
14;Chapter 6 Case Study: An E-Commerce Site;201
14.1;Understanding the Project;201
14.2;Analyzing the Project;202
14.2.1;Functional Analysis;202
14.2.2;Team Composition;204
14.3;Designing the Application;205
14.3.1;Creating the Application’s Layout Structure;206
14.3.2;Creating the Tabs to Log In;208
14.3.3;Adding Design Elements;209
14.3.4;Adding the Navigation Bar;210
14.3.4.1;The Shopping Cart;210
14.3.4.2;The Search Box;210
14.3.5;Adding the Content;212
14.3.5.1;The Home Page;212
14.3.5.2;The About Page;213
14.3.5.3;The Photo Gallery Page;213
14.3.5.4;The List of Photographs;213
14.3.5.5;The Detail Pop-up;215
14.3.6;The Contact Page;215
14.3.7;The Login Page;215
14.3.8;The Registration Page;216
14.4;Bringing the Application to Life;217
14.4.1;The Components;218
14.4.1.1;The Navigation Items;218
14.4.1.2;The Shopping Cart Box;218
14.4.1.3;Creating the Combo Box;218
14.4.1.4;The Navigation Tabs;221
14.4.1.5;The Home Page Photo Button;222
14.4.1.6;The Custom Text Input Fields;222
14.4.1.7;Reusing Existing Components;222
14.4.1.8;The Photo Gallery Component;224
14.4.1.8.1;The Repeated Photo Item;224
14.4.1.8.2;Creating the Tiled List Component;225
14.4.1.8.3;Calling the Detail Pop-Up;226
14.4.2;The Pages;226
14.4.2.1;The Home Page;227
14.4.2.2;The About Page;227
14.4.2.3;The Photo Gallery Page;228
14.4.2.4;The Contact Page;229
14.4.2.5;The Login Page;229
14.4.2.6;The Registration Page;229
14.4.2.7;Navigating the Tabs;231
14.5;Hooking Up the Application to the Back End;232
14.5.1;Creating the Database;232
14.5.2;Writing the Back-End API;233
14.5.2.1;Enabling Object Relational Mapping (ORM);234
14.5.2.2;Creating the Data Transfer Objects (DTOs);235
14.5.2.3;Creating the Assembler Classes;236
14.5.3;Adding Dynamic Data to the Application;238
14.5.3.1;Adjusting the Flash Catalyst Components;239
14.5.3.1.1;Setting the Custom Focus State on the Text Input Components;239
14.5.3.1.2;Wiring Up the Combo Box Component;240
14.5.3.1.3;Making Properties Publicly Available;240
14.5.3.2;The CAPTCHA Component;241
14.5.3.2.1;Embedding the Font;241
14.5.3.2.2;Making Properties Publicly Available;242
14.5.3.2.3;Connecting the Application to the Back-End API;243
14.5.3.2.3.1;The Photo Gallery;243
14.5.3.2.3.2;Using the Data/Services Panel;244
14.5.3.2.3.3;Dynamically Fltering the Photos;244
14.5.3.2.3.4;Configuring the Returned Data Type;245
14.5.3.2.3.5;Using the Returned Data in the Item Renderer;247
14.5.3.2.3.6;Using Custom Events to Trigger the Detail Pop-Up;249
14.5.3.2.3.7;Using the Runtime Data in the Detail Pop-Up;249
14.5.3.2.3.8;The Contact Page;250
14.5.3.2.3.9;The Login Procedure;251
14.5.3.2.3.10;The Registration Procedure;252
14.5.4;Summary;252
15;Chapter 7 Managing RIA Projects;254
15.1;Projects and Complexity;254
15.2;Project Team;256
15.2.1;Team Compositions;256
15.2.2;Collaboration has Changed;260
15.3;Agile Development;261
15.3.1;Methodologies;261
15.3.2;Iterative Development;263
15.4;FlexPMD: A Useful Tool;264
15.5;Summary;271
16;Chapter 8 Frameworks;272
16.1;The Example Application;273
16.2;Mate;274
16.2.1;The Code;276
16.2.2;Conclusion;281
16.3;PureMVC;282
16.3.1;The Code;284
16.3.2;Conclusion;290
16.4;Swiz;291
16.4.1;The Code;293
16.4.2;Conclusion;298
16.5;Summary;300
17;Chapter 9 Best Practices;301
17.1;Project Setup;301
17.1.1;Use Workspaces;302
17.1.2;Determine the Target Platform;302
17.1.3;Determine the Back End Technology;302
17.1.4;Deploy Release Builds;302
17.1.5;Place External Libraries in the libs Folder;302
17.1.6;Use Runtime Shared Libraries;303
17.1.7;Externalize the Flex framework;303
17.1.8;Organize Code into Packages;304
17.1.9;Synchronize with Back End Packages;305
17.1.10;Plan the Illustrator/Photoshop File Structure;305
17.1.11;Use an Assets Directory;306
17.1.12;Organize Your Assets;306
17.1.13;Use an XML File for the Parameters;306
17.2;Coding and Naming Conventions;307
17.2.1;Don’t Link to External Image Files;307
17.2.2;Name All Design Layers;307
17.2.3;Design Only One Item for a Data List Component;307
17.2.4;Create Flash Catalyst Components Before Defining View States;308
17.2.5;Rename Flash Catalyst Components in the Library Panel;308
17.2.6;Reverse Engineer the Application’s URL as a Package Structure;309
17.2.7;Use Plural Names for Packages;309
17.2.8;Use Appropriate Package Names;310
17.2.9;Use Singular Names for Classes;310
17.2.10;Use Titlecase or Camelcase for Class Names;310
17.2.11;Append the Class Type to the Class Name;310
17.2.12;Consider Appending “Base” to Base Class Names;310
17.2.13;Consider Appending “Abstract” to Abstract Class Names;310
17.2.14;Maintain Order in Your Classes;311
17.2.15;Use Uppercase for Constants;312
17.2.16;Use Camelcase/Titlecase for Variables;312
17.2.17;Give Variables Proper Names;312
17.2.18;Put an Underscore in Front of Private Variables;312
17.2.19;Use Implicit Getters and Setters;312
17.2.20;Name Implicit Getters and Setters according to the Property;313
17.2.21;Use Implicit Getters and Setters Internally;313
17.2.22;Set Argument Types and Return Types Strictly;314
17.2.23;Always Name the Argument of Event Handlers “Event”;314
17.2.24;Use a Verb in the Method Name;314
17.2.25;Override the Clone() Method for Custom Events;314
17.2.26;Keep Order in Your MXML Files;315
17.2.27;Use Whitespace;316
17.2.28;Format Your Code;316
17.2.29;Every Visual Component Should Have an id Attribute;316
17.2.30;Set the id Attribute as the First One in an MXML Tag;316
17.2.31;Group MXML Tag Attributes on One Line;317
17.2.32;Use an External CSS File;317
17.2.33;Maintain Order in Your CSS File;317
17.2.34;Be Consistent in Naming Styles;318
17.2.35;Limit the Number of CSS Files;318
17.2.36;Define the CSS Files in the Main Application File;319
17.3;Collaboration;319
17.3.1;Talk to Each Other;319
17.3.2;Formalize Decisions;319
17.3.3;Use a Source Versioning Tool;319
17.3.4;Only Commit Code that Actually Works;320
17.3.5;Mark Duplicate Assets in Your Design;320
17.3.6;Design on a Single Artboard;321
17.3.7;Give Design Layers Proper Names;321
17.3.8;Don’t Define All Components in Your Design;321
17.3.9;Don’t Define All Component States in Your Design;322
17.3.10;Create Reusable “Black Box” Components;322
17.3.11;Consider Using Code Generation;323
17.3.12;Create Library Projects;323
17.3.13;Create a Manifest File for Your Library;323
17.3.14;Test, Test, Test;324
17.3.15;Use Different Deployment Levels;324
17.3.16;Set Up a Bug Reporting/Change Request Environment;325
17.3.17;Use a Unit Testing Framework;325
17.3.18;Use an Application Framework;326
17.3.19;Know When Not to Use an Application Framework;326
17.3.20;Perform Code Reviews;326
17.3.21;Comment Your Code;326
17.3.22;Validate Input Before Sending It to the Back End;327
17.3.23;Use the Same Local Server Settings For Everyone;327
17.3.24;Configure Your Application Externally;327
17.4;Summary;329
18;Index;330