Post on 29-Jan-2018
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