Solved

In Flex/Actionscript, how do I change the highlighted roll-over and selection background color of the top-level menubar buttons for a <mx:MenuBar> component?

Posted on 2008-06-10
5
3,031 Views
Last Modified: 2010-04-21
I have a Flex application where I need to be able to change the highlighted roll-over and selection background color of the top-level menubar buttons for a <mx:MenuBar> component.  I already tried using the "rollOverColor" and "selectionColor" styles, but these seem to be applied to the drop-down/popup submenu items, not the actual top-level menubar.  Also, some of the buttons on the menubar are of type "separator", which act as spacers between menubar buttons.  Ideally, I would like to be able to turn off any roll-over/selection effects for the "separator" spacers on the main menubar as well.
<mx:Style>

        .mainMenu {

            color: #FFFFFF;

            fontWeight: bold;

        }               

        .subMenu {

            fontSize: 13;

            color: #ffffff;

            backgroundColor: #000000;

            borderSides: top, bottom, right, left;

            borderThickness: 1px;

            borderColor: #ffffff;

            fontWeight: normal;

        }               

</mx:Style>
 

<mx:MenuBar id="mainMenuBar" styleName="mainMenu" menuStyleName="subMenu"

            labelField="label" fontSize="15"

            click="handleMenuBarClickEvent(mainMenuBar.selectedIndex);" 

            itemClick="handleSubMenuBarClickEvent(event);" 

            dataProvider="{menuBarArrayCollection}">

    <mx:backgroundSkin>

        @Embed(source='com/project/images/layout/menu-bar.gif')

    </mx:backgroundSkin>

</mx:MenuBar>
 

//this is a regular menubar button in object format, supplied in the dataprovider

{label:"Home", data:1, children:[]}
 

//this is a separator for the menubar in object format

{label:"", type:"separator"}

Open in new window

0
Comment
Question by:robbersrow
  • 3
  • 2
5 Comments
 
LVL 19

Expert Comment

by:Gary Benade
ID: 21757119
You can't do that with styles, you need to use skins. I'll see if I can find you an example
0
 

Author Comment

by:robbersrow
ID: 21758001
Any examples would be greatly appreciated.
0
 

Author Comment

by:robbersrow
ID: 21766637
Instead of changing the background skin, another option would be to change the text/font color.  However, none of the styles, such as "rollOverColor" and such, seem to work.  Do you happen to have any ideas as far as this goes?
0
 
LVL 19

Accepted Solution

by:
Gary Benade earned 500 total points
ID: 21767036
I have to go to a meeting and I'm late so this is a pretty dumb example (I used the paypal logo as a skin) but it shows the concept

You'll have to add a skin for itemSkin and itemUpSkin too
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

	<mx:Style>

		MenuBar

		{

			color: #FF0000;

			selectedColor: #00FF00;

			itemOverSkin: Embed("https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif");			

		}

	</mx:Style>

	<mx:XMLList id="mainMenu">

        <menuitem label="File" >

            <menuitem label="Open Calendar" data="load">

	            <menuitem label="Logout" data="logout" />

	        </menuitem>

        </menuitem>

    </mx:XMLList>	

    <mx:MenuBar styleName="test" id="mm" labelField="@label" dataProvider="{mainMenu}" />

</mx:Application>

Open in new window

0
 

Author Closing Comment

by:robbersrow
ID: 31465651
This is what i was looking for.  Sorry for the delay in closing this solution.  Thank you for your help.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Internal Website Security 5 48
How to handle PHP $_POST requests 4 59
Updrading Office - How to Stay Could-Free With Office 201x 11 54
pdf file 7 80
Introduction (All good things must come to an end (http://en.wikipedia.org/wiki/All_Good_Things...))The original MySQL API (http://php.net/manual/en/book.mysql.php) has gone away, deprecated by PHP in Version 5.5, and removed from PHP in all current…
Introduction A frequently used term in Object-Oriented design is "SOLID" which is a mnemonic acronym that covers five principles of OO design.  These principles do not stand alone; there is interplay among them.  And they are not laws, merely princ…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now