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.

1. Rage Against the Framework

2. David Ortinau
@davidortinau
http://davidortinau.com
15 yrs web, interactive, mobile.
Flash, iPhone, Android, WP7
BA English,
Maryville University

4. Mental Models
Susan Carey (1986), Don Norman (1988), Alan Cooper (1995) and IBM (1992)

5. “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)

9. via @iamFinch
“About Face 3: The Essentials of Interaction Design “, Alan Cooper

10. Pragmatic Principles

11. DRY

12. Loose Coupling

13. Composition
over
Inheritance

14. DataBinding

15. 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

16. Basic Implementation
[Bindable]
public var arrayCollection:ArrayCollection;
<s:List dataProvider=”{arrayCollection}” ... />

17. 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.

18. 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

19. Spark Skinning

20. Separation
HostComponent
- behavior, logic
Skin or SparkSkin
- visual representation and visual behavior

21. HostComponent
Common Components
- Button, ToggleButton, Label, TextInput, List, DataGroup,
TitleWindow, etc.
Custom Components
- AccountPanel, PeopleFilterControl,
PersonIconToggleButton

22. 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 }
}

23. 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>

25. Set Component Default Skin
this.setStyle("skinClass", CustomControlSkin);

26. 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/

27. States

28. 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")]

29. 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>

30. 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();
}

31. 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.

32. 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/

33. Transitions

34. 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>

35. 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>

36. spark.effects
AddAction Move
Animate Move3D
AnimateColor RemoveAction
AnimateFilter Resize
AnimateTransform Rotate
AnimateTransform3D Rotate3D
AnimateTransitionShader Scale
CallAction Scale3D
Crossfade SetAction
Fade Wipe
WipeDirection

37. 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

38. Layouts

39. spark.layouts
BasicLayout
HorizontalLayout
TileLayout
VerticalLayout

40. Works With
Groups
Containers (includes Lists)
Skins

41. Custom Layout Tips
Extend LayoutBase
Overrides
- measure()
- updateDisplayList()
Reference elements as ILayoutElement
updateDisplayList is called often. Reset before applying changes.
- element.setLayoutBoundsSize(NaN, NaN);

42. 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);
}
}
}

43. 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/

44. Contact Me
@davidortinau
http://davidortinau.com
dave@davidortinau.com