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.

9 Responses to “SuperPanelPlus: Resizable Flex Panel Component with Accessible Styling”


  1. 1 Ved

    Very Nice… seems fast! Congrats!

    Ved

  2. 2 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.

  3. 3 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?!

  4. 4 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 ;-)

  5. 5 Jamie Badman

    … after you’ve inserted ‘this.positionChildren();’ at the end of initPos!

  6. 6 Joel

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

  7. 7 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();
    }

  8. 8 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…

  9. 9 Joel

    styleColor should do it Adam.

Leave a Reply