JavaFX Example Code | ImageRollover

이미지 기반의 Rollover 버튼 만들기

By Josh Marinacci, September 22, 2008

JavaFX는 스윙의 JButton 클래스에 기반한 내장 SwingButton 클래스를 가지고 있습니만 이 클래스 때문에 제한되는 것을 느낄수 없습니다. 여러분이 상상할수 있는 어떠한 효과를 가진 여러분 자신만의 버튼을 만드는것은 매우 쉽습니다. 이 예제는 단순히 이미지들만 가지고 롤오버 효과를 가진 버튼을 어떻게 만드는지 보여줄 것입니다.

코드 이해하기

다음 코드들은 닫기 버튼을 만듭니다.

Source Code

public class CloseButton extends CustomNode {
    var image:Image;
    var images:Image[];
    public var onClicked:function():Void;

    init {
        images = [
            Image { url: "{__DIR__}resources/close_normal.png" },
            Image { url: "{__DIR__}resources/close_hover.png" },
            Image { url: "{__DIR__}resources/close_pressed.png" },
        ];
        image = images[0];
    }

    override public function create():Node {
        return ImageView {
            image: bind image
            onMouseEntered:  function(e:MouseEvent) { image = images[1] }
            onMouseExited:   function(e:MouseEvent) { image = images[0] }
            onMousePressed:  function(e:MouseEvent) { image = images[2] }
            onMouseReleased: function(e:MouseEvent) {
                image = images[0];
                if(onClicked != null) {
                    onClicked();
                }
            }
        }
    }

}

The CloseButton.fx class

이 이미지 버튼은 모든 이미지를 로드하고 그리고 나서 마우스 이벤트들에 기반하여 현재 이미지를 변경해줌으로써 작동합니다.

이 클래스를 사용하기 위해서는 이미지를 단지 stage 위에 위치시키고 delegate 함수를 onClicked 변수에 할당해 주기만 하면 됩니다.

Source Code

var stage:Stage = Stage {
    scene: Scene {
        content: CloseButton {
            onClicked: function():Void {
                stage.close();
            }
        }
    }
}

FX

Profile

이미지 기반의 Rollover 버튼 만들기

코드 이해하기