FX

package effectsplayground.control;

import javafx.animation.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.text.*;
import javafx.stage.*;

/**
 * @author campbell
 */

public def width = 100;
public def height = 20;

public class Button extends CustomNode {

    public var text = "Blank";
    public var action:function();

    var glowColor = Color.TRANSPARENT;
    def colorFade:Timeline = Timeline {
        keyFrames: [
            at (0s) {
                glowColor => Color.TRANSPARENT;
            },
            at (0.2s) {
                glowColor => Color.color(0.5, 0.5, 0.5, 0.5);
            }
        ]
    }

    override protected function create() : Node {
        var rect:Rectangle;
        var t:Text;
        Group {
            content: [
                rect = Rectangle {
                    cursor: Cursor.HAND
                    width: width
                    height: height
                    fill: LinearGradient {
                        startX: 0
                        startY: 0
                        endX: 0
                        endY: 1
                        stops: [
                            Stop { offset: 0.0 color: Color.rgb( 65,  65,  65) },
                            Stop { offset: 0.4 color: Color.rgb(  1,   1,   1) },
                            Stop { offset: 0.8 color: Color.rgb( 21,  21,  21) },
                            Stop { offset: 1.0 color: Color.rgb(  4,   4,   4) },
                        ]
                    }
                    stroke: LinearGradient {
                        startX: 0
                        startY: 0
                        endX: 0
                        endY: 1
                        stops: [
                            Stop { offset: 0.0 color: Color.rgb(  5,   5,   5) },
                            Stop { offset: 1.0 color: Color.rgb( 85,  85,  85) },
                        ]
                    }
                    onMouseEntered: function(e) {
                        colorFade.rate = 1;
                        colorFade.play();
                    }
                    onMouseExited: function(e) {
                        colorFade.rate = -1;
                        colorFade.play();
                    }
                    onMouseReleased: function(e) {
                        action();
                    }
                },
                Rectangle {
                    x: 1
                    y: 1
                    width: width - 1
                    height: height - 1
                    fill: bind glowColor
                },
                t = Text {
                    translateX: bind (rect.layoutBounds.width - t.layoutBounds.width) / 2
                    translateY: bind (rect.layoutBounds.height / 2) + 3
                    font: Font { size: 11 }
                    fill: Color.WHITE
                    content: bind text
                },
            ]
        }
    }
}

function run() {
Stage {
    width: 300
    height: 100
    scene: Scene {
        fill: Color.RED
        content: [
            Button {translateX: 20 translateY: 20}
        ]
    }
}
}