Flex 4 States: The Default State?

You can call the first state in your list of states the default as Adobe’s Kevin Hoyt does in his article about States, and as Stephen Gilson does in his Flex Doc article, but don’t expect it to always have your back. I found this out the usual way, I assumed and failed.

The Actionscript 3.0 reference docs for mx.states.State don’t clarify this issue, though it does make one reference to a “default view state”.

Let’s say you have a component with 3 states:

[actionscript]

[/actionscript]


And you have two ArrayCollections of Products, allProducts and topProducts, that will be bound to a DataGroup depending on the currentState of the view.

[actionscript]

dataProvider="{allProducts}"
dataProvider.top_products="{topProducts}"
... />

[/actionscript]


As you can see above I’ve declared the “main” dataProvider and a dataProvider for the state “top_products”. What data do you expect to get bound when I change currentState to “all_products” or even “welcome”? It will go back to allProducts. Great, that’s what I want.

BUT…

If the allProducts ArrayCollection has been changed in the meantime, the DataGroup will not rebind the allProducts collection, so I’ll be looking at old data.

The way to make sure the binding occurs as expected, and updates are reflected, is to get in the habit of being explicit.

[actionscript]

dataProvider="{allProducts}"
dataProvider.welcome="{allProducts}"
dataProvider.top_products="{topProducts}"
dataProvider.all_products="{allProducts}"
... />

[/actionscript]


Setting currentState in the component tag declaration is a good practice to make sure you start off in the right view. The consensus yesterday from conversations on Twitter is that the initial currentState will be the first state listed in the declaration. But this is not a default you can rely on once things start changing.

When it comes to setting data providers, you are best off being explicit if you’re going to assign different sources based on state.

Thanks to @jamespolanco, @pollensoft, @derrickgrigg, @benjamminSTL, and @flexmonkeypatch for your contributions to the discussion.


Categories: FlexPermalink

Spark States and Transitions: Working in Concert

I commonly have in and out transitions for almost every view, sub view, and even component in my project. I often write my projects in pure AS3, so each class gets a transitionIn() and transitionOut() method dispatching completion events so I can synchronize transitions across views. All my mojo happens with TweenMax and clients love it.

I’ve been doing a lot more Spark skinning in Flex projects, so I was curious how I could accomplish the same using States, Transitions, and the newer Spark animation stuff.

All the examples I’ve found are flat….the component manages it’s own states and directly transitions the children on its stage. Maybe I’m a dork, but my stuff isn’t so simple. When state changes in a component, it often needs to initiate in/out transitions on many children before just removing them from the stage. Dig?

Note: A component will receive addedToStage or removedFromStage events when its parent changes state and the component is included or excluded from that state.

Scenario

Main view has 2 states, state1 and state2. When the button is clicked, it will toggle between states and change its label. There’s a logo on the screen that is included only in state2, has its own 2 states (hidden and visible), and includes transitions between each.

Problem

If I let the main transition from state2 to state1 run by itself, it will remove the logo from the stage before logo has completed its own transition. I want the main transition to wait until the logo is done transitioning out before removing it from the stage.

Solution

It’s actually quite simple to do this. The key is using s:Pause in the main transition to listen for an event before proceeding…


[actionscript]

[/actionscript]


... and then when the logo is done transitioning out, use s:CallAction to dispatch the completion event thus unpausing and completing the other transition which will finish with s:RemoveAction.


[actionscript]

[/actionscript]


Download Source: SparkStateTransitions.fxp

Big thanks to @_leonardsouza_, @s9tpepper, @john__olson, @polygeek, @jesterxl, and @terencecarroll for helping me out.

On the flipside, what the heck is wrong with the Flex 4 reference documentation regarding states, transitions and effects? What a mess. Maybe it’s just me, but I find it pretty unhelpful and even downright confusing at times.

Examples and Resources

Leonard Souza: Flexerific Visual Effects (highly recommend his video from 360|Flex DC)

Chet Haase on Spark Effects. SVFUG recording: http://goo.gl/7EWhA

Chet Haase Flex 4 Fun book: http://goo.gl/ooC5W Discount code: FUG1

Jacob Surber on Flex Skins/FXG. SVFUG recording: http://goo.gl/nFdst

Custom Components in Flex 4 presentation by @mrinal: http://weblog.mrinalwadhwa.com/2009/12/01/custom-components-in-flex-4/

Dan Florio‘s posts on Flex 4 State transitions: http://polygeek.com/2304_flex_simple-flex-4-component-checkedunchecked and http://polygeek.com/2506_flex_using-wildcards-in-flex-4-state-transitions


Categories: FlexPermalink
blog comments powered by Disqus