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

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

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
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
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
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
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
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
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
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
Third-Party APIsPrint ResourcesOnline ResourcesArticles and BlogsReference MaterialCertificationEnfin
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
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
Language Elements and SyntaxPHP FilesVariable Declaration in PHPConcatenating Strings in PHPPHP MySQL FunctionsThe PHP ScriptsloadContacts.phpinsertContact.phpupdateContact.phpSummary
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

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.