Factum Vicesimus Quartus

Exploring web x.0, innovation and RIA techniques

Add to Google

Flex SuperPanel v1.5

April 4th, 2007

I updated my SuperPanel extension to version 1.5. It now includes focusing of panels, the focused panel has a different color, double clicking on the header to collapse/open the panel, and maximizing the panel to the full screen size. If a panel is being dragged it is 50% transparent now for better visibility. There’s also a button on the bottom of the stage to add new panels to the test-stage to further explore the functionality. I didn’t get the minimize funcionality working yet but it’s certainly planned for a future update.

SuperPanel v1.5

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

Future updates include:
– Minimize to the bottom of the stage
– The option to change the title of the panel
– The option for panel not to overlap eachother

Ofcourse suggestions are always welcome and let me know if you find any bugs.

109 Responses to "Flex SuperPanel v1.5"
  1. # 1   Ruben
    April 5th, 2007 at 08:03

    Hey man, good job on the SuperPanel, feeling really smooth..
    I found a bug though, when you collapse it (double-click on the titlebar) and maximize it, then go back to the original size, you won’t be able to expand the panel again. Just so you know.
    Doesn’t change the fact that SuperPanel rocks though 😉

  2. # 2   Wietse Veenstra
    April 5th, 2007 at 17:35

    Hey Ruben,

    Thanks for pointing out the bug! I fixed it by only allowing maximize when a panel isn’t collapsed. I thought that would make sense:)

  3. # 3   luar
    April 9th, 2007 at 07:58

    if the panel is maximumized, then the user resize the browser window, maximumized panel cannot resize to fit the new stageWidth, stageHeight

  4. # 4   Roman
    April 10th, 2007 at 12:12

    Do you allow to download it somewhere? I can’t find a link or see the AS file in the source view…


  5. # 5   Wietse Veenstra
    April 10th, 2007 at 18:48

    Hey luar,
    I’m not sure if the thing you are pointing out here can be fixed. When you maximize the panel, resize your browser, minimize the panel and maximize it again it should be fit to the new stageWidth and stageHeight.

    Hey Roman,
    The source should be there. I tested the link and i saw the AS file as it should. So perhaps you should try it again. I don’t know what went wrong. Otherwise you should try downloading the package as a zip. Just click the link on the left bottom side.

  6. # 6   Anthony
    April 14th, 2007 at 06:35

    Hey there,

    I’m still learning to use Flex, so this code is very helpful. Maybe I set it up wrong, but I got an error in the CSS file. It was referencing minimizeButton.png, but it doesn’t exist. I just deleted that entry in the CSS to get it to work.

    But otherwise, it’s awesome.

  7. # 7   vijay
    May 2nd, 2007 at 10:38

    Just wanted to let you know that if I use this panel inside any other display container(example:VBox), I still can move the panel outside its boundary and also the resize behaves weirdly when inside a displayContainer!!!

  8. # 8   Wietse Veenstra
    May 4th, 2007 at 13:36

    Hey Anthony,

    It should be there. When I check the source I get to see it. I also tried it on another machine so I don’t really know what went wrong. Perhaps you should also try on another machine.

    Hey vijay,

    Thank you for pointing that one out! I will look in to it and try to fix it ASAP. I’m working on the SuperPanel again so an update should be online here very soon.

  9. # 9   Balaji Bal
    May 6th, 2007 at 22:02

    Great job! Guess I have tried all the resizable, dragable, super-duper panels out there. But this is definitely the coolest.

    On trying to compile source, missing the decreaseButton.png .

  10. # 10   Denix
    May 15th, 2007 at 14:10

    Hi Wietse,
    your SuperPanel is really “super”!
    anyway, there is a small problem. If you want to define the size of your SuperPanel in the runtime, the icons will appear outside the SuperPanel!


    PS: give us the decreaseButton please 😉

  11. # 11   Wietse Veenstra
    May 16th, 2007 at 14:32

    I really have got no clue on why the decreaseButton isn’t showing with you guys. Every time I view the source (also on different machines and internet connections) I see it perfectly.

    Anyway I’m working on some small updates and will upload a new version very soon! Thnx for the comments:)

  12. # 12   Ivan
    May 25th, 2007 at 03:57

    SuperPanel looks good. Only one thought – I would change word ‘screen’ for ‘parent’ in SuperPanel.as, so the panel resizing and drag-n-drop would work within correct borders when the panel used in a component.

  13. # 13   Dave
    June 1st, 2007 at 14:35

    Awesome, works great, I do have a suggestion, and I would like to code it, but Im still a noob Flex developer.

    I want to add a close warning, how would one trigger and check for a close before the window closes.

    I have many SuperPanels, that load up Modules, let’s say the Modules are edit screens, and before someone clicks Close, it would be nice to check something and present a custom per panel message to confirm they want to close…

    How would something like that work?

    Once again, excellent work.

  14. # 14   Wietse Veenstra
    June 6th, 2007 at 21:06

    Thank you for the advice. I will make this change soon and update the version online.


    Thats indeed a nice feature. I will implement this asap!

    Thnx for the comments guys!

  15. # 15   Aubweb
    June 12th, 2007 at 16:02

    This is just what I was looking for…
    Thank you for your job.

    I’ve put the BouncingFisheye menu from Doug Mc Cune in my current application and I try to implement your SuperPanel on it.
    For each superPanel opened a new icon should appear in the menu as a real mac os x dock.
    You know what I mean ?


  16. # 16   Wietse Veenstra
    June 12th, 2007 at 17:43


    Thats a great example of how to use it indeed! Could you post a link overhere as soon as you have a working example ready? I would love to see how it turned out!:) Thank you!

  17. # 17   Evgenios Skitsanos
    June 20th, 2007 at 20:59

    Hi Weitse,

    Really great work, indeed. But still have a little problem, – focusing. When panels are appeared from the same “app lication instance”, – everything is fine, focusing works, so selected panel goes on top as you made it via:

    this.parent.setChildIndex(this, this.parent.numChildren – 1);

    but, you u will put these panels to be loaded in flex application as modules via ModuleLoader, then focusing getting screwed. So my suggestion is to do little check for other panels within whole application and set child index based on this criteria.

    I will try to make a quick fix a bit later when i will have free moment, so i can mail it to in case if i will fix it earlier than u fix 😉

    Evi Skitsanos

  18. # 18   Virgil Cristea
    June 21st, 2007 at 16:39


    I can say that it is a superb piece of code. It does almost all the stuff I want. I have some questions: can I add am icon to the panel?

  19. # 19   Peter Feiner
    June 21st, 2007 at 22:00


    I’d like to use your control in an application. Under what terms is it licensed? If you are unsure, please consider picking one from http://www.opensource.org/licenses/category.

    Please email me with any concerns.

    Thank you,
    Peter Feiner

  20. # 20   Shaun
    June 29th, 2007 at 21:03


    I have the same question Peter had. Is this code free for any purpose as long as you get a mention or are there restrictions?

    Many thanks,

  21. # 21   Wietse Veenstra
    July 8th, 2007 at 08:10

    Lately I have been receiving several emails with licensing questions about the SuperPanel. To clear this up: there is no license, you can use the SuperPanel in any way you like. Just respect my little code comment on top of the code and I would like a link to the finished project in which it has been used and thats all!

    And BTW: the update is close but I have to find the time to work on it. I really hope to put the next version online this month.

  22. # 22   burzaone
    July 19th, 2007 at 07:49

    If someone have problem with drag for all scene, just add new param with display object to constructor and change one line in titleBarMoveHandler from:
    this.startDrag(false, new Rectangle(0, 0, scene.width – this.width, scene.height – this.height));
    this.startDrag(false, new Rectangle(0, 0, container.width – this.width, container.height – this.height));
    where container is your DisplayObject:
    private var container:DisplayObject;

    public function SuperPanel( cont:DisplayObject ) {
    container = cont;

  23. # 23   rough68fish
    July 20th, 2007 at 18:42

    if you move the call to positionChildren to the updateDisplayList function it works for variable size windows (50% x 50%) etc.

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

  24. # 24   goldschlager
    July 31st, 2007 at 22:45

    I am extremely new to Flex, and still learning so bear with me. I am trying to figure out how to make the content area of the panel to be invisible instead of white.

    Congrats on the project btw, I will definately utilize it often.

  25. # 25   Ultraniblet
    August 3rd, 2007 at 13:13

    Congratulations, this looks great.

    I had one question, in ‘real’ panel-based app (eg Photoshop), the panels stay static if you scroll around the main area. Is there a way of achieving this with your SuperPanel, like giving the main area it’s own scroll?

  26. # 26   dc hall
    August 6th, 2007 at 22:03

    Really great job. Can’t wait to see the update to this.

    I am having one issue with the current build though. I am running an app. windowless with no chrome. Everything is smooth and looks good. But when I go to close the app. via your close function, it does not close all the way from the task bar. I am sure that it is because I am running windowless. Any ideas how i can quick fix this?

  27. # 27   vincent
    August 23rd, 2007 at 01:44

    Great job, I have a big problem though as I am creating 4 panels on a page. The other element is enclosed in a vbox which then contains two hbox and with each hbox it has 2 panels. which gives me the 4 panel look with two on the first row and two on the bottom row. When I try to maximize one of the panel it doesn’t take the entire screen and i can still see the other panels.

    Does anyone have any suggestion to work around this?

  28. # 28   Kay-Rules
    August 23rd, 2007 at 06:47

    Wow!! You have the cleanest custom panel i ever found.. Great job.. Thanks..

  29. # 29   Paul
    August 31st, 2007 at 05:16

    Yep, minimizeButton.png not included in the source file… I checked the zip, and I looked in the source – assets – img directly on your website can’t find it..

    I will get around it for now, but I thought you might like to know, that us Yanks (Anthony & I) can’t seem to locate the file.

    But I do intend to use superpanel, as I think it adds a lot to my applications.

    Keep up the good work.

    BTW, we are about to extend it by having it call a user defined module on close, so that when someone closes a panel it will do some housekrrping. If you would like we can send what we do back to you.


  30. # 30   Tim Hayes
    September 10th, 2007 at 18:39

    Hey mate,

    Your SuperPanel component is very good, I’m going to use it in a project of mine, it was a great convenience finding something like this already made. :)

    There’s a problem I’ve noticed though. Unless you specify an explicit width and height, the control icons and resize icon won’t position correctly. I’m having trouble with this because I’m using components with a variable size in a Panel, and it’s nice to have the convenience of having to work out the right size for the component.

    Is there a way to fix this? I’ve tried a setStyle(“right”) on the control buttons, to avoid having to use unscaledWidth, but that didn’t do anything. Is there any way a fix this, do you know? It would be a huge help! :)

    Keep up the great work
    – Tim

  31. # 31   return undefined; » Announcing flexmdi: Robust, extensible MDI framework for Adobe Flex
    September 11th, 2007 at 17:31

    […] – Quick shout out to Wietse Veenstra. We used his stylesheet as a starting point and I believe are still using his images for the window […]

  32. # 32   DcHall
    September 12th, 2007 at 19:12

    i posted a while back but never heard anything. What would be a good work around if I am running window chrome = none and so when a panel is closed that it closes the application. At current when I use as is, it just closes the panel and application stays open.

  33. # 33   Wietse Veenstra
    September 12th, 2007 at 19:21

    I’m sorry for not being up-to-date with my reactions lately… I should be ashamed of myself and I am! I will improve my bad behavior from now.

    Could this be the solution to your problem? http://www.cflex.net/showFileDetails.cfm?ObjectID=420&ChannelID=1

    I didn’t test it but its worth a try. If it doesn’t work you should search on google for ‘Flex Close Flash Player’ or search on FlexCoders. Please let us know if it worked! Thank you

  34. # 34   gmurnock
    September 25th, 2007 at 03:45

    Great work, very easy to use even for a beginner as myself. Question, anyone can answer if they know, has anyone put in a minimize/maximize button(graphic)? I know you said awhile ago you were going to implement and with the relaese of the MDI (hard to use in my point) hope you are still going to release it.

    Thanks again and keep up the inspiring info!

  35. # 35   dzinr38
    September 26th, 2007 at 02:58

    I just created a minimize/maximize image graphic in case anyone needs one.

    Also, I’m VERY NEW to Flex and was wondering is there a way to change the titles of each panel? Basically, when you click to add a new panel, it’s just a generic title. I was just wondering if this is meant to be dynamic to users so that they can customize their titles.


  36. # 36   Wietse Veenstra
    September 26th, 2007 at 06:27

    Hello Dzinr38 and gmurnock,

    I’m working on SuperPanel 2.0 which will have an option menu, a little like the one we know from the NetVibes boxes. In the option menu you can select the border color, give the panel a custom title and set its alpha for now. Perhaps there are other good ideas for the option menu?

    As for the minimize button, I still have to decide whether to use the fisheye component to catch the minimized panel or not… I think I’ll upload the new version somewhere next week.

  37. # 37   renzki
    October 20th, 2007 at 01:29

    Something is wrong with the mouse eventhandlers. Try adding a combobox with items. Your items will not show unless you do a longpress for that control.

  38. # 38   Mitch
    October 20th, 2007 at 18:13

    I just wanted to add my thanks for this code! I am working on a product that will eventually be available commercially and i have used this code to get a great start. I’m not sure how i would have figured out what i needed to do without your sample.

    I’ve left your comments at the top of my code, but i’ve changed the functionality so much it is hardly recognizable any more.

    I learned a heck of a lot from reading and changing your code.


  39. # 39   Andrew
    October 22nd, 2007 at 08:48

    Renzki have you been able to solve the combobox issue?

  40. # 40   Andrew
    October 22nd, 2007 at 09:06

    To Renzki

    comment out the first line in the addListeners() method.
    This resolves the combobox issue.

    public function addListeners():void {
    //this.addEventListener(MouseEvent.CLICK, panelClickHandler);

  41. # 41   Andrew
    October 24th, 2007 at 08:33

    Anybody figures out how to pass parameters between applications.I am loading application into the panels. I can not use “Application.application” because this now point to the SuperPanel application and not to the application in the panel.
    Any suggestions.

  42. # 42   Lee
    November 8th, 2007 at 07:20

    Thank you so much for this! It helped a lot 😉 However, I do have a question… Why does the positioning of the pictures (the close button, etc.) mess up when you specify the panel’s width and height in percentage? They bunch up outside the LEFT part of the panel title bar…

    Once again, thanks!

  43. # 43   Brian
    December 11th, 2007 at 00:16

    Nice one. When some developers are offering a similar component for sale you are giving it away! I am a total noob at Flex and even I managed to get it working. For those who are interested in passing parameters from their application to the Superpanel. You can create a Superpanel as a new component and add extra properties such as a variable that will hold an alternative name. In the main application you can use the Popupmanager to ‘call’ this new component and pass the parameter that will populate this. Check out :
    It took a bit of time but eventually the penny dropped.

  44. # 44   Greg C
    December 17th, 2007 at 18:38

    I too am getting the wierd floating resizing images when i specify the panel in percentages… Is there a fix for this?

  45. # 45   Larry
    December 24th, 2007 at 04:24

    Your panel is awesome I am having one problem with it. The Combo boxes see to act funky as in when you click on the combo box it drops down for just a moment you can work around this by holding do the button and move your box in the drop down but even with this it does not see to grab the item I have just clicked. It tried the following suggestion but this it see to mess up the forms so they did ever seem to be focused.

    To Renzki

    comment out the first line in the addListeners() method.
    This resolves the combobox issue.

    public function addListeners():void {
    //this.addEventListener(MouseEvent.CLICK, panelClickHandler);

    and ideas would be appreciated.

    Thanks again very nice work.

  46. # 46   Greg
    December 31st, 2007 at 16:11

    Is there an updated version of this component. I can get the component to work properly if i specify percentages as the width..


  47. # 47   Greg
    December 31st, 2007 at 16:19

    Correction to previous comment, I can not get the component to work if i specify width..

  48. # 48   Ipog
    January 4th, 2008 at 14:27

    Hai there,

    It was really excellent. I have tried your superPanel and I have found the flwg issue,

    1) when we set the SuperPanel width as 100%, the buttons position will not aligned properly.

    For some reason I want to use panel width as 100%, in which way its possible can you help me pls ?

    Thanks in Advance, Ipog

  49. # 49   Larry
    January 7th, 2008 at 02:21

    I am new to flex. Is there a simple way to include a button on the panel that closes the panel like the small x does?

  50. # 50   Ipog
    January 7th, 2008 at 06:27

    Hi Wietse Veenstra,

    Great work done!

    Already I have posted my comments but unfortunately I can not able to see that in your blog. Not to worry.

    If I use 100% width 100% height ( insted of fixed width )in .mxml file the button controls area miss alighed and I think in this case the unscaledWidth is not working.

    Can you throw some light on me ? In my application I am in the situvation to use the superpanel as 100% by 100%. I kindly request you to guide me i this regard.

    Thanks, Ipog

  51. # 51   Nathan
    February 1st, 2008 at 00:23

    A quick comment on a rather uncommon bug. If any style properties similar to “horizontalCenter”, “verticalCenter”, “bottom”, etc. are defined then attempting to move the panel is almost pointless and resizing can lead to a misalligned cursor and panel corner. Quickest fix is applying a stylesheet in the panelClickHandler which sets all such style values to “undefined.”

  52. # 52   paultje
    February 1st, 2008 at 16:48

    First comment, great component and thanks for making it available.

    Second comment… on the panelFocusCheckHandler function. If for example, you add a richTextEditor as a child to the superPanel, the panelFocusCheckHandler function will always over-ride any htmlText formatting you create. For now I’ve just commented out the two calls to this function, but I’ll come back to it and make it a bit more robust when time permits.

    I’ve also added the minimizing and panel naming, which seemed to make perfect sense if you want to deploy many/multiple superPanels at any one given time.

    Anyways thats my 2cents. Awesome job!

  53. # 53   Eduardo C. M. Câmara
    February 7th, 2008 at 15:56

    Hi! found a little particular bug.. when you click to resize the window and end up with the cursor out of the browser`s window you`ll be stuck with resize cursor… so just
    CursorManager.removeAllCursors(); instead of CursorManager.removeCursor(CursorManager.currentCursorID);

    btw, Great component! keep the good work! =).

  54. # 54   DL
    February 9th, 2008 at 01:22


    First of all, thank you for creating the SuperPanel and allowing everyone to use it freely.

    When you resize the panel to be larger than the screen width, horizontal and vertical scrollbars appear in the application. I changed a bit of the resizeMoveHandler to prevent the scrollbars from showing up:

    public function resizeMoveHandler(event:MouseEvent):void {

    var xPlus:Number = Application.application.parent.mouseX – this.oPoint.x;
    var yPlus:Number = Application.application.parent.mouseY – this.oPoint.y;

    var nW:Number = this.oW xPlus;
    var nH:Number = this.oH yPlus;

    //if (this.oW xPlus > 140) {
    if (this.x nW < = screen.width) { this.width = nW; } //} //if (this.oH yPlus > 80) {
    if (this.y nH <= screen.height) { this.height = nH; } //} this.positionChildren(); } [/code]

  55. # 55   midnighter
    February 13th, 2008 at 01:02

    Thank’s to all of you! But did you have time to create and upload a new version without all bugs?

  56. # 56   shubhra
    February 21st, 2008 at 06:49

    Thanks Wietse. I was looking for such a component only :-). keep up the good work!!!

  57. # 57   mailand
    February 28th, 2008 at 14:51

    Hi Wietse,

    I’ve just found this posting, it’s exactly what I’m looking for.

    I’d like to use it. Is the source is free for use? Thanks!

    Best regards

  58. # 58   Javier Julio
    March 5th, 2008 at 06:59


    Thanks so much for sharing this! I’m building a Flex application where this will certainly make up the core behavior. I’ll start using this and let you know how I make out. Are you still planning to release your 2.0 version? I’d love to try it out! Let us know how that is going if you are still working on it. If not I’d like to offer my help. Thanks Wietse!

  59. # 59   Flex SuperPanel | Factum Vicesimus Quartus
    March 5th, 2008 at 19:20

    […] there is an update of the SuperPanel which can be found overhere […]

  60. March 5th, 2008 at 21:50

    […] 5, 2008 at 8:49 pm (Components, Flex, Uncategorized) I have come around the Post regarding SuperPanel and was kind of upset it wasn’t that what I have been searching for. Also the perfomance is a […]

  61. # 61   mark
    March 6th, 2008 at 08:02

    Does anyone know how to have the panels have an initial state of minimized?

    I’d like them to start small, then open.

    This is really great though, i like it, thank you

  62. # 62   Wietse Veenstra
    March 12th, 2008 at 08:28

    Hello everyone,

    I’m sorry for not posting anything over the last months and also not reacting on comments. I’m back and working on the new SuperPanel again. I also have some other cool things lined up for you over the next few weeks. Time to be flexin again:)

  63. # 63   Windows classic skin for Flex 3: sketch-up you Windows-like prototype | Mind the Flex
    March 19th, 2008 at 03:38

    […] can see live demo here. Window management in my demo is based in SuperPanel extension implemented by Wietse […]

  64. # 64   Skitsanos
    March 28th, 2008 at 20:22

    indeed coding work done quite well. as i mentioned like a year ago, we even tried to use this SuperPanel in couple of projects, but i had to give it up and go for AsWing framework. No mater what you do in Flex it is still damn slow compare to what you can do with AS3+Aswing. Plus all these windowing problems and etc already solved there. I didn’t had previous experience with Java Swing, so for me after Flex was a bit weird to write everything Swing way, but now, after a year gone, i can say, hell yea, Aswing was a right choice for me…

  65. # 65   DaMood
    April 15th, 2008 at 19:41

    This is fantastic work despite the minor things that have been pointed out. Thanks for pushing/exploring the boundaries of Flex and most importantly sharing your work with everyone.

    Keep Flexing!

  66. # 66   Yurij
    May 2nd, 2008 at 19:27


    The SuperPanel is pretty cool!
    But I just wondering how did you do the menu what you have on left side of the source code page for SuperPanel? It loads content to iframe from Flex. It’s interesting! Could you please show how is it done?

    Thanks a lot!

  67. # 67   Wietse Veenstra
    May 2nd, 2008 at 21:36

    Hi Yurij,

    This screen is the standard way of showing you the source code when you enable the ‘view source’ option within a Flex project. There should be some interesting information in the html of the page, you could check out the page source perhaps… Good luck.

  68. # 68   Yurij
    May 6th, 2008 at 03:57

    Hi Wietse,

    I see… Thank you!
    But there is no source code generated for the menu though :(

  69. # 69   Kevin C.
    May 16th, 2008 at 19:21

    Just wanted to say thanks and you did a really good job. Thanks for publishing it.

  70. # 70   SuperPanelPlus: Resizable Flex Panel Component with Accessible Styling at building blocks
    May 26th, 2008 at 22:38

    […] SuperPanel is an excellent component created by Wietse Veenstra. The styling is all hard-coded,  and I need […]

  71. # 71   Tiziano
    August 5th, 2008 at 10:40

    there’s a little bug. You should put
    at line 121 of SuperPanel.as


  72. # 72   ariel
    August 6th, 2008 at 12:10

    When I derive the SuperPanel, the toolbar icons are positioned far left. I have traced this to positionChildren being called prematurely. Shouldn’t it be called in updateDisplayList instead of in createChildren?
    otherwise great work!

  73. # 73   Thomas
    August 12th, 2008 at 07:45

    Is ist possible to set the focus to a Panel bei Actionscript instead of mouseclick? When i set a Panel visible by script i can´t bring it to front. is there a way to do this in the script?

  74. # 74   mikele
    August 21st, 2008 at 09:35

    Hy. I’m Italian (Excuse me for my english not very well) and i have look tour super panel component. Congratulation it’s a good, very good work. I have a question…in whish mode you block drag&drop in the border? I want block image in canvas but i have many problem with this.

  75. # 75   Drew
    August 26th, 2008 at 23:29

    You should license this so people can use it for public projects.

  76. # 76   jon
    September 26th, 2008 at 21:15

    Any progress on getting the 1.5 version to include a ‘minimize’ button? Something to put it down on the bottom of the window in an iconic state?

    Flex has is working via their ‘dashboard’ app – but they don’t have the drag-to-resize functionality that you have. Its a v nice feature.

  77. # 77   Anand
    October 6th, 2008 at 20:09

    Super Panel is really Super! I tried viewing the source but not able to access the source except the main application code. I am new to flex. Can you please let us know how to access the source. Thanks – Anand

  78. # 78   nEx.Software
    October 10th, 2008 at 22:10

    You can add the ability to set focus through ActionScript by doing the following…

    this.addEventListener(FocusEvent.FOCUS_IN, focusHandler);

    to the addListeners function, then add to SuperPanel:

    public function focusHandler(event:FocusEvent):void

    Then you can do something like this:

    Not sure if anyone else wanted to do this but I figured I’d put in my two cents.

  79. # 79   Thomas
    October 16th, 2008 at 16:27


    I did it like this in Actionscript:

    var evt : MouseEvent = new MouseEvent(MouseEvent.CLICK);

    but yours looks better.
    To patch a MouseEvent was not the preffered solution for me but it works.

    Thank you.

  80. # 80   Thomas
    October 17th, 2008 at 10:00

    When i set one of the Panels “SetVisible(false)” to hide it and later get it back with “SetVisible(true)” i have a problem to get focus on this panel. When i click on the panel it get’s no focus after being invisible. i traced the clicks for all panels and after being set invisble/visible i don’t get an trace output in the “panelClickHandler”. i can use the grid in the panel but the header doesn’t go in the “focusmode”(Change the colour) as he does bevor i set the panel invisble/visible.

  81. # 81   Anand
    October 27th, 2008 at 04:26

    I am facing a weird focus problem. I have 4 simple text input controls within the Superpanel. When I tab out of the second textinput field the focus goes out of the SuperPanel and then when give one more tab the focus comes to the third textinput. This behaviour is not consistent. It does not happen for all the Superpanels I am using. It was happening when I tab from first text input to second input, but now it’s happening when I tab from second to third. I am not sure if it is my actionscript coding problem. If you are aware of this problem and know the solution please let me know.

  82. # 82   Andy
    November 11th, 2008 at 18:54

    Hey there.. I’ll add my thanks for this code and the fact you are giving it away for free and available for free in other applications. I am using it but had a question that I hope someone can answer for me:

    Let’s say I create 4 boxes by clicking a button from the main mxml file (MainView). When I call the addPanelHanlder, I pass in a boolen that tells what type of new panel it is: Image or Text, and set it to Child.isImage. Now, in the SuperPanel.AS code, I added a check to the createChildren function that checks for isImage and does some things… aOK!

    However, I added some new buttons to the header of the panel. when you click one of them, I’d like it to check the isImage value for each child and do something based on that value. So, I add a ClickHandler with the following code that loops on all child panels:

    for (var i:int = 0; i < this.parent.numChildren; i++) {
    var child:UIComponent = UIComponent(this.parent.getChildAt(i));
    if (child.name.lastIndexOf(“panel”) == 0) {
    if (this.isImage ) { trace(“Image”)}}}

    however, no matter what I try, I cannot seem to figure out how to access the child.isimage… when I swap this.isImage for child.isImage – it is invalid…

    Help please!! :) Thx.

  83. # 83   abhishek
    November 12th, 2008 at 13:47

    its really nice example,
    when u’ll be going to add minimize feature in it ?

  84. # 84   nEx.Software
    November 26th, 2008 at 20:13


    Seems to be an issue with the resizeHandler.

    To fix I added:
    this.resizeHandler.focusEnabled = false;

    in the createChildren() function, at Line 56.

  85. # 85   nEx.Software
    November 26th, 2008 at 20:15


    I am currently writing a version which adds a “minimize to tray” feature to SuperPanel.

    Will report back soon…

  86. # 86   adam
    November 28th, 2008 at 00:53


    Very cool! but how to import it into Flex Builder 3?



  87. # 87   Naminator_X_
    December 19th, 2008 at 01:02

    I’m creating panel via actionscript function and so far it seems i can’t add content to the panel…i’ve tried MyPan.data, MyPan.addChild, MyPan.content…none of these added the text object inside the panel :S How you add data/information to the panels via actionscript ? o,O

  88. # 88   James
    January 16th, 2009 at 03:00

    Thanks for the code. You’ve done great work. One item that might interest you and others, is that if you apply effects to these windows (like move, resize) you’ll see that the child items don’t behave correctly. I was able to fix the problem by moving the positioning code to the function adobe expects to see this in. Namely, implementing(overrid) the method updateDisplayList like so:

    protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
    super.updateDisplayList(unscaledWidth, unscaledHeight);


    Hopefully that helps. If there’s a better way of handling let me know, but this fixed the issues.
    Also, the download is missing a .png file related to minimize that is in the .css file. Should one be included, or should I just remove from the CSS?


  89. # 89   joel
    February 3rd, 2009 at 22:49


    along the same lines, the above is another SuperPanel. Easier to style and a bit cleaner in general.

  90. # 90   Robson Martins
    February 16th, 2009 at 17:16

    Hey Wietse,

    SuperPanel Rocks!

    Is this project stopped? Is there any update scheduled? It would really be very nice.

    Thank you for share it.


  91. # 91   Aleksander Vojnovic
    March 19th, 2009 at 11:16

    To add the minHeight and minWidth functionality, just paste this on lines 240.

    if (this.oW + xPlus > 140 && this.oW + xPlus > this.minWidth) {
    this.width = this.oW + xPlus;
    if (this.oH + yPlus > 80 && this.oW + xPlus > this.minHeight) {
    this.height = this.oH + yPlus;

  92. # 92   Tom G
    April 2nd, 2009 at 21:29

    How to resize SuperPanel if child controls cause scroll bars to kick in. Seems like super panel needs to be absolutely sized to work correctly. Should I override some base methods or raise a resize event from my child control?

  93. # 93   Anand
    April 10th, 2009 at 16:16

    Hello, I have been using the SuperPanel in my application and I am facing problem with RichTextEditor. If I use the Panel control and the RichTextEditor in it, it is working fine. But when I use SuperPanel and the RichTextEditor within it it is not working. Basically it is not taking effect of most of the edit features. like Bold, Underline, Slant. It works for font family and size change, but reverts back to some kind of default (i.e Verdana 10). Can someone please help.

  94. # 94   NEK
    June 9th, 2009 at 12:23

    Hi, I just get a error, When web create panel with width is percent of main application, and height is percent height of main app. The Position of min, max, resize button is false,

    plz help
    thanks so much

  95. # 95   PhD
    July 23rd, 2009 at 09:14


    Good job!

    But how do you manage the overlapping of the title and the close button when you resize you panel?

    Do you have an idea?

  96. # 96   Andrei
    August 21st, 2009 at 03:00

    how to add effects when panel show? its possible?

  97. # 97   Prakaash
    August 29th, 2009 at 13:58

    Your code is not working in Flex 3

  98. # 98   Gustavo
    September 2nd, 2009 at 06:26

    has a bug when you click to minimize and maximize clicks to 3 times quickly, the buttons will maximize and close to the corner and the panel is static

  99. # 99   Guillermo
    November 16th, 2009 at 21:01

    I would like to open a superpanel from another superpanel and set the focus on the new one, could you help me with this please?
    BTW thanks for sharing this great component


  100. # 100   mrpink
    December 16th, 2009 at 17:18

    Hi Wietse!

    Great component! I am playing with it all day.
    But I have one question?!
    I like that it is self aware of it´s “focus state” … but what if you add other components to the same parent as the SuperPanel? I am asking about the “panelFocusCheckHandler” which is iterating through parent´s children and tries to set ‘headerColors’ and ‘borderColors’ styles?

  101. # 101   Kicha
    January 4th, 2010 at 14:05

    This is great. But is it possible to save the state of the panels displayed so that when the application is opened next time, the panels should be placed at the same position when it was closed and not reset to its original position.

  102. # 102   Vik
    January 4th, 2010 at 19:09

    Hey Nice piece of code. Newbie here. I wanna do the same for an Image, for example I need to drag drop images and then resize/rotate these images. Also the rotated images need to be saved so that when the next time I open up I can get the saved design. I wud appreciate if anyone can point me as how to proceed for this. Any help is appreciated. Thanks!

  103. # 103   Gogula krishnan
    January 8th, 2010 at 16:43

    I love the portal system.
    you made me my project more easy.

    But i want to make a little adjustment.
    i have a VBox within where i embedded 2 superPanels. How can i customize the width for maximizing. for example on clicking maximize, the super panel should be enlarged for 800px width and height of 700px.

    is it possible.
    if so i will be thankful if you help me in this.

  104. # 104   MK
    January 20th, 2010 at 01:59

    is it possible to create a panel that appears minimized as default?

  105. # 105   MK
    January 20th, 2010 at 01:59

    TNKS and great job!!

  106. # 106   Simha..
    March 26th, 2010 at 07:31


    Everything is nice except for the performance issue I mentioned below

    The window that it provides is damn slow if you try to drag it.

    Turning off the also is not making any big difference.
    I also noticed that the problem occurs especially if there are many components lying underneath it. That means, if there is only the panel itself it runs quite smooth. But if there are more than let’s say 4-5 components it begins to slow down dramatically.

    If you have any solution for this let us know.

  107. # 107   Hugo
    May 10th, 2010 at 17:55


    Do you will upgrade your SuperPanel to use the new spark Panel from Flex 4 ?

  108. # 108   ayu
    August 27th, 2010 at 18:42

    hello sir.
    thanks for creating this super panel in my application it is causing some fault in including to library can reply correct path to load into library

  109. # 109   ray
    April 16th, 2011 at 02:56

    How does one use this to actually have more than just blank panels appear? I see that you instantiate a new “Super Panel” when the button is clicked but how (I am learning) do you add one’s content to the SuperPanel.as?

    i.e. I have a panel that a mainApp instantiates with a chart and other stuff inside – but when I click the superpanel button I want my panel to appear – pointers will help me learn what to do – thanks.

Leave a Reply