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


             Jens Krause
           www.w...
Inhalte

1 Spark Component Model

2 Flex 4 Component Life Cycle




     “Wait A Frame! Das Flex 4 Komponenten Model und s...
Spark Component Model




“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Grou...
Allgemeines

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

(Host)Component                                                          Skin
extend...
Beispiel: StopWatch




    “Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Gr...
Verantwortlichkeiten (MVC-Paradigma)

(Host)Component == StopWatch.as                                          Skin == Sto...
Etwas Code bitte!

                                                StopWatch.as
                                          ...
Checkliste


(Host)Component                                                          Skin
extends spark.components.suppor...
Wie kommen (Host)Component und Skin zusammen?




   “Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle ver...
Flex 4 Component Life Cycle




“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex Use...
Überblick

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

- Festgelegter Ablauf: Entstehung (Birth), Ak...
Hintergrund

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

- “Flash Player...
Invalidation / Validation

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


invalidateProperties()                 ...
Beispiel Invalidation: Label-Eigenschaft


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



pu...
Beispiel Validation: Label-Eigenschaft


private var labelDisplay:Label;

protected override function commitProperties():v...
Wie war das nochmal mit der Verzögerung gemeint?

                                               LifeCycleExample.mxml



...
Component Life Cycle


   Birth                                                            Life                           ...
Birth                                                            Life                                                     ...
Birth                                                            Life                                                     ...
Birth                                                            Life                                                     ...
Birth                                                            Life                                                     ...
Birth                                                            Life                                                     ...
Birth                                                            Life                                                     ...
Birth                                                            Life                                                     ...
Birth                                                            Life                                                     ...
Birth                                                            Life                                                     ...
Fragen?




“Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen! ” // Flex User Group Hamburg // 0...
Links

Adobe Labs: An Introduction to the Spark Component Architecture
http://opensource.adobe.com/wiki/display/flexsdk/Gum...
Danke!
Jens Krause

@sectore
www.websector.de
www.websector.de/blog
Upcoming SlideShare
Loading in...5
×

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

2,348

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • Das 'Spark Component Model' Beispiel live:
    http://www.websector.de/blog/2010/04/06/slides-und-source-vom-flexughh-meeting-wait-a-frame-das-flex-4-komponenten-model-und-seinen-life-cycle-verstehen/

    Der Code dazu im flexughh Projekt bei Google Code:
    http://code.google.com/p/flexughh/source/browse/#svn/trunk/meetings/spark_060410/src

    Viel Spass!

    -Jens
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,348
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen. Jens Krause www.websector.de
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  31. 31. Danke! Jens Krause @sectore www.websector.de www.websector.de/blog
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×