Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen.

Wait A Frame! Das Flex 4 Komponenten Model und

seinen Life Cycle verstehen.

Jens Krausewww.websector.de

http://www.websector.de


http://www.flexughh.de/


Inhalte

1 Spark Component Model

2 Flex 4 Component Life Cycle

“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de







Spark Component Model








Allgemeines

- Spark Component Model == Architektur für skinnbare Komponenten (Button, DropDownList, einige Container, usw.)

- Trennung von Verantwortlichkeiten (Logik / Darstellung) * Button (Flex 3) == “All-In-One” * Button (Flex 4) == (Host)Component + Skin (MVC Paradigma)

- Kompatibel mit Halo Component Model * Spark Components “on top” von Halo Components * SkinnableComponent (Flex 4) extends UIComponent (Flex 3)








Skinextends spark.components.supportClasses.Skin

(Host)Componentextends spark.components.supportClasses.SkinnableComponent

Model

Controller

View

Verantwortlichkeiten (MVC-Paradigma)

- Daten, z.B. scrollPosition (Scrollbar), label (Button), dataProvider (List)- Definition SkinStates (z.B. Button: “up”, “over”, ...)- Definition SkinParts (z.B. SkinnableContainer: “contentGroup”)

- Gesamte Logik- Verhalten der Komponente, z.B. Event-Handling (“click” bei Button)- States-Handling

- Design und Layout (z.B. Button: Hintergrund, Icon, Label)- Keine / kaum Logik








Beispiel: StopWatch








Skin == StopWatchAnalogSkin.mxmlextends spark.components.supportClasses.Skin

(Host)Component == StopWatch.asextends spark.components.supportClasses.SkinnableComponent

Model

Controller

View

Verantwortlichkeiten (MVC-Paradigma)

- Timer-Daten: Sekunden, Minuten, Stunden- Definition SkinStates (“run”, “stop”)- Definition SkinParts (Run/Start-Button, Reset-Button)

- Timer-Handling: Start, Stop, Reset- States-Handling

- Design und Layout (Zeiger, Run/Start-Button, Reset-Button, Hintergrund)








Etwas Code bitte!


StopWatch.asStopWatchDigitalSkin.asStopWatchAnalogSkin.as








Skinextends spark.components.supportClasses.Skin

(Host)Componentextends spark.components.supportClasses.SkinnableComponent

[SkinPart]ʼs (optional)

[SkinState]ʼs (optional)

partAdded() (falls SkinParts)

partRemoved() (falls SkinParts)

getCurrentSkinState() (falls SkinStates)

[HostComponent]

SkinStates (falls SkinStates in HC)

SkinParts (falls SkinParts in HC)

Checkliste









Wie kommen (Host)Component und Skin zusammen?







Flex 4 Component Life Cycle









Überblick

- Im Vergleich zu Flex 3: Wenig Neues!- Neu: Handling von Skins

- Festgelegter Ablauf: Entstehung (Birth), Aktualisierung (Life), Entfernen (Death)- Fest definierte Methoden (z.B. updateDisplayList() )

- Events (z.B. FlexEvent.CREATION_COMPLETE )

- Verzögerung von Modifikationen (Invalidation / Validation)








Hintergrund

- Flash Player == framebasiert (FPS)- Pro Frame: Code-Ausführung, Event-Handling, Rendering

- “Flash Player Elastic Racetrack” (Ted Patrick 2005 / Sean Christmann 2008 )

- Balance zwischen Code-Ausführung + Rendering pro Frame == Perfomance- Ted Patrick: “Wait A Frame!”

- Gedanke findet sich im Component Life Cycle wieder








Invalidation / Validation

- “künstliche” Verzögerung zur Vermeidung eines “Dynamic Racetrack” bei komplexen Modifikationen

- Steuerung über LayoutManager








Invalidation Validation

Eigenschaften

Skin-States

invalidateProperties()invalidateSkinState()

Breite / HöheinvalidateSize() measure()

Größe + Position von Childs, Drawing usw.

invalidateDisplayList() updateDisplayList()

commitProperties()getCurrentSkinState()

validateNow() Alle o.g. Eigenschaften

- Beachte: Nie Validation Methoden direkt aufrufen!










Beispiel Invalidation: Label-Eigenschaft

private var _label:String = "";private var labelChanged:Boolean = false;

public function set label(value:String):void{ if (_label != value) { _label = value; labelChanged = true;

invalidateProperties(); invalidateSize(); }}









Beispiel Validation: Label-Eigenschaft

private var labelDisplay:Label;

protected override function commitProperties():void{ super.commitProperties(); if( labelChanged ) { labelDisplay.label = _label; labelChanged = false; }}







Wie war das nochmal mit der Verzögerung gemeint?


LifeCycleExample.mxml







Component Life Cycle


Birth

Instanziierung +Hinzufügen

Life

Aktualisierungen

Death

Entfernen







Birth DeathLife

<ex:StopWatch xmlns:ex="example.*" />

oder

var stopWatch:StopWatch = new StopWatch();


- Bei der Instanziierung passiert zunächst nicht viel

