Изменение цвета фона в меню MenuBar (Flex 4.6)

Question

В Flex искровая кожа отлично. Чтобы настроить компонент, требуется несколько минут. Компоненты Mx чрезвычайно трудно справиться. Мне потребовалось 2 дня, чтобы понять, как изменить фон меню в компоненте Menubar. И когда я нашел правильный способ выполнить его (http://goo.gl/Tu5Wc), он просто не работает. Я создал очень простое приложение, чтобы продемонстрировать мою проблему:

<?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 render list ... Просто установите на CSS стиль, который работает со списками (он не будет показывать с помощью Ctrl + bar).

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

Только это! Это легко: D

Answer 2

Вы можете изменить CSS для этого ...

Ниже приводится ссылка для создания CSS и использовать его в текущем проекте ...

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

Выберите Menubar и начать создавать вам свой стиль. это будет также полезно для стилизации еще компоненты также ..

имеют хороший день - :)

Answer 3

Вот решение, которое я пришел с.

Я создал обычай MenuItemRenderer, и в функции updateDisplayList я добавил следующие строки:

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

Первая часть для фона и второй для пролонгировать эффект.

Тогда я просто расширенный стандартный компонент MenuBar и переопределить функцию getMenuAt следующим образом:

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

    } 

Возможно, это не самое лучшее решение возможно, но это только один я мог придумать. Мне хотелось бы услышать от всех, кто мог бы сделать это лучше.

Спасибо!

Answer 4

Я нашел лучший вариант, я думаю.

Я не использую списки mx в своем приложении. Так что я просто использовал это:

mx|List 
{ 
    backgroundColor:#666666; 
} 

Во всяком случае, я думаю, что вы можете использовать наследование, чтобы использовать этот CSS только для меню.