Flex 2 - Using mx:State within Components
DIGG IT!
14
Comments
Published
Tuesday, April 18, 2006
at
8:45 AM
.
I have been working with the new State tags in MXML. These are really powerful tags designed to simplify changes within components or applications. State allows you to define a name for a series of changes to the UI or components. Change the 'currentState' property and many things happen.
I was curious about Sho's Sliding Drawer components and implemented some of the features using mx:State within an MXML component. The two designs are very different but the end result is similar. The handy thing is that exposing state in a component allows you to have external components react to inner component state. It provides a simple string based interface to managing components vs. setting properties externally or calling methods. In the example I have a set of buttons that can change the state or the panels. Additionally, the enabled value of the Button is bound to the State of the target control. When the state changes, buttons are enabled and disabled.
DrawerPanel using mx:State (View Source Included!)
I think the take away here is that State provides you a simple way to manage many things at once. Change 'currentState' and many things happens within the UI layer. The real power of using mx:State comes in the the encapsulation of change within a single property 'currentState'. Seeing how easy this was to put together, it took me 15 minutes, and how reusable it is within components, mx:State adds allot of value to Flex 2.
I am not sure which drawer components I like better? Sho's definitely have lots more jazz, mine are much simpler. The more choices the better. :)
Cheers,
Ted :)
very interesting alternative :-)
how about dragging (tearing down the panel) and restoring each panel back to original position when closed or rolled out ?
jeremy lu (http://twmug.com)
Actually, I was thinking about this. When the Panel was pulled away it should be a separate state and when dragging should be a state. Ideally:
open //exist already
close //exist already
drag //new
window //new
Let me think about the state names a bit...
It would also make sense to add code to put a Panel at the top of the displayList stack and to mask the panel using scrollRect so that the scroll bars do not show. This solution would allow panels to be added within other containers too.
Alwasy learning...
Cheers,
Ted :)
What is your reset state for?
I see that you have the onResize() event calling reset(). Can you explain this a little?
The reset state was added to reposition the Panel when either:
1. Player is resized.
2. Any value on the component is set including:
openX
openY
openWidth
openHeight
closeX
closeY
closeWidth
clodeHeight
The code there simply captures the currentState value, sets it to the 'reset' state, then sets it to the prior state.
I should have tested this but my assumption was that a 'state' is only executed if it differs from the current value.
Let me run a test and I will see if this assumption is correct.
Firing up Flex Builder...
Back in a second...
ted :)
ok!
If the value of currentState has not changed, the state is not executed. The 'reset' state was there so I could do this:
//store the currentState in a var
var a:String = this.currentState;
//set the value to 'reset'
this.currentState = 'reset'
//return the currentState to stored
this.currentState = a
In this particular case, as I was using state to position controls, all setting of the state value needed to be called.
Cheers,
Ted :)
Here is some creative critism or whatever you call that word when im not bashing your component but giving it tips and etc.. Anyways , it would be cool if you can implement "transition" within the component to give it more of a flow when opening
FYI, all FlexApps samples from
http://www.powersdk.com/flexapps/ are gone now...
+1
Ted, can you please provide a fresh link for the component
Fixed!
Thanks for the catch. The example is posted.
The demo does not appear to be working. I am using IE7 Flash player 9.
Ted,
Could you please repost the link. It doesnt seem to be working. Thanx.
-Kalyan.
just looking into controling states at the moment i got thes debug erroe whn tyring to view
VerifyError: Error #1014: Class flash.util::Timer could not be found.
at mx.managers::SystemManager/initialize()
at mx.managers::SystemManager/initHandler()
Hi,
Download link is broken. Is there an alternative location. Would love to take a look and compare it with the AS version.
Thx.
In fact, the entire powersdk/flexapps directory seems to be empty. I see others have pointed it out in comments but I can't tell if it got fixed and broke again.
Thx.