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 Krause
www.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.2010
Jens 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)


Verantwortlichkeiten (MVC-Paradigma)

(Host)Component Skin
extends spark.components.supportClasses.SkinnableComponent extends spark.components.supportClasses.Skin

Model View
- Daten, z.B. scrollPosition (Scrollbar), label - Design und Layout (z.B. Button: Hintergrund,
(Button), dataProvider (List) Icon, Label)
- Deﬁnition SkinStates (z.B. Button: “up”, “over”, ...) - Keine / kaum Logik
- Deﬁnition SkinParts (z.B. SkinnableContainer:
“contentGroup”)

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


Beispiel: StopWatch


Verantwortlichkeiten (MVC-Paradigma)

(Host)Component == StopWatch.as Skin == StopWatchAnalogSkin.mxml

Model View
- Timer-Daten: Sekunden, Minuten, Stunden - Design und Layout (Zeiger, Run/Start-Button,
- Deﬁnition SkinStates (“run”, “stop”) Reset-Button, Hintergrund)
- Deﬁnition SkinParts (Run/Start-Button, Reset-
Button)

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


Etwas Code bitte!

StopWatch.as
StopWatchDigitalSkin.as
StopWatchAnalogSkin.as


Checkliste

(Host)Component Skin

[SkinPart]ʼs (optional) [HostComponent]

[SkinState]ʼs (optional) SkinStates (falls SkinStates in HC)

getCurrentSkinState() (falls SkinStates) SkinParts (falls SkinParts in HC)

partAdded() (falls SkinParts)

partRemoved() (falls SkinParts)


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 deﬁnierte Methoden (z.B. updateDisplayList() )

- Events (z.B. FlexEvent.CREATION_COMPLETE )

- Verzögerung von Modiﬁkationen (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 ﬁndet sich im Component Life Cycle wieder


Invalidation / Validation

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

- Steuerung über LayoutManager


Invalidation Validation

invalidateProperties() Eigenschaften
commitProperties()
invalidateSkinState() Skin-States
getCurrentSkinState()

Breite / Höhe
invalidateSize() measure()

Größe + Position von Childs,
Drawing usw.
invalidateDisplayList() updateDisplayList()

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

Instanziierung + Aktualisierungen Entfernen
Hinzufügen


Birth Life Death
Construction

<ex:StopWatch
- Bei der Instanziierung passiert
xmlns:ex="example.*"
/>
zunächst nicht viel

- “leerer” oder “schlanker” Konstruktor
oder
- Beachte: Deklaration über MXML
var stopWatch:StopWatch = new StopWatch(); startet sofort das Attachment


Birth Life Death
Construction
Conﬁguration

<ex:StopWatch
xmlns:ex="example.*"
id="stopWatch"
- (Meistens) keine “direkte” Zuweisung
width="200" height="200"
/>
von Eigenschaften (Invalidierung /
Validierung)

oder - Komponente ist invalid (“dirty”)

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


Birth Life Death
Construction
Conﬁguration
Attachment

- addElement() -> addChild()

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

- “teuerste” Aktion im Component Life Cycle!

- Tip: Vor addChild() sind keine Styles referenzierbar


Birth Life Death
Construction
Conﬁguration
Attachment
Initialization

- FlexEvent.PREINITIALIZE


Birth Life Death
Construction
Conﬁguration
Attachment
Initialization

- 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


Birth Life Death
Construction
Conﬁguration
Attachment
Initialization

- createChildren()

- Skinnable Spark Components: Attachment von Skins

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


Birth Life Death
Construction
Conﬁguration
Attachment
Initialization

- createChildren() -> childrenCreated() -> Invalidierung:

* invalidateProperties()

* invalidateSize()

* invalidateDisplayList()

- FlexEvent.INITIALIZED

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


Birth Life Death
Construction Invalidation
Conﬁguration Validation
Attachment Interaction
Initialization

- 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 Modiﬁkationen erneuter Durchlauf der “Life” Phase


Birth Life Death
Construction Invalidation Detachment
Conﬁguration Validation
Attachment Interaction
Initialization

- removeChild() nur bei UIComponent, nicht bei
SkinnableComponent
this.removeChild( stopWatch );
- removeElement() -> removeChild()
oder
- removeChild() == Aufsplittung in mehrere Methoden
this.removeElement( stopWatch );
* Referenzen entfernen (z.B. parent von children)
* Abmeldung möglicher EventListener
* “echtes” removeChild()


Fragen?


Links

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

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

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

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 Source
http://opensource.adobe.com/svn/opensource/flex/sdk/


Danke!
Jens Krause

@sectore
www.websector.de
www.websector.de/blog

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

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

Ähnlich wie Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen. (16)

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