CODEWITHSUNDEEP
apache-flexmenuflex3menubar
Ivan Zamylin
Ivan Zamylin

Reputation: 1748

Change background color in Menu of MenuBar (Flex 4.6)

In Flex, spark skin's are great. It takes few minutes to customize a component. Mx components are extremely hard to deal with. It took me 2 days to understand how to change background of Menu in Menubar component. And when I found the right way to accomplish it ( http://goo.gl/Tu5Wc ), it simply doesn't work. I created very easy application to demonstrate my problem:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="application1_creationCompleteHandler(event)">

    <fx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.events.FlexEvent;
            private var menubarXML:XMLList =
                <>
                    <menuitem label="Client">
                        <menuitem label="Profile"/>
                        <menuitem label="Documents"/>
                    </menuitem>
                    <menuitem label="Others">
                        <menuitem label="Profile"/>
                        <menuitem label="Documents"/>
                    </menuitem>
                </>;
            [Bindable]
            public var menuBarCollection:XMLListCollection;
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                menuBarCollection = new XMLListCollection(menubarXML);

            }

        ]]>
    </fx:Script>

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        mx|MenuBar.myStyle {
            backgroundColor: #ff0000;
        }
    </fx:Style>
    <mx:MenuBar height="30" labelField="@label" dataProvider="{menuBarCollection}" menuStyleName="myStyle"/>
</s:Application>

Can someone explain why Menu background is still white?

Upvotes: 0

Views: 4880

Answers (4)

user1933057
user1933057

Reputation: 42

The Menu Bar itens render a List... Just set, on CSS a style that works with lists (it wont show with ctrl+bar).

mx|MenuBar{
    color:#BBBBBB;
    backgroundColor: #333333;
    contentBackgroundColor: #333333;
}

Just it! It's easy :D

Upvotes: 3

Juan E. Delgado
Juan E. Delgado

Reputation: 77

I Found a better option, I think.

Im not using mx lists in my app. So I just used this:

mx|List
{
    backgroundColor:#666666;
}

Anyway I think you can use inheritance to use this css only for your menu.

Upvotes: 0

Ivan Zamylin
Ivan Zamylin

Reputation: 1748

Here is the solution I came with.

I created a custom MenuItemRenderer, and in the updateDisplayList function I added the following lines:

        this.graphics.clear();
        this.graphics.beginFill(BACKGROUND_COLOR);
        this.graphics.drawRect(-1, -1, unscaledWidth +1, unscaledHeight+2);
        this.graphics.endFill();

        if (Menu(listData.owner).isItemHighlighted(listData.uid)) { 
            this.graphics.clear();
            this.graphics.beginFill(0xb4c5d6);
            this.graphics.drawRect(0,0, unscaledWidth -2, unscaledHeight-1);
            this.graphics.endFill();        
        }

First part is for background and second for roll over effect.

Then I simply extended the standard MenuBar component and overridden the getMenuAt function as follows:

    override public function getMenuAt(index:int):Menu
    {
        var menu:Menu = super.getMenuAt(index);
        menu.itemRenderer = new ClassFactory(CustomMenuItemRenderer);
        return menu;

    }

Probably it is not the best solution possible, but it is the only one I could come up with. I would like to hear from anyone who could make it better.

Thanks!

Upvotes: 0

Sagar Rawal
Sagar Rawal

Reputation: 1442

You can change the CSS for that...

Following is the link for creating the CSS and use that in current project...

http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

Select Menubar and start creating you own style. it will also useful to style another components also..

Have a Nice Day -- :)

Upvotes: 1

Related Questions