Sun Developer Network 공식 블로그

GUI에서는 마우스 커서를 올려 놓으면 모양이 바뀌는 버튼을 종종 볼 수 있습니다. 이러한 종류의 버튼은 아이콘처럼 생겼습니다. 마우스 커서를 버튼 위에 올려 놓으면 버튼 둘레에 테두리가 나타나고 아이콘이나 배경색 등이 바뀝니다. JavaFX 스크립트로 그런 버튼을 만들 때 Node.hover 인스턴스 변수를 사용하면 편리합니다.

var c = Circle {
    centerX: 80 centerY: 50 radius: 36
    fill: Color.LIGHTGREEN
    stroke: Color.DARKGREEN
    strokeWidth: 2
    opacity: bind if (c.hover) then 1 else 0
}

처음에 이 버튼은 완전히 투명한 버튼입니다. 마우스 커서를 버튼 위에 놓으면 hover 변수의 값이 true가 되면서 버튼이 바뀝니다.

그런데 배경을 강조 표시하지 않으려면 어떻게 합니까? 언뜻 보기에 이전 코드 예제의 세 번째 줄을 다음과 같이 바꾸면 될 것 같습니다.

fill: null

그러나 이 방법은 효과가 없습니다. 버튼이 전혀 강조 표시되지 않게 됩니다. 채워지지 않은 영역이 마우스 이벤트를 받지 못하기 때문입니다. 따라서 마우스 커서가 버튼 위에 있더라도 hover 변수는 여전히 false 상태입니다.

이 문제를 해결하려면 2레이어 구성을 적용합니다. 샌드위치의 상위 레이어는 완전히 투명하면서 마우스 이벤트를 수신할 수 있도록 합니다. 하위 레이어는 테두리로 구성되며, 상위 레이어의 hover 변수가 바뀔 때 표시됩니다. 다음 예제에서는 하위 레이어가 먼저 정의되고 상위 레이어가 다음에 정의됩니다.

var c: Circle;
Circle {
   centerX: 200 centerY: 50 radius: 36
   fill: null
   stroke: Color.DARKRED
   strokeWidth: 2
     visible: bind c.hover
},
c = Circle {
   centerX: 200 centerY: 50 radius: 36
   opacity: 0
};

이제 두 레이어 사이에 아이콘을 삽입하면 버튼이 완성됩니다.
작동하는 두 버튼을 확인하십시오.

Rollover.fx에서 전체 코드를 찾을 수 있습니다.


필자소개
Peter Zhelezniakov 썬마이크로시스템즈 소프트웨어 엔지니어
썬마이크로시스템즈 소속의 소프트웨어 엔지니어인 Peter는 AWT, Swing 및 최근의 JavaFX를 비롯하여 다양한 GUI 기술 분야에서 일하고 있습니다. 그는 러시아 상트페테르부르크에 거주 중이며 여행과 겨울 스포츠를 즐깁니다.

이 글의 영문 원본은
Creating Buttons With a Rollover Effect
에서 보실 수 있습니다.