创建自己的flex组件

CreatingNewComponentsin

Flex3andBeyondDeepaSubramaniamFlexSDKVocabLessonFlexComponentLifecycleAmechanismtheframeworkusestocreate,manageanddestroycomponentsAmechanismthatmakesthemostoftheplayerrenderingmodel.

Halo:

ComponentarchitectureusedinFlex3andearlierversions.Gumbo/SparkGumboisthecodenameforthenextversionofFlexandFlexBuilderSparkisthecomponentandskinningarchitectureinGumbo.SparkisbuiltontopofHalo.Parts:

Internalpartsofacomponentthatarecompositedtogethertocreateawholecomponent.Compositionisthenameofthegame.

Letswriteacomponent!HaloComponentArchitecturePatternsDefiningPatternsinHaloInvalidation/ValidationModelMethodologytoaggregatechangesanddeferworkuntilanoptimallatertimeEventDrivenInteractionModelInformthecomponentifsomethingisabouttoorhasalreadyoccurredCompositionParameterizationofacomponent’sappearanceorcontent.Mostoftenoccursthroughfactoriesanditemrenderers.HaloComponentLifecycle–BrokenDown3PhaseLifecycleInitializationConstructionConfigurationAttachmentInitializationUpdating

ComponentrespondstochangesbyusingtheInvalidation/ValidationModelDestructionOutofsight,outofmindDetachmentGarbagecollection

LifecyclePhase1:InitializationConstruction:ComponentbeginsitslifecycleDecideontherightbase-classComponentisinstantiated,throughthenewoperatorinActionScriptorinmarkupConstructormusthavezerorequiredargumentsConstructorcanaddeventlisteners,hardcodeinitializationpropertiesofsuperclassesMinimalworkshouldoccurhere.

ConstructionConfigurationAttachmentInitializationInvalidationValidationDetachmentGarbageCollection LifecyclePhase1:InitializationConfiguration:ComponentpropertiesaresetinternallytobeprocessedlaterPropertyvaluesareassignedbeforepartsareattachedorinitializedtoavoidduplicatecodeexecution.Propertiesmustexpectthatpartshaven’tbeencreatedyet.ConstructionConfigurationAttachmentInitializationInvalidationValidationDetachmentGarbageCollection LifecyclePhase1:InitializationAttachment:AdditiontothedisplaylistWhatisthedisplaylist?ComponentisaddedtothedisplaylistthroughanaddChild()callbyitsparent.Withoutattachment,componentlifecyclewillstall.ConstructionConfigurationAttachmentInitializationInvalidationValidationDetachmentGarbageCollection LifecyclePhase1:InitializationInitialization Fullinvalidation/validationcycleisinvoked(wewillcomebacktothis) 5mainlifecycleactionsoccuratthisstep:preinitializeeventisdispatchedcreateChildren()iscalledinitializeeventisdispatchedFirstfullinvalidation/validationpassoccurscreationCompleteeventisdispatched

ConstructionConfigurationAttachmentInitializationInvalidationValidationDetachmentGarbageCollection LifecyclePhase1:InitializationcreateChildren()-TheattachmentworkhorseIdealplaceforaddingchildrenthatarerequiredthroughoutthelifetimeofthecomponentDynamicordata-drivenpartswhichshouldbeaddedincommitProperties()

ChecktomakesurethechildrenhavenotbeeninstantiatedalreadyFollowthesamepatternFlexuses:construct,configure,attach.HaloRules:UIComponentscancontainanything(Sprites,Shapes,MovieClips,Video,etc).

UIComponentsmust

goinsideotherUIComponentsContainersmustcontainonlyUIComponents

ConstructionConfigurationAttachmentInitializationInvalidationValidationDetachmentGarbageCollection LifecyclePhase1:InitializationFirstfullinvalidation/validationpassoccurshereInvalidationiscapturedby3methods:invalidateProperties()invalidateSize()invalidateDisplayList()Validationiscapturedby3methods:commitProperties()measure()updateDisplayList()Phase1Done!

ConstructionConfigurationAttachmentInitializationInvalidationValidationDetachmentGarbageCollection Phase2:UpdatingOurcomponenthasbeencreated!It’saliving,breathingentity,andnowitneedstoknowhowtoupdate.UpdatesoccurWhenauserinteractswithacomponentWhenmethodsorpropertiesareinvoked/setAcomponentshoulduseFlex’sInvalidation/ValidationModeltorespondtochanges.

