CODEWITHSUNDEEP
apache-flexflash-builderhighlightmenubar
MonsieurFop
MonsieurFop

Reputation: 13

Change highlighting of top-level items in menubar Flash Builder 4.6

I have been employed to help with flex page building and three days into learning about flash builder I have been given a tast to change the way top-level items are higlhlighted in a menubar. Currently it's default, so the items change their colours to blue when hoovered over.

What I want to do is to make the text get underlined when hoovered over with a mouse, and not change its colour to blue.

Tried changing it through CSS, but the only thing that changes are the submenu items, not the top level:

Code in main application responsible for menubar kept in a BorderContainer:

<mx:MenuBar id="mbPrimaryMenu" height="40" labelField="@label"
dataProvider="{primaryMenuItems}" change="mbPrimaryMenuChangeHandler(event)"/>

CSS responsible forformatting of what I thought was the entire menubar (top-level elements included):

#mbPrimaryMenu {
    chromeColor: #333333;
    borderVisible: true;
    borderColor: #000000;
    borderAlpha: 0;
    borderStyle: solid;
    borderWeight: 2;
    color: #FFFFFF;
    contentBackgroundColor: #333333;
    contentBackgroundAlpha: 0.8;
    rollOverColor: #AAAAAA;
    itemRollOverColor: #FF0000;

How do I do this? CSS, MenuBarItemRenderer? Where do I look for the way menubar highlights its elements when mouse rolls over one of its elements?

Upvotes: 1

Views: 1176

Answers (1)

ggkmath
ggkmath

Reputation: 4246

To get the menu bar's first level text underlined, just set the textDecoration property where you add the MXML component. That is:

<mx:MenuBar width="100%" height="20" textDecoration="underline" dataProvider="{myData}"/>

To change the menu bar's top level background colors, you'll need to copy then edit the default skins. This might seem intimidating, but it's actually very easy to do. (if you never created a custom skin before, see my answer here to get you started: Add search icon inside spark TextInput in Flex )

You can apply the skins in MXML, or since you're using CSS you could apply them in CSS using:

mx|MenuBar {
backgroundSkin: ClassReference("com.mycompany.views.components.skins.MyButtonSkin");
   /* changes background color at top level*/
itemSkin: ClassReference("com.mycompany.views.components.skins.MyMenuItemSkin"); 
   /* changes background HOVER color at top level of menu bar */
}

You can create the skins MyButtonSkin (use your own name) from the default skin of ButtonSkin, and MyMenuItemSkin (use your own name) from the default skin MenuItemSkin. However, you only need MyMenuItemSkin to change the hover color at top level of menu bar.

After you have MyMenuItemSkin skin in your skins folder, edit the layer 1 section, which contains the fill. Here, you can do something like:

<!-- layer 1: fill; effects main level of menubar only -->
<s:Rect left="0" right="0" top="0" bottom="0" excludeFrom="up,disabled" >
    <s:fill> 
        <s:LinearGradient rotation="90">
            <s:GradientEntry color.over="0xFF0000" 
                             color.down="0x00FF00"
                             alpha.over="0.8" alpha.down="1" 
                             />
            <s:GradientEntry color.over="0xAA0000" 
                             color.down="0x00AA00"
                             alpha.over="0.8" alpha.down="1" 
                             />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

Save it and run the program. Then tweek the colors as you wish.

Upvotes: 1

Related Questions