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.
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)
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
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/
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")]
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/
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
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&#x2019;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&#x2019;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
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