Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen.
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 2,942 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,942
On Slideshare
2,578
From Embeds
364
Number of Embeds
6

Actions

Shares
Downloads
18
Comments
1
Likes
1

Embeds 364

http://www.websector.de 339
http://localhost 17
http://www.linkedin.com 3
http://websector.de 3
http://static.slidesharecdn.com 1
http://feeds.feedburner.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 31. Danke! Jens Krause @sectore www.websector.de www.websector.de/blog