Rage Against the Framework


Published on

The Flex Framework provides a lot of benefit, and we implement design patterns to keep things "clean". Those things often make creating expressive interactions difficult, and frustrating. These are tips learned of the past year for common areas to overcome those things by gaining a proper understanding of how to leverage what the framework provides.

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Basically we are going to cover a lot of the things that frameworks, and specifically the Flex 4 Framework, provide for power and convenience. And tips to using them responsibly and effectively so they assist in creating awesome, fluid experiences instead of sabotaging them.\n\nYou will not walk away thinking I am a genius.\n
  • \n
  • This presentation is basically a brain dump of all the stuff I’ve learned doing ThisLife, going from pure AS, Flash dev with a little Flex 3 to full time, advanced Flex dev.\n
  • \n
  • Harvard, Cognitive Science and Science Education\n
  • this is how the technology actually works\n
  • how the user thinks the application will work\n
  • design model\n\n
  • \n
  • We have a couple of principles that we as coders harp on. They are very good to keep in mind. BUT, they often present roadblocks to creating the smoothest experiences.\n
  • To be DRY you have to organize your code in a way that all the components that need to do the same thing can access the same code. This can sometimes \n
  • Minimize direct knowledge of other components.\nMessaging (events, signals).\nProgramming to Interfaces\nProgramming by Contract\n
  • Rather than extending a class that contains behavior, we apply that behavior as a Class TO a Class.\n\nachieve polymorphic behavior\n
  • What is it, and why use it.\nVery helpful, useful, but can cause a lot of problems if not managed properly\n\nSo many of my problems stem from a lack of understanding basic principles. When you hit a roadblock, stop and confirm you comprehend. Don’t just bang on it for hours until it works.\n
  • \n
  • \n
  • \n
  • \n
  • Separation of component logic and view markup.\nHow to handle DataBinding without polluting skin markup\n\n[SkinPart]\n[SkinState]\npartAdded/partRemoved - make sure you do cleanup to prevent leaks\ninvalidateSkinState()\nInjects are NOT available in partAdded\nBindingUtils\n
  • http://coenraets.org/blog/2010/01/creating-a-custom-component-and-skins-in-flex-4/\n
  • http://coenraets.org/blog/2010/01/creating-a-custom-component-and-skins-in-flex-4/\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • How to use States and State Groups\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • How to handle show/hide for a component\nHow to perform transitions between States in a single component\nHow to perform transitions between States in a composite component\n
  • \n
  • \n
  • \n
  • \n
  • Modifying Layouts for List components\nRemember DataGroup inside List\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Rage Against the Framework

    1. 1. Rage Against the Framework
    2. 2. David Ortinau@davidortinauhttp://davidortinau.com15 yrs web, interactive, mobile.Flash, iPhone, Android, WP7BA English,Maryville University
    3. 3. Mental ModelsSusan Carey (1986), Don Norman (1988), Alan Cooper (1995) and IBM (1992)
    4. 4. “A mental model represents a person’s thought process for how something works (i.e., a person’s understanding of the surrounding world). Mental models are based on incomplete facts, past experiences, and even intuitive perceptions. They help shape actions and behavior, influence what people pay attention to in complicated situations, and define how people approach and solve problems.”Susan Carey (1986)
    5. 5. via @iamFinch“About Face 3: The Essentials of Interaction Design “, Alan Cooper
    6. 6. Pragmatic Principles
    7. 7. DRY
    8. 8. Loose Coupling
    9. 9. Composition over Inheritance
    10. 10. DataBinding
    11. 11. Data binding is the process of tying the data in one object to another object. It provides a convenient way to pass data between the different layers of the application. Data binding requires a source property, a destination property, and a triggering event that indicates when to copy the data from the source to the destination. An object dispatches the triggering event when the source property changes.An Adobian
    12. 12. Basic Implementation [Bindable] public var arrayCollection:ArrayCollection; <s:List dataProvider=”{arrayCollection}” ... />
    13. 13. Tips Replacing the entire ArrayCollection forces the entire list to rebind, which can make everything flicker and not cool. Use disableAutoUpdate() and enableAutoUpdate() to control when your components are updated, such as during an edit session. Don’t use it if you don’t need it.
    14. 14. References Flex data binding pitfalls: common misuses and mistakes, Elad Elrom http://www.adobe.com/devnet/flex/articles/ databinding_pitfalls.html About Data Binding in Flex 4.5 http://help.adobe.com/en_US/flex/using/ WS2db454920e96a9e51e63e3d11c0bf64c3d-7fff.html
    15. 15. Spark Skinning
    16. 16. Separation HostComponent - behavior, logic Skin or SparkSkin - visual representation and visual behavior
    17. 17. HostComponent Common Components - Button, ToggleButton, Label, TextInput, List, DataGroup, TitleWindow, etc. Custom Components - AccountPanel, PeopleFilterControl, PersonIconToggleButton
    18. 18. HostComponent override protected function partAdded(partName:String, instance:Object):void { super.partAdded(partName, instance); if (instance == nameInput) { ... add listeners, setup bindings } } override protected function partRemoved(partName:String, instance:Object):void { super.partRemoved(partName, instance); if (instance == nameInput) { ... remove listeners, release watchers } }
    19. 19. Applying a Skin <s:Button id="submitBtn" label="Submit" skinClass="skins.OrangeButtonSkin"/> <s:TitleWindow id="accountSettings" title="Account Settings" skinClass="skins.AccountSettingsTitleWindowSkin"> <!-- content goes here --> </s:TitleWindow>
    20. 20. Set Component Default Skin this.setStyle("skinClass", CustomControlSkin);
    21. 21. References Introducing skinning in Flex 4, Ryan Frishberg http://www.adobe.com/devnet/flex/articles/ flex4_skinning.html Creating a Custom Component and Skins in Flex 4, Christophe Coenraets http://coenraets.org/blog/2010/01/creating-a-custom- component-and-skins-in-flex-4/
    22. 22. States
    23. 23. Define States In the Skin: <s:states> <s:State name="disabled"/> <s:State name="down"/> <s:State name="over"/> <s:State name="up"/> </s:states> In the HostComponent: [SkinState("disabled")] [SkinState("down")] [SkinState("over")] [SkinState("up")]
    24. 24. Use States <s:Rect top="0" bottom="0" left="0" right="0" radiusX="6" radiusY="6" includeIn="up,over"> <s:fill> <s:LinearGradient angle="90" angle.over= "-90 " > <s:GradientEntry color="0xfea25e" /> <s:GradientEntry color="0xe94d0f"/> </s:LinearGradient> </s:fill> <s:filters> <s:GlowFilter color="0xee6200" blurX="2" blurY="2" strength="4" alpha="1" excludeFrom="up" /> <s:DropShadowFilter color="0xdedede" angle="90" distance="1" blurX="2" blurY="2" includeIn="up" /> </s:filters> </s:Rect>
    25. 25. Control State from Component override protected function getCurrentSkinState():String { if(_mode != “”) return _mode; return STATE_UP; } private function myCustomCode():void { ....something happened and I want to change state _mode = STATE_DOWN; invalidateSkinState(); }
    26. 26. Tips There is no default state. Be explicit. Order matters. Set the currentState property. Using States with Bindings, a change in state will NOT rebind your data source.
    27. 27. References James Polanco and Aaron Pederson Flex 4 LifeCycle http://updates.developmentarc.com/flex_4_lifecycle.pdf Jonathan Campos, Flex 4 Spark Skinning http://www.unitedmindset.com/jonbcampos/2009/07/02/flex-4-spark- skinning/ Flex 4 States: The Default State, David Ortinau http://www.davidortinau.com/blog/flex_4_states_the_default_state/
    28. 28. Transitions
    29. 29. View Example <s:states> <s:State name="state1" /> <s:State name="state2" /> </s:states> <s:transitions> <s:Transition fromState="state2" toState="*"> <s:Sequence> <s:SetAction target="{logo}" property="currentState" value="hidden"/> <s:Pause target="{logo}" eventName="{Logo.TRANSITIONED_OUT}" /> <s:RemoveAction target="{logo}" /> </s:Sequence> </s:Transition> </s:transitions>
    30. 30. Sub Component Example <s:Transition fromState="visible" toState="*" autoReverse="true"> <s:Sequence> <s:Parallel id="outTransition" duration="500"> <s:Fade target="{simplyProfoundLogo}" alphaFrom="1" alphaTo="0" /> <s:Move target="{simplyProfoundLogo}" xTo="600" /> </s:Parallel> <s:CallAction target="{this}" functionName="dispatchEvent" args="{[new Event(TRANSITIONED_OUT)]}" /> </s:Sequence> </s:Transition>
    31. 31. spark.effects AddAction Move Animate Move3D AnimateColor RemoveAction AnimateFilter Resize AnimateTransform Rotate AnimateTransform3D Rotate3D AnimateTransitionShader Scale CallAction Scale3D Crossfade SetAction Fade Wipe WipeDirection
    32. 32. References Spark States and Transitions: Working in Concert, David Ortinau http://www.davidortinau.com/blog/ spark_states_and_transitions_working_in_concert/ Leonard Souza, Flexerific Effects http://www.leonardsouza.com/flex/flexerific/ spark.effects http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/ spark/effects/package-detail.html mx.effects http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/ effects/package-detail.html
    33. 33. Layouts
    34. 34. spark.layouts BasicLayout HorizontalLayout TileLayout VerticalLayout
    35. 35. Works With Groups Containers (includes Lists) Skins
    36. 36. Custom Layout Tips Extend LayoutBase Overrides - measure() - updateDisplayList() Reference elements as ILayoutElement updateDisplayList is called often. Reset before applying changes. - element.setLayoutBoundsSize(NaN, NaN);
    37. 37. Minimum public class CustomLayout extends LayoutBase {      override public function updateDisplayList(width:Number, height:Number):void      {           for (var i:int = 0; i<target.numelements; i++)      {                var element:ILayoutElement = target.getElementAt(i);                … calc custom layout stuff                // size first                element.setLayoutBoundsSize(NaN, NaN);                 element.setLayoutBoundsPosition(x, y);      }      } }
    38. 38. References Enrique Duvos & Evtim Georgiev http://tv.adobe.com/watch/max-2010-develop/having-fun-with-layouts-in-flex-4/ http://www.rialvalue.com/blog/2010/11/04/slides-for-having-fun-with-layouts-in-flex-4/ Evtim Georgiev - Flex SDK Engineer http://evtimmy.com/2010/04/two-examples-of-layout-animations/ http://tv.adobe.com/watch/flash-camp-boston/creating-custom-layouts-in-flex-4- Mihai Pricope http://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/ Tink http://www.tink.ws/blog/carousellayout/ https://github.com/tinklondon/tink Leonard Souza http://www.leonardsouza.com/flex/spark-layout-framework/
    39. 39. Contact Me@davidortinauhttp://davidortinau.comdave@davidortinau.com