SuperPanelPlus: Resizable Flex Panel Component with Accessible Styling

26May/0812

SuperPanelPlus: Resizable Flex Panel Component with Accessible Styling

The SuperPanel is an excellent component created by Wietse Veenstra. The styling is all hard-coded, and I need to be able to change this. It also hard-codes the event that is triggered on close, and I wanted to be able to control this. So I added the appropriate meta-tags and properties to enable these options. Here is the result, link to the source is at the bottom:

Source is here.

The SuperPanelPlus: Resizable Flex Panel Component with Accessible Styling by Joel Hooks, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 3.0 United States License.

Filed under: components, flex, libraries Leave a comment

Jonathan

HI Joel,

There is one issue if you set the modal to true if you use your panel as a popUp then you get an error in the class at line 218 regarding the change of a sprite to a UIComponent.

Thought you might want to know
Mike Slinn

I have discovered two problems with nested SuperPanelPlus windows. The same problems exist with SuperPanel.

- Inner SuperPanelPlus should be clipped when its bounds exceed the outer SuperPanelPlus. Instead, it can be placed anywhere, however when the outer panel is resized the inner panel snaps to (0,0)
- When more than one inner panel is created, only the last panel seems to be able to be moved or resized. When you watch the panel titles, you will see that they actually switch places and the bottom panel moves.

See for yourself (view source enabled):
http://www.mslinn.com/sites/flex/superPanelPlusTest/

I made a few small changes, mostly adding trace statements so problems could be seen more easily.

Mike
Joel

styleColor should do it Adam.
Adam

What attribute do I modify to change the color of the panel window border? I don't want it to be black. Sorry for the elementary question...
DomPazz

Thanks for this! How hard would it be to add a minimize button?

Also, I couldn't get what Jamie above suggests to work. I was able to add an event listener for FlexEvent.CREATION_COMPLETE and have the handler function call "positionChildren()". That seems to fix the issue.

Add this line to "addListeners":
this.addEventListener(FlexEvent.CREATION_COMPLETE, posKids);

Then add this to the class:
private function posKids(evt:Event):void{
this.positionChildren();
}
Joel

I noticed that too and forgot to mention it, thanks for tracking it down and posting the solution Jamie.
Jamie Badman

... after you've inserted 'this.positionChildren();' at the end of initPos!
Jamie Badman

Ah - figured out why it happens - I was using width and height percentages rather than explicit values - seems the percent approach causes this problem. Calling initPos seems to sort things out though ;-)
Jamie Badman

Looks great - though I found when I used it in my own app, the 'close', 'max' and 'resize' icons initially appeared off the top left of the panel. Wasn't until I moved the panel around and clicked on one of them that they suddenly moved into their correct positions. Any ideas?!
Garth Somerville

Looks great Joel and very useful. Just one small thing I see -- if you could add an x and y offset for the resize cursor in the call to cursorManager.setCursor() I think it would improve the feel of resizing the panel.
Ved

Very Nice... seems fast! Congrats!

Ved