- “leerer” oder “schlanker” Konstruktor

- Beachte: Deklaration über MXML startet sofort das Attachment

Construction





<ex:StopWatch xmlns:ex="example.*" id="stopWatch" width="200" height="200" />

oder

var stopWatch:StopWatch = new StopWatch();stopWatch.name = "stopWatch";stopWatch.width = 200;stopWatch.height = 300;

Birth DeathLife

ConstructionConfiguration


- (Meistens) keine “direkte” Zuweisung von Eigenschaften (Invalidierung / Validierung)

- Komponente ist invalid (“dirty”)





DeathLifeBirth

- addElement() -> addChild()

- addChild() == Aufsplittung in mehrere Methoden * Referenzen, z.B. parent, document * Initialisierung v. Styles (inkl. Vererbung v. parent) * “echtes” addChild()

- “teuerste” Aktion im Component Life Cycle!

- Tip: Vor addChild() sind keine Styles referenzierbar


ConstructionConfigurationAttachment

this.addElement( stopWatch );





DeathLifeBirth

- FlexEvent.PREINITIALIZE


ConstructionConfigurationAttachment Initialization





DeathLifeBirth

- createChildren()



override protected function createChildren():void{ super.createChildren();

if ( labelDisplay == null ) { labelDisplay = new Label(); this.addElement( labelDisplay ); }}

- Hinweis: Immer Childs hier erstellen, falls diese sofort verfügbar sein sollen





DeathLifeBirth



- Beispiel: SkinnableComponent.as

override protected function createChildren():void{ super.createChildren(); if (moduleFactory) validateSkinChange(); // -> attachSkin() (Instanziierung v.Skin + Attachment) // -> findSkinParts() -> partAdded()}

- Beachte: Skin startet sofort seinen eigenen LifeCycle!

- createChildren()

- Skinnable Spark Components: Attachment von Skins





DeathLifeBirth

- createChildren() -> childrenCreated() -> Invalidierung: * invalidateProperties() * invalidateSize() * invalidateDisplayList()

- FlexEvent.INITIALIZED

- Gesamte “Birth” Phase in einem Frame- Anschliessende Validierung (“Life” Phase) einige Frames danach - Dadurch noch keine Modifikation + Rendering. Stattdessen: visible=false, width=0, height=0, usw.







DeathLifeBirth



InvalidationValidation Interaction

- Erste Validierung nach “Birth” Phase (in einem anderen Frame!)- “Echte” Werte werden gesetzt und gerendert

- Nach erster Validierung: FlexEvent.CREATION_COMPLETE- Abschluss jeder Validierung durch FlexEvent.UPDATE_COMPLETE

- Bei weiteren Modifikationen erneuter Durchlauf der “Life” Phase





LifeBirth



InvalidationValidation Interaction

Death

Detachment

this.removeChild( stopWatch );

oderthis.removeElement( stopWatch );

- removeChild() nur bei UIComponent, nicht bei SkinnableComponent

- removeElement() -> removeChild()

- removeChild() == Aufsplittung in mehrere Methoden * Referenzen entfernen (z.B. parent von children) * Abmeldung möglicher EventListener * “echtes” removeChild()






Fragen?








Links

Adobe Flex 4 Help: “About creating advanced Spark components“http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS460ee381960520ad-2811830c121e9107ecb-7fff.html

Adobe Labs: “Spark Skinning (including SkinnableComponent)”http://opensource.adobe.com/wiki/display/flexsdk/Spark+Skinning

Ely Greenfield: “Building a Flex Component“ (PDF / Flex 2)http://onflex.org/ACDS/BuildingAFlexComponent.pdf

James Polanco and Aaron Pedersen: “Understanding the Flex 3 Component and Framework Lifecycle” (PDF / Flex 3)http://developmentarc.com/site/wp-content/uploads/pdfs/understanding_the_flex_3_lifecycle_v1.0.pdf

Flex 4 SDK - Original Sourcehttp://opensource.adobe.com/svn/opensource/flex/sdk/

Adobe Labs: An Introduction to the Spark Component Architecturehttp://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Component+Architecture









http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS460ee381960520ad-2811830c121e9107ecb-7fff.html


http://opensource.adobe.com/wiki/display/flexsdk/Spark+Skinning

http://opensource.adobe.com/wiki/display/flexsdk/Spark+Skinning



http://developmentarc.com/site/wp-content/uploads/pdfs/understanding_the_flex_3_lifecycle_v1.0.pdf

http://developmentarc.com/site/wp-content/uploads/pdfs/understanding_the_flex_3_lifecycle_v1.0.pdf

http://opensource.adobe.com/svn/opensource/flex/sdk/

http://opensource.adobe.com/svn/opensource/flex/sdk/

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Component+Architecture

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Component+Architecture

Jens Krause

@sectorewww.websector.dewww.websector.de/blog

Danke!



http://www.twitter.com/sectore

http://www.twitter.com/sectore



http://www.websector.de/blog

http://www.websector.de/blog

Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen.

Technology

Transcript of Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen.