Flex Panel Management JXL Style

Panels are the main container you utilize in Flex to help layout your application. Combined with the control bar on the bottom, they make a nice little module for interactive content in Flex applications. They are challenging to skin, but not so hard to extend (inheritance in Flex is too easy).

For my ever-growing Multiuser D&D application, I’ve already run out of screen real-estate. I’m constantly adding new panels to house multi-user content, and managing all of the Panels via simple drag and drop isn’t very useable. So, I got my wife, the Information Architect and Usability expert involved. In the 40 seconds she could spare, she gave me a lot of ideas, and what you’ll see is the implementations of them.

You can expand and collapse Panels, much like you can on a Mac with windows. Collapsing helps by significantly reducing the amount of screen real-estate the Panel takes up and still allows it to retain state. This is important because since this application is sharing real-time data via Flashcom.

Additionally, you can minimize & maximize the Panels themselves. This reduces their size further, puts the at the bottom of the application out of your way, and if you maximize them they’ll return to their original position, automatically re-adjusting those Panels left minimized at the bottom.

I need to add the ability for the minimized Panels to re-adjust their position when you resize the browser; trivial to do, just haven’t had the free time yet.

This 5th iteration of this app will be available with full source and documentation within Flex by Example in the comming weeks. I’ll post the customized Panel code here later in the week after I get it cleaned up and implement any new ideas I get, either from you all or from me.

See Flex Panel Management JXL Style in action.

What do you think?

2 Replies to “Flex Panel Management JXL Style”

Comments are closed.