Wait A Frame! Das Flex 4 Komponenten Model und
seinen Life Cycle verstehen.
Jens Krausewww.websector.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
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
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)
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
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
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
Beispiel: StopWatch
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
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)
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
Etwas Code bitte!
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
StopWatch.asStopWatchDigitalSkin.asStopWatchAnalogSkin.as
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
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
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
Wie kommen (Host)Component und Skin zusammen?
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
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
Ü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)
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
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
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
Invalidation / Validation
- “künstliche” Verzögerung zur Vermeidung eines “Dynamic Racetrack” bei komplexen Modifikationen
- Steuerung über LayoutManager
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
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!
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
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(); }}
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
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?
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
LifeCycleExample.mxml
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
Birth
Instanziierung +Hinzufügen
Life
Aktualisierungen
Death
Entfernen
Birth DeathLife
<ex:StopWatch xmlns:ex="example.*" />
oder
var stopWatch:StopWatch = new StopWatch();
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
- 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
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
- (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
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
ConstructionConfigurationAttachment
this.addElement( stopWatch );
DeathLifeBirth
- FlexEvent.PREINITIALIZE
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
ConstructionConfigurationAttachment Initialization
DeathLifeBirth
- createChildren()
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
ConstructionConfigurationAttachment Initialization
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
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
ConstructionConfigurationAttachment Initialization
- 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.
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
ConstructionConfigurationAttachment Initialization
DeathLifeBirth
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
ConstructionConfigurationAttachment Initialization
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
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
ConstructionConfigurationAttachment Initialization
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()
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
Fragen?
“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 06.04.2010Jens Krause // www.websector.de
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
Jens Krause
@sectorewww.websector.dewww.websector.de/blog
Danke!
Top Related