Implementing toolstrip in flex

Question

Hi, I am new to Flex programming. I want to implement a custom toolstrip for an app. This tool strip will include a menu bar (or a customized equivalent) to display the common menu items such as File, Edit, etc as well as a search box. It should be flexible enough to include other menu items such as bookmarks, etc in the future. Can someone suggest the most appropriate control from which to inherit my components? I have been thinking about mx:Group, s:BorderContainer, mx:HBox, but haven't been able to choose between them. And none of them seem espcially suited to my task as they merely specify layout of other objects. Is there any component which has direct support for such functionality. I have also thought about using mx:MenuBar but I don't know if it will be flexible enough to add non-menu items like search box.

Answer 1

At the most basic level, your toolbar will need to layout the controls. I generally use a s:HGroup container when implementing toolbars and add menus, buttons, separators, search boxes, etc as necessary. You'll probably want to draw some sort of background such as a gradient to make it look nicer. With Flex 4 this is generally done with skinning, but I think that is a little overkill for such a simple component that doesn't need to change it's appearance based on different states. I would recommend something like the following, which allows you to draw the background for the toolbar without having to create a separate skin file for it:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%">
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xe0e0e0"/>
                <s:GradientEntry color="0xa0a0a0"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <s:HGroup top="2" bottom="2" left="8" right="8" verticalAlign="middle">
        <s:Button label="Something"/>
        <s:Button label="Another"/>
        <s:Button label="Other Another"/>
        <mx:Spacer width="100%"/>
        <s:TextInput/>
    </s:HGroup>
</s:Group>

Answer 2

For speed and ease of use, use a MenuBar.

Maybe something like this:

//psuedo code
<HGroup> //draw your background for both components in the HGroup container
 <menuBar> //menubar has a transparent background
 <spacer width="100%">
 <searchBox>
</HGroup>