Rage Against the Framework

David Ortinau
@davidortinau
http://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)

“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, inﬂuence what
people pay attention to in complicated situations,
and deﬁne how people approach and solve
problems.”

Susan Carey (1986)

via @iamFinch

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

Composition
over
Inheritance

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

Basic Implementation
[Bindable]
public var arrayCollection:ArrayCollection;

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

Tips
Replacing the entire ArrayCollection forces the entire list
to rebind, which can make everything ﬂicker 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.

References
Flex data binding pitfalls: common misuses and mistakes,
Elad Elrom
http://www.adobe.com/devnet/ﬂex/articles/
databinding_pitfalls.html

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

Separation
HostComponent
- behavior, logic

Skin or SparkSkin
- visual representation and visual behavior

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

Custom Components
- AccountPanel, PeopleFilterControl,
PersonIconToggleButton

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

Applying a Skin
<s:Button id="submitBtn" label="Submit"
skinClass="skins.OrangeButtonSkin"/>

<s:TitleWindow id="accountSettings"
title="Account Settings"
skinClass="skins.AccountSettingsTitleWindowSkin">

</s:TitleWindow>

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

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/

Deﬁne 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")]

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

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.

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/

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.effects
AddAction Move
Animate Move3D
AnimateColor RemoveAction
AnimateFilter Resize
AnimateTransform Rotate
AnimateTransform3D Rotate3D
AnimateTransitionShader Scale
CallAction Scale3D
Crossfade SetAction
Fade Wipe
WipeDirection

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

spark.layouts
BasicLayout
HorizontalLayout
TileLayout
VerticalLayout

Works With
Groups
Containers (includes Lists)
Skins

Custom Layout Tips
Extend 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 ﬁrst
element.setLayoutBoundsSize(NaN, NaN);
element.setLayoutBoundsPosition(x, y);
}
}
}

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/

Contact Me

@davidortinau
http://davidortinau.com
dave@davidortinau.com

Rage Against the Framework

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Rage Against the Framework (20)

Recently uploaded (20)

Rage Against the Framework

Editor's Notes