Stuff I am building:
Ted Patrick - Events & Community @ Adobe Systems
Note: This is the personal blog of Ted Patrick. The opinions and statements voiced here are my own.
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 :)
14 Responses to “Flex 2 - Using mx:State within Components”
Post a CommentWhere to find me:
Ted on Twitter - @AdobeTed
Ted on Adobe Groups
Ted on LinkedIn
Ted on Facebook
Ted at Adobe
Latest
- MacBook Pro running XP Pro and Flex Builder 2
- Flash 8 Hidden Feature - Timeline Toolbar Position...
- Magic with flash.util.Proxy
- Perfect KeyBoard Pro - The best utility for Flex d...
- RSLBuilder or Put your Flex apps on an RSL Diet
- Licensing, DRM, and the Flash Player
- St. Patrick's Day Socket/HTTP Server
- HTTP Client using Socket
- Command Line Intelligence
- Moving to DC, USA
Lists
Links
Jobs
Flex JobsArchives
- May 2003
- June 2003
- July 2003
- August 2003
- September 2003
- October 2003
- November 2003
- December 2003
- January 2004
- February 2004
- March 2004
- April 2004
- May 2004
- June 2004
- July 2004
- August 2004
- September 2004
- October 2004
- November 2004
- December 2004
- January 2005
- February 2005
- March 2005
- April 2005
- May 2005
- June 2005
- July 2005
- August 2005
- September 2005
- October 2005
- November 2005
- December 2005
- January 2006
- February 2006
- March 2006
- April 2006
- May 2006
- June 2006
- July 2006
- August 2006
- September 2006
- October 2006
- November 2006
- December 2006
- January 2007
- February 2007
- March 2007
- April 2007
- May 2007
- June 2007
- July 2007
- August 2007
- September 2007
- October 2007
- November 2007
- December 2007
- January 2008
- February 2008
- March 2008
- April 2008
- May 2008
- June 2008
- July 2008
- August 2008
- September 2008
- October 2008
- November 2008
- December 2008
- January 2009
- February 2009
- March 2009
- April 2009
- May 2009
- June 2009
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.