ConstructionConfigurationAttachmentInitializationInvalidationValidationDetachmentGarbageCollection TheElasticRacetrack

FlexcomponentlifecycleisbuiltatopthisframemodelInvalidation/Validationtakesadvantageoftheelasticracetracktogetworkdoneinanefficientmanner.ImagescourtesyofSeanChristmannTraditionalFlashPlayerElasticRacetrackDeferredValidationModelWaitingforupdaterequestUpdateRequestedInvalidationValidationValidationoccursrightbeforeRenderingDeferredValidationModel:AnOptimizationInvalidation/validationmodelissplitinto3phases:UpdatecomponentpropertiesUpdatesizing&measurementinformationUpdatedrawingandpositioning

invalidateProperties()invalidateSize()invalidateDisplayList()commitProperties()measure()updateDisplayList()commitProperties()PropertymanagementphaseofvalidationPurpose:CommitvaluestypicallysetusingapropertysetterInvokedbytheframeworkbeforemeasurementandlayout.Thereisadefinitepatternthatshouldbefollowedinordertoavoidextrawork.DirtyflagsandstoragevariablesThisistheplacetoadd/removechildrennotrequiredthroughthelifeoftheentirecomponent(asopposedtocreateChildren())ConstructionConfigurationAttachmentInitializationInvalidationValidationDetachmentGarbageCollection measure()SizingphaseofvalidationPurpose:Componentcancalculateits‘natural’sizebasedoncontentandlayoutrules.Implicitlyinvokedwhencomponentchildrenchangesize.(Don’tcallmeasure()onyourchildren).Measurementoccursfromthebottomup. <mx:Application> <mx:HBox> <mx:Button/> </mx:HBox> </mx:Application>Don’tcountonit:Frameworkoptimizesawayunnecessarycallstomeasure().Themeasure()functioncalculatesandsetsfourproperties:measuredWidth,measuredHeightmeasuredMinWidth,measuredMinHeightTogetupandrunningfast,explicitlysizeyourcomponent.ConstructionConfigurationAttachmentInitializationInvalidationValidationDetachmentGarbageCollection updateDisplayList()LayoutandDrawingPhaseofInvalidationPurpose:LayoutcomponentcontentsandperformanydrawingLayoutandpositioningoccursfromthetopdown,given: <mx:Application> <mx:HBox> <mx:Button/> </mx:HBox> </mx:Application>InupdateDisplayList()youmustsetpositionandsizeofeachchildIfthechildisaUIComponent,sizeitwithsetActualSize()andpositionitwithmove()IfthechildisnotaUIComponent,setthex,y,widthandheightproperties.GoodplacetouseFlashPlayerDrawingAPIConstructionConfigurationAttachmentInitializationInvalidationValidationDetachmentGarbageCollection StylesStylesupportisbuiltintoUIComponentAddStylemetadatasothestylecanbesetinlineasanattributeinMXMLSetdefaultinitialvalueinuser’sapplicationordefaults.cssOverridestyleChanged()tocodifyhowthecomponentshouldreactwhenastylehaschanged.CheckwhichstylehaschangedandcalltherightinvalidationmethodIfithasmoretodowithpresentationitshouldbeastyle.Ifyouhaveaconstantrelatedtopresentation,itshouldbeastyleEventsinFlexComponentsdispatchandlistentoeventsAddEventmetadatatoalloweventtobesetinlineasanattributeinMXMLUsecustomEventclassesDefinestaticconstantstoenablecompile-timecheckingofeventtypes.Ifyoudispatchthesameeventasabaseclass,youmustusethesameeventclass.

Tip:Chosedescriptiveeventnames.Phase3:DestructionDestroyingthecomponentDetachment:RemovethecomponentfromthedisplaylistComponentsdonotgetvalidatedordrawnwhenoffthedisplaylistOnceoffthedisplaylist:Youcanre-parentthecomponent,anditwillbebroughtbacktolife.Re-parentingischeaperthenre-instantiatingacomponentGarbageCollectionNoactivereferencescanbetoughCommonculpritsincludeeventlisteners,dictionariesandtimers.

ConstructionConfigurationAttachmentInitializationInvalidationValidationDetachmentGarbageCollection

VideoWidgetFxVideoWidget

ComponentArchitecturePatternsDefiningPatternsinHaloInvalidation/ValidationModelEventDrivenInteractionModelCompositionDefiningPatternsinGumboCleanseparationofcomponentlogicfromitsvisualsSparkSkinningArchitectureComponentfunctionalitycanbecomposited