book

Learning Flex 4

by Alaric Cole, Elijah Robison

November 2010

Beginner

476 pages

14h 19m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Preface
Who This Book Is ForHow This Book Is OrganizedCompanion WebsiteWhat This Book CoversTypographical Conventions Used in This BookUsing the Code ExamplesWe’d Like to Hear from YouSafari® Books OnlineAcknowledgmentsThanks from AlaricThanks from Elijah
1. Getting Up to Speed
What Is Flex?Flex Is a Modern, Hybrid FrameworkFlex Is FlashFlex Is the Flex SDKWhat About AIR?Where Flex FitsWhy Use Flex?Flex Is for ApplicationsFor Easy InteractivityFor Development SpeedFor Speed All AroundBecause It’s CleanBecause It’s FreeBecause It’s OpenFor Data (and Fast)Because It’s BeautifulHow Flex Compares to Other TechnologiesFlashC LanguagesJava/Java FXHTML/JavaScript/AjaxSilverlight/XAMLOpenLaszloWhen Not to Use FlexSummary
2. Setting Up Your Environment
Using Alternatives to Flash BuilderIntroducing Flash Builder and EclipseFlex FlavorsFlash Builder InstallationYour Editor at a GlanceRunning Your First ApplicationImporting a Project ArchiveOpening the ApplicationRunning the ApplicationEverything Is a ProjectImporting an Existing ProjectCreating a New Flex ProjectThe Structure of a Flex ProjectSummary
3. Using Design Mode
A Blank Slate: Your First ProjectAdding Components to the ApplicationDragging and Dropping ComponentsSelecting Components in the Outline PaneExploring Common ComponentsControlsLayout ContainersNavigatorsNonvisual ComponentsModifying Properties DirectlyExamining the Properties PaneStandard viewCategory viewAlphabetical viewCommon PropertiesSummary
4. Using Source Mode
What Design Mode DoesAnatomy of a Flex ApplicationAdding Components in Source ModeCode CompletionMXML in DepthThe XML in MXMLIt’s All About StructureA Few Ground RulesAll that is opened must be closedCase mattersDeclarations are optional, but politeThe Anatomy of a TagS, FX, and MX: Namespaces ExplainedNamespace BasicsNamespaces and Third-Party LibrariesSummary
5. ActionScript Basics for Flex Applications
Getting ReadyDot NotationInline ActionScriptAssignment and ConcatenationFunctionsWhere to Place a FunctionHow to Create a FunctionFunction AccessFunction ParametersVariablesData TypesFundamental Data TypesTyping VariablesTyping FunctionsObjectsClassesPackagesMaking a New ClassClass PropertiesClass MethodsWorking with Custom ClassesActionScript’s Relationship with MXMLMXML and ActionScript Work TogetherMXML Becomes ActionScriptTags Are ClassesAttributes Are PropertiesAttributes Are StylesAttributes Are Event Listeners, TooComments?Summary
6. Debugging Flex Applications
Outputting Values to the Console Using trace()Inspecting Event Properties with trace()Using BreakpointsSeeing a New PerspectiveThe Variables Pane“Walk, Don’t Run”Ending Your Debug SessionSummary
7. ADDING INTERACTION WITH ACTIONSCRIPT
Understanding EventsCommon EventsResearching EventsWhat Events Are Available to This Component?Flex/ActionScript DocumentationFlash Builder’s help systemASDocAdobe’s Flash Platform Language ReferenceListening for and Responding to EventsHandling Events InlineInspecting screen coordinates with mouseMove()Testing data input using change()Handling Events in ActionScriptEvent constantsUsing addEventListener() in ActionScriptCreating a draggable componentCreating a self-powered, moving componentCollision! A Whirlwind of EventsCreate the Supporting ClassesLinking the external source and adding a packageBall.mxmlPaddle.mxmlThe Main Application CodeInitial InsightsA new namespaceThe mathThe branching structures (decision logic)The Five FunctionsonAppComplete()resetGame()startBallMovement()ballMover()Calculating the trajectoryTesting for collisionsHandling collisionsHandling game overkeyDown()Game Play and Customizing StrategiesBasic customizing variablesOpportunities for improved performanceAdd a scorekeeping systemAdd additional component classesAutomate game play when not in useSummary
8. Using Data Binding
What Is Data Binding?Applying Data BindingOne-Way BindingBinding VariablesMultiple DestinationsConcatenationWhitespace and inline bindingsActionScript between the bracesEscape SequencesResizable Application LayoutsThe <fx:Binding/> TagBasic usageMultiple sourcesCurly Brace Syntax Versus Binding TagsTwo-Way BindingsHandling Complex Data with Data ModelsBuilding the Data ModelMultilevel BindingsWhen Data Binding Isn’t AppropriateSummary
9. Designing Application Layouts
Types of LayoutsAbsolute PositioningRelative PositioningThe Display ListDefault Layer OrderAccessing ChildrenAdding and Removing ChildrenRearranging ChildrenSizingExplicit SizingRelative or Percentage-Based SizingMinimum and Maximum SizesControlling Whitespace in the LayoutPadding the LayoutGapsAdvanced ContainersDivided BoxesTileLayout and TileGroupFormSpacers and LinesSpacerFXG Line GraphicAlignmentConstraints-Based LayoutConstraints Explainedtop, bottom, left, and righthorizontalCenter and verticalCenterSummary

