Rage Against the Framework

David Ortinau@davidortinauhttp://davidortinau.com

15 yrs web, interactive, mobile.

Flash, iPhone, Android, WP7

BA English, Maryville University

Mental Models

Susan Carey (1986), Don Norman (1988), Alan Cooper (1995) and IBM (1992)

Susan Carey (1986)

“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.”

via @iamFinch

“About Face 3: The Essentials of Interaction Design “, Alan Cooper

Pragmatic Principles

DRY

Loose Coupling

Compositionover

Inheritance

DataBinding

An Adobian

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.

Basic Implementation[Bindable]public var arrayCollection:ArrayCollection;

<s:List dataProvider=”{arrayCollection}” ... />

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

ReferencesFlex data binding pitfalls: common misuses and mistakes, Elad Elromhttp://www.adobe.com/devnet/flex/articles/databinding_pitfalls.html

About Data Binding in Flex 4.5http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64c3d-7fff.html

Spark Skinning

SeparationHostComponent- behavior, logic

Skin or SparkSkin- visual representation and visual behavior

HostComponentCommon Components- Button, ToggleButton, Label, TextInput, List, DataGroup, TitleWindow, etc.

Custom Components- AccountPanel, PeopleFilterControl, PersonIconToggleButton

HostComponentoverride 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 }}

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>

Set Component Default Skin

this.setStyle("skinClass", CustomControlSkin);

ReferencesIntroducing skinning in Flex 4, Ryan Frishberghttp://www.adobe.com/devnet/flex/articles/flex4_skinning.html

Creating a Custom Component and Skins in Flex 4, Christophe Coenraetshttp://coenraets.org/blog/2010/01/creating-a-custom-component-and-skins-in-flex-4/

States

Define StatesIn 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")]

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>

Control State from Componentoverride 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();}

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

ReferencesJames Polanco and Aaron Pederson Flex 4 LifeCyclehttp://updates.developmentarc.com/flex_4_lifecycle.pdf

Jonathan Campos, Flex 4 Spark Skinninghttp://www.unitedmindset.com/jonbcampos/2009/07/02/flex-4-spark-skinning/

Flex 4 States: The Default State, David Ortinauhttp://www.davidortinau.com/blog/flex_4_states_the_default_state/

Transitions

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>

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>

spark.effectsAddActionAnimateAnimateColorAnimateFilterAnimateTransformAnimateTransform3DAnimateTransitionShaderCallActionCrossfadeFade

MoveMove3DRemoveActionResizeRotateRotate3DScaleScale3DSetActionWipeWipeDirection

ReferencesSpark States and Transitions: Working in Concert, David Ortinauhttp://www.davidortinau.com/blog/

spark_states_and_transitions_working_in_concert/

Leonard Souza, Flexerific Effectshttp://www.leonardsouza.com/flex/flexerific/

spark.effectshttp://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/

spark/effects/package-detail.html

mx.effectshttp://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/

effects/package-detail.html

Layouts

spark.layoutsBasicLayoutHorizontalLayoutTileLayoutVerticalLayout

Works WithGroupsContainers (includes Lists)Skins

Custom Layout TipsExtend LayoutBase

Overrides- measure()- updateDisplayList()

Reference elements as ILayoutElement

updateDisplayList is called often. Reset before applying changes.- element.setLayoutBoundsSize(NaN, NaN);

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

ReferencesEnrique Duvos & Evtim Georgievhttp://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 Engineerhttp://evtimmy.com/2010/04/two-examples-of-layout-animations/http://tv.adobe.com/watch/flash-camp-boston/creating-custom-layouts-in-flex-4-

Mihai Pricopehttp://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/

Tinkhttp://www.tink.ws/blog/carousellayout/https://github.com/tinklondon/tink

Leonard Souzahttp://www.leonardsouza.com/flex/spark-layout-framework/

Contact Me

@davidortinauhttp://davidortinau.com dave@davidortinau.com