메뉴 모음의 최상위 항목 강조 표시 변경 Flash Builder 4.6

Question

플렉스 페이지 제작 및 3 일 동안 플래시 빌더에 대한 학습을 ​​돕기 위해 취업했습니다. 최상위 항목이 하이라이트 된 방식을 변경하는 데 많은 시간을했습니다. 도구 모음. 현재는 기본값이므로 항목 위에 놓으면 색상이 파란색으로 바뀝니다.

내가하고 싶은 것은 밑줄이 그어진 마우스를 마우스로 올리면 색상을 파란색으로 변경하지 말아야한다는 것입니다.

는 CSS를 통해 변경하려고했으나 유일한 변화는 하위 메뉴 항목이 아닌 최상위 것을 :

코드 도구 모음에 대한 책임을 기본 응용 프로그램에서 BorderContainer에 보관 :

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

CSS 내가 생각한 메뉴 모음 전체를 구성하는 데 책임이있다. (최상위 요소 포함) :

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

어떻게해야합니까? CSS, MenuBarItemRenderer? 마우스가 요소 중 하나를 굴릴 때 메뉴 모음이 요소를 강조 표시하는 방법은 어디에서 찾을 수 있습니까?

Answer 1

메뉴 모음의 첫 번째 수준 텍스트에 밑줄을 표시하려면 textDecoration 속성을 MXML 구성 요소를 추가하는 위치로 설정하십시오. 즉,

메뉴 모음의 최상위 배경색을 변경하려면 기본 스킨을 복사 한 다음 편집해야합니다. 이것은 두려운 것처럼 보일 수도 있지만 실제로는 매우 쉽습니다. (이전에 사용자 정의 스킨을 만든 적이없는 경우 여기에 내 대답을 참조하면 시작하는 데 : Add search icon inside spark TextInput in Flex를)

당신은 MXML에 스킨을 적용 할 수 있습니다, 또는 당신이 CSS를 사용하고 있기 때문에 당신이 사용하는 CSS에 적용 할 수 :

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 */ 
} 

기본 스킨 MenuItemSkin의 ButtonSkin 및 MyMenuItemSkin (기본 이름 사용)의 기본 스킨에서 MyButtonSkin (자신의 이름 사용) 스킨을 만들 수 있습니다. 그러나 메뉴 막대의 최상위 레벨에서 호버 색을 변경하려면 MyMenuItemSkin 만 필요합니다.

스킨 폴더에 MyMenuItemSkin 스킨이있는 경우 채우기가 포함 된 레이어 1 섹션을 편집하십시오. 여기에서 다음과 같이 할 수 있습니다 :

<!-- 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> 

저장하고 프로그램을 실행하십시오. 그런 다음 원하는대로 색상을 두 번 입력하십시오.