Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen.
1. Wait A Frame!
Das Flex 4 Komponenten Model und
seinen Life Cycle verstehen.
Jens Krause
www.websector.de
2. 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
3. Spark Component Model
“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
4. 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.2010
Jens Krause // www.websector.de
5. 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)
- Definition SkinStates (z.B. Button: “up”, “over”, ...) - Keine / kaum Logik
- Definition SkinParts (z.B. SkinnableContainer:
“contentGroup”)
Controller
- Gesamte Logik
- Verhalten der Komponente, z.B. Event-Handling
(“click” bei Button)
- States-Handling
“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
6. Beispiel: StopWatch
“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
7. Verantwortlichkeiten (MVC-Paradigma)
(Host)Component == StopWatch.as Skin == StopWatchAnalogSkin.mxml
extends spark.components.supportClasses.SkinnableComponent extends spark.components.supportClasses.Skin
Model View
- Timer-Daten: Sekunden, Minuten, Stunden - Design und Layout (Zeiger, Run/Start-Button,
- Definition SkinStates (“run”, “stop”) Reset-Button, Hintergrund)
- Definition SkinParts (Run/Start-Button, Reset-
Button)
Controller
- Timer-Handling: Start, Stop, Reset
- States-Handling
“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
8. Etwas Code bitte!
StopWatch.as
StopWatchDigitalSkin.as
StopWatchAnalogSkin.as
“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
9. Checkliste
(Host)Component Skin
extends spark.components.supportClasses.SkinnableComponent extends spark.components.supportClasses.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)
“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
10. Wie kommen (Host)Component und Skin zusammen?
“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
11. 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
12. Ü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.2010
Jens Krause // www.websector.de
13. 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.2010
Jens Krause // www.websector.de
14. 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.2010
Jens Krause // www.websector.de
15. 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!
“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
16. 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.2010
Jens Krause // www.websector.de
17. Beispiel Validation: Label-Eigenschaft
private var labelDisplay:Label;
protected override function commitProperties():void
{
super.commitProperties();
if( labelChanged )
{
labelDisplay.label = _label;
labelChanged = false;
}
}
“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
18. Wie war das nochmal mit der Verzögerung gemeint?
LifeCycleExample.mxml
“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
19. Component Life Cycle
Birth Life Death
Instanziierung + Aktualisierungen Entfernen
Hinzufügen
“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
20. 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
“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
21. Birth Life Death
Construction
Configuration
<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;
“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
22. Birth Life Death
Construction
Configuration
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
“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
23. Birth Life Death
Construction
Configuration
Attachment
Initialization
- FlexEvent.PREINITIALIZE
“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
24. Birth Life Death
Construction
Configuration
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
“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
25. Birth Life Death
Construction
Configuration
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!
“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
26. Birth Life Death
Construction
Configuration
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 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.2010
Jens Krause // www.websector.de
27. Birth Life Death
Construction Invalidation
Configuration 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 Modifikationen erneuter Durchlauf der “Life” Phase
“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
28. Birth Life Death
Construction Invalidation Detachment
Configuration 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()
“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
29. Fragen?
“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
30. 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/
“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