Factum Vicesimus Quartus

Exploring web x.0, innovation and RIA techniques

Add to Netvibes    Add to Google




Flex SuperPanel

March 22nd, 2007


<– there is an update of the SuperPanel which can be found overhere –>

I really like to work with the Panel component in my Flex projects, but it lacks some functionality I use quite often so I extended it which resulted in the SuperPanel component. The SuperPanel can be dragged around on the stage, it can be closed, collapsed and resized. I have some additional updates planned but I wouldn’t want to keep this from you so here is the first version. I hope it will be of some good use to you.

SuperPanel

View the demo here (right click to view source).
View the source here.

Future updates:
- Different header color for focused panel.
- Click to content area to focus panel.
- Doubleclick on header to collapse the panel.
- Minimize to the bottom of the stage.

If you find any bugs or have any other suggestions, please let me know.

Popularity: 20% [?]


21 Responses to "Flex SuperPanel"
  1. # 1   Niels Bruin
    March 22nd, 2007 at 23:03

    Very nice Wietse!

  2. # 2   Maikel Sibbald
    March 22nd, 2007 at 23:45

    Great work!!! You got skills my little grasshopper. I noticed that the drag is still functional when you click the minimize/maximize button.

  3. # 3   Mrinal Wadhwa
    March 23rd, 2007 at 05:37

    Very Cool!!

  4. # 4   Ruben Swieringa
    March 23rd, 2007 at 07:14

    Good job on the SuperPanel man, thumbs up! I’m already looking forward to having to use it somewhere ;)
    You might wanna think about getting some asdoc-comments in there though..
    Cheers man.

  5. # 5   Wietse Veenstra
    March 23rd, 2007 at 07:52

    Thnx for the good comments all:) I will certainly keep updating this component so thnx for the advice.

  6. # 6   Jaap Kooiker
    March 23rd, 2007 at 08:29

    This is really great work man, your Flex skills are getting pretty good !! Keep it up!

  7. # 7   Eric Cancil
    March 29th, 2007 at 15:40

    If youre looking for a way to minimize to the bottom of the stage… see if this method looks good to you
    http://blog.3r1c.net/?p=50
    if it does I’d be glad to contribute to this component!

  8. # 8   equintano
    March 29th, 2007 at 16:01

    nice panel,
    thanks for your knowledge!

  9. # 9   Wietse Veenstra
    March 29th, 2007 at 20:59

    Thanks Eric for the tip! I’m currently working on more functionalities and further improvements and I will certainly take your tip in consideration. I will let you know the outcome.

    Equintano, thanks for your comment. I checked out your blog but I don’t speak spanish so it’s a little hard to know what it exactly is about.

  10. # 10   David K Roberts
    March 29th, 2007 at 23:36

    Wow! Very similar ideas…. I really like your subtle animation effects (mine doesn’t have that… yet)… I was modding the one I found on the Adobe Blog and then after I got done doing some mods…. I saw your comments and it led me here…. Now I am back to modding after seeing the extra stuff you put in it. :) You should post this to the Flex Box. That is usually where I get my components…. this would’a saved me some time just using and modding yours… Keep up the good the good work!

  11. # 11   Parinda
    May 23rd, 2007 at 21:25

    Very cool component. Keep up good work! I modified this one to extend TitleWindow and removed the drag-drop listeners since TitleWindow already comes with such functionality. But there were only few modifications I had to do.

  12. # 12   milo
    June 28th, 2007 at 15:09

    I saw a lot of idears.. this is creating potential. I was wondering if you could add the following items to your wishlist:
    - maximize to full screen
    - Horizontal and Vertical Tiling of the windows
    - Maybe Cascade:?

    Is a widget like on http://www.netvibes.com an option to create?

  13. # 13   Wietse Veenstra
    June 29th, 2007 at 11:03

    milo,

    thanks for your recommendations. I will certainly put them on my todo list for this component. I will have some time to work on the component again soon so keep checking for updates. thanks!

  14. # 14   le
    July 26th, 2007 at 22:48

    in the style sheet, mininimizeButton.png doesn’t exist so create one or rename it to drecreaseButton.png and it should work out of the box.

  15. # 15   sateesh
    October 8th, 2007 at 17:22

    Hi,

    When i add a ComboBox to the Panel then i won’t be able to view the List of Items in it as the Panel is consuming the MouseClick Event..

    Do i need to check for the Event Target in the panelClickHandler() ..

    But i am not sure what other problems it might pose..

    Thanks
    Sateesh

  16. # 16   renzki
    October 12th, 2007 at 23:27

    Sateesh,

    The combobox and datefields will work only if you longpress the buttons. This needs to be addressed.

  17. # 17   Fortes
    October 23rd, 2007 at 03:37

    This is a great component!!

    so thank you first of all…

    i have a little problem (bug?)!!

    when i aply a resize effect to the superPanel the bottons and resize corner dont move!!

    is there a way to make this work ??

    tnx

  18. # 18   DaRk6
    November 29th, 2007 at 22:10

    Great work! Just the exemple I was looking for!
    Congratulations.

  19. # 19   MikeH
    March 12th, 2008 at 19:35

    Great component – thank you.

    Is there a way to make the panel modal – via a property, perhaps? I did not see one, but that doesn’t mean there isn’t one.

  20. # 20   deep
    April 24th, 2008 at 06:06

    great work….i have a question…but first let me tell you that i am new to flex….i have a panel…and my mxml file name is media.mxml…so can i apply the properties of your superpanel by only including your action script file SuperPanel.as…without modifying the mxml file….if so how??plz give me some idea…thanks

  21. # 21   Teester
    July 30th, 2008 at 22:55

    So I noticed this component won’t work anywhere unless its in the main application. You have “Application.application.parent” hardcoded through your SuperPanel class. What if someone wanted to use this sub-component?

Leave a Reply