Question

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>

有人能解释为什么菜单的背景还是白的吗?

Answer 1

菜单栏 Itens 设置了一个列表... 刚刚设置的 CSS 样式与列表一起工作( 以 ctrl+bar 显示 ) 。

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

很简单,D

Answer 2

你可以为此改变CSS...

以下是创建 CSS 的链接, 并在当前项目中使用...

< a href=>http://examples.adobe.com/flex2/consulting/style explorer/Flex2StyleExplorer.html" rel=“no follow” >http://examples.adobe.com/flex2/consulting/style explorer/Flex2StyleExpresser.html

选择菜单栏并开始创建您自己的样式。它也会有助于同时样式其他组件。

祝你们愉快!

Answer 3

这是我找到的解决方案。

我创建了一个自定义的菜单项目导师, 在更新 DisplayList 函数中, 我添加了以下行 :

        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();        
        }

第一部分为背景,第二部分为滚动效应。

然后,我简单地扩展了标准菜单栏组件,并推翻了MenuAt的以下功能:

    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.

谢谢!

Answer 4

我觉得我找到了更好的选择

我的应用程序里没有使用 mx 列表。所以我就用了这个:

mx|List
{
    backgroundColor:#666666;
}

不管怎么说,我想你可以用遗产来使用这些cs 只是为了你的菜单。

友情链接