« ImageMap component added to FlexLib
Try to read this code »
21 03 2007

Flex Panel component with ControlBar docked to the top instead of bottom

Posted by: Doug, in Flex

Today someone asked on flexcoders if you can make the Panel component dock the ControlBar component to the top of the Panel instead of the bottom of the Panel. The short answer is no, you can’t. The longer answer is you can extend Panel and make a few minor adjustments and then yes, you can.

Here’s an extension of the Panel class that allows you to specify a new property: controlBarPosition, which can either be “top” or “bottom”.

The one caveat about this class is that if you set the control bar to be placed at the top, you should set the roundedBottomCorners style of the Panel to false. Otherwise the bottom corners of the control bar will be drawn rounded as well, which looks kind of weird if they’re not at the bottom of the panel (if you’re curious why take a look at the source of mx.skins.halo.HaloBorder, around line 470).

View the source.

This movie requires Flash Player 9.

This entry was posted on Wednesday, March 21st, 2007 at 3:22 pm and is filed under Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
del.icio.us:Flex Panel component with ControlBar docked to the top instead of bottom digg:Flex Panel component with ControlBar docked to the top instead of bottom spurl:Flex Panel component with ControlBar docked to the top instead of bottom wists:Flex Panel component with ControlBar docked to the top instead of bottom simpy:Flex Panel component with ControlBar docked to the top instead of bottom newsvine:Flex Panel component with ControlBar docked to the top instead of bottom blinklist:Flex Panel component with ControlBar docked to the top instead of bottom furl:Flex Panel component with ControlBar docked to the top instead of bottom reddit:Flex Panel component with ControlBar docked to the top instead of bottom fark:Flex Panel component with ControlBar docked to the top instead of bottom blogmarks:Flex Panel component with ControlBar docked to the top instead of bottom Y!:Flex Panel component with ControlBar docked to the top instead of bottom smarking:Flex Panel component with ControlBar docked to the top instead of bottom magnolia:Flex Panel component with ControlBar docked to the top instead of bottom segnalo:Flex Panel component with ControlBar docked to the top instead of bottom gifttagging:Flex Panel component with ControlBar docked to the top instead of bottom

10 Responses to “Flex Panel component with ControlBar docked to the top instead of bottom”

  1. Peter Baird says:
    March 21st, 2007 at 4:24 pm

    Or you could just use an ApplicationControlBar… a use for which the ApplicationControlBar was intended. ;-)

    Great work however.

  2. Doug says:
    March 21st, 2007 at 7:03 pm

    hmm, using an ApplicationControlBar and docking it to the top of a Panel? I know an ApplicationControlBar is supposed to dock to the top of an Application, but I don’t think you can get it to dock to the top of a Panel. Let me know if I’m wrong.

  3. Clint Tredway says:
    March 21st, 2007 at 7:44 pm

    Nope, ApplicationControlBar goes to the bottom of a panel.

  4. Juan Sanchez says:
    March 21st, 2007 at 10:24 pm

    Yep. In order to get an ApplicationControlBar to dock to the top of a panel I would stick it in a VBox. Until now :)

  5. Peter Baird says:
    March 22nd, 2007 at 9:03 am

    Ah yes… I stand corrected… for which I apologize. You would need to put the AppplicationControlBar within a VBox to do what I was trying to describe. Good catch.

  6. kasztan says:
    August 6th, 2007 at 3:46 am

    Hi! I’ve tried to use your component, but I have errors in flex3:
    1178: Attempted access of inaccessible property controlBar through a reference with static type com.dougmccune.controls:ExtendedPanel.controls. ExtendedPanel.as line 59
    As a beginner I can only guess what’s wrong ;)

    “private var controlBar:ControlBar;” delete the error, but the ControlBar doesn’t work properly at the top.

  7. pvr says:
    October 24th, 2007 at 4:31 am

    Hi

    I had the same problem as kasztan …

    tnx for the contribution though

    greetz

    P

  8. Myo says:
    January 5th, 2008 at 10:50 am

    I’ve posted the code that I extend Doug’s code to work with Flex3. Seems like calculation / instantiation of viewMetrics changed in Flex3 and that’s what preventing this code not to display properly. Check it out here: http://www.myot.ca/blog/2008/01/05/extended-panel-richtexteditor-ability-to-dock-controlbar-on-the-top/

  9. Extending Flex Panel With ActionScript | dougrdotnet says:
    June 13th, 2008 at 11:37 am

    [...] On a current project I had the need to incorporate a button into a Panel title bar which would allow users to launch a new intake form. I also needed to use this panel in four different places. First option was to create a Panel component and absolutely position a button by placing the Panel container within a Canvas container. I really don’t like absolute positioning and before this was considered I had already begun researching extending Panel over on Doug McCune’s Blog. However, related to the problem which I was trying to solve, his really cool example was just a point in the right direction for me. Ultimately, Simeon, reminded me that I had a perfect example available in my Adobe Flex 2 Training from the Source book. So here is how to extend the Panel class and add custom properties to suit your needs, in this case the addition of a button placed in title bar. [...]

  10. SOG knives says:
    July 17th, 2008 at 6:30 pm

    SOG knives…

    Interesting ideas… I wonder how the Hollywood media would portray this?…

Leave a Reply