10. Creating Rich Forms
Preparing a Form-Based ApplicationStarting the FormMaking Inputs RequiredAdding a RadioButtonGroupCompleting the Form LayoutAddress and ZIP CodeDateFieldColorPickerThe finished form layoutValidating DataUsing ValidatorsStringValidatorEmailValidatorPhoneNumberValidatorZipCodeValidatorAdditional validator componentsCustom Validation TechniquesThe triggerEvent and trigger propertiesThe validate() methodLinking several validators with Validator.validateAll()Restricting InputFormatting InputCombining Restrictions and FormattersLinking Formatters to FunctionsSummary
11. Gathering and Displaying Data
Using List-Based ControlsLists of Simple DataLists of Complex DataCustom label fieldsAdvanced listsUsing XML DataThe XML StructureHandling XML Data as an XMLListCollectionReading XML Using E4XHandling XML Data in the Halo DataGridLoading External Data at Compile TimeLoading External Data at RuntimeImplementing List SelectionConnecting to Search ResultsDragging and Dropping in ListsCreating Custom Item RenderersWorking with External Data ServicesWeb ServicesRemoteObjectPHP and HTTPServiceSummary
12. Controlling Visibility and Navigation
Controlling VisibilityNavigation ComponentsTabNavigatorTabBar and ViewStackButtonBar and ViewStackLinkBar and ViewStackControlling the ViewStack with ActionScriptControlling navigation using inline ActionScriptControlling navigation using named functionsThe Accordion NavigatorCreating a Photo Gallery ApplicationAdding Multiple Tab ViewsPopulating the Photo Gallery with XMLCreating the photos.xml fileConnect to the XML with an HTTPService componentDisplaying External ImagesMonitoring the Loading Progress of ImagesCreating the ThumbnailsSyncing Two ListsSummary
13. Working with View States
Scenarios for StatesManaging States in Design ModeCreating a New StateEditing State PropertiesModifying Layouts for StatesChanging the Current State with ScriptMaking a Login/Registration FormThe Base StateAdding View States in Source ModeIncluding and Excluding Components from StatesLinking Component Properties to StatesChanging the Current State with ScriptApplying States to the Search ApplicationRestoring the ApplicationRevising the Search ApplicationAdding States and State-Specific PropertiesSummary
14. Applying Effects, Transitions, and Filters
EffectsEffects BasicsEffects CategoriesApplying Spark EffectsEffects in sequenceEffects in parallelCombining sequenced and parallel effectsPassed-in targetsExplicit targetingTransitionsTransition SyntaxMaking State Changes More InterestingBuilding the transitions blockTarget filtering (targets of opportunity)FiltersTypes of FiltersApplying FiltersSummary
15. Styling and Skinning
Inline Style AssignmentsStyle Blocks and CSSThe Style BlockCSS SyntaxNamespaces in CSSStyle selectorsSelector precedenceExternal CSSCreating and Referencing the CSS FileAdding Style Rules to the CSS FileCreating Interesting Backgrounds with FXG GraphicsSkinningWorking with PackagesCreating a Custom SkinAssigning a Host ComponentEmbedding an assetApplying a custom skin in Source modeApplying a custom skin in CSSApplying a custom skin in Design modeSkinning with FXG Graphics and EffectsExpanding the package directoryAdding the FXG graphicAbout skin class requirementsCreating the GraphicButtonSkinSummary
16. Making Data Dynamic: Linking Flex to the Server
Some Background InformationOur Choice of Server Technologies: PHP and MySQLAdobe AIRThe ContactManager ApplicationCreating an Adobe AIR ProjectConfiguring the Server and bin LocationsCode for the ContactManagerLinking ContactManager to the Server Using the HTTPService ClassLoading Contacts Using the HTTPService ComponentSending Data with the HTTPService ClassSummary
17. Deploying Flex Applications
Deploying to the WebChecking Compiler OptionsFlex SDK versionAdobe Flash Player optionsUse Flash Text Engine in MX componentsCopy non-embedded files to output folderGenerate accessible SWF fileEnable strict type checkingEnable warningsHTML wrapperFlash Player versionEnable integration with browser navigationMerge or Separate the Flex Framework LibraryExport a Release BuildSharing source codeSetting the export pathUpload files to the web hostDeploying to the DesktopCreating an AIR InstallerCustomizing the ApplicationExporting an InstallerCreating a Seamless InstallSummary
18. What Comes Next?
Third-Party APIsPrint ResourcesOnline ResourcesArticles and BlogsReference MaterialCertificationEnfin
A. Creating a Development Environment
Use WAMP (Windows) or MAMP (Mac OS)Inspecting the WAMP Tool MenuTest the InstallationAdd PHP Development Tools (PDT) to a Flash Builder InstallationInstalling PDTTesting the XML Developer ToolsTesting the PHP Development ToolsSummary
B. MySQL Basics
Language Elements and SyntaxMySQL StatementsThe SELECT Statement and Fully Qualified ReferencesThe INSERT StatementThe UPDATE Statement and Primary Key FieldCreating a Database with phpMyAdminCreating the DatabaseCreating the TableAdding FieldsInserting RecordsBrowsing the DataSummary
C. PHP Basics
Language Elements and SyntaxPHP FilesVariable Declaration in PHPConcatenating Strings in PHPPHP MySQL FunctionsThe PHP ScriptsloadContacts.phpinsertContact.phpupdateContact.phpSummary
D. Compiling Flex Applications on Linux Using the Command Line
Install Flash Player 10Install JavaDownload the Flex 4 SDKCreate a Project Folder StructureAdd an MXML FileAdd Environment VariablesTweak the Project Configuration FileCreate a Reusable Compiler Script in BashCompile and TestSummary
Index
About the Authors
Copyright

Overview

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

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781449397500Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills