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.

Creative Commons License
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.

Related posts:

  1. Continuous scrolling image thumbnail component for Flex.
  2. ImageSwap (crossfade) Flex Component
  3. Pleat Menu – Flex Component (draft)
  4. Continuous scrolling image thumbnail and slideshow component for Flex.
  5. Updated: Continuous scrolling image thumbnail and slideshow component for Flex.

Filed under: components, flex, libraries
Comments
  • Ved
    Very Nice... seems fast! Congrats!

    Ved
  • 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.
  • 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?!
  • 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
    ... after you've inserted 'this.positionChildren();' at the end of initPos!
  • Joel
    I noticed that too and forgot to mention it, thanks for tracking it down and posting the solution Jamie.
  • 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();
    }
  • 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...
  • Joel
    styleColor should do it Adam.
  • 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/superPanelPlus...

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

    Mike
  • 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
blog comments powered by Disqus

Flash and the City banner

Kickass Books


Recent Posts

Around

Blogroll

every-sword
every-sword