Home > Flex 4 > Aligning the control bar in a spark Panel

Aligning the control bar in a spark Panel

November 16th, 2009 Leave a comment Go to comments

Adding a control bar to a Panel has changed in Flex 4. In halo you would put a mx:ControlBar component as a child of the halo Panel. In spark there is no equivalent ControlBar spark component, but instead a new controlBarContent property exposed on the spark Panel.

This code snippet demonstrates the way to add a controlBar to a spark Panel:

<s:Panel title="My Panel">
    <s:controlBarContent>
        <s:Button label="control 1" />
        <s:Button label="control 2" />
    </s:controlBarContent>
 
    <s:Label text="panel content..." />
</s:Panel>

In addition to the new controlBarContent property there is also a controlBarLayout and controlBarVisible property. Check out the Panel ASDoc for more details.

By default the controls will be laid out in a HorizontalLayout at the bottom left of the Panel. If you would like to align the controls to the center of the bottom you can either custom skin, change the controlBarLayout, or use Spacer objects.

Here is an example of changing the controlBarLayout to be a VerticalLayout with horizontalAlign=”center” then wrapping the controls in an HGroup.

View Source

If you don’t want to change the default layout of the controlBar you could also use mx:Spacer objects with 100% width as the first and last element of your controlBarContent to center the elements:

<s:Panel title="Center aligned" width="300">
    <s:controlBarContent>
        <mx:Spacer width="100%" />
        <s:Button label="control 1" />
        <s:Button label="control 2" />
        <mx:Spacer width="100%" />
    </s:controlBarContent>
 
    <s:Label text="panel content..." />
</s:Panel>

Similarly right align the elements by using just a single mx:Spacer object:

<s:Panel title="Right aligned" width="300">
    <s:controlBarContent>
        <mx:Spacer width="100%" />
        <s:Button label="control 1" />
        <s:Button label="control 2" />
    </s:controlBarContent>
 
    <s:Label text="panel content..." />
</s:Panel>

If you would like to change the position of the control bar you will need to custom skin the Panel.

Spark control bars are also available on the Application and TitleWindow components, but have not been implemented on the WindowedApplication component. See SDK-23900.

Note: This sample requires Flex SDK 4.0.0.11798 or higher. You can get the latest SDK builds from opensource.adobe.com.

Tags: , , ,
  1. Steven Shongrunden
    January 20th, 2010 at 16:26 | #1
    Reply | Quote

    Now that major axis alignment is supported you can also get this behavior by changing the horizontalAlign property of the controlBarLayout:

    <s:Panel title="Right aligned" width="300">
    <s:controlBarContent>
        <s:Button label="control 1" />
        <s:Button label="control 2" />
    </s:controlBarContent>
    <s:controlBarLayout>
        <s:HorizontalLayout horizontalAlign="right" paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
    </s:conrolBarLayout>
 
    <s:Label text="panel content..." />
</s:Panel>

    See this post for more information on when this property was added.

  1. No trackbacks yet.