JavaFX Example

More...

view plainprint?

1. import javafx.stage.Stage;  
2. import javafx.scene.Scene;  
3. import javafx.scene.shape.Rectangle;   
4. import javafx.scene.paint.Color;  
5. import javafx.scene.shape.Circle;  
6.   
7. Stage {  
8.    title: "Declaring Is Easy!"  
9.    width: 249  
10.    height: 251  
11.    visible: true  
12.    scene: Scene {   
13.       content: [    
14.          Circle {  
15.             centerX: 118  
16.             centerY: 110  
17.             radius: 83   
18.             fill: Color.WHITE  
19.             stroke: Color.RED  
20.          },  
21.          Rectangle {  
22.             x: 45 y: 35  
23.             width: 150 height: 150  
24.             arcWidth: 15 arcHeight: 15  
25.             fill: Color.GREEN  
26.          }  
27.       ]  
28.    }  
29. }   

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle; 
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;

Stage {
   title: "Declaring Is Easy!"
   width: 249
   height: 251
   visible: true
   scene: Scene { 
      content: [  
         Circle {
            centerX: 118
            centerY: 110
            radius: 83 
            fill: Color.WHITE
            stroke: Color.RED
         },
         Rectangle {
            x: 45 y: 35
            width: 150 height: 150
            arcWidth: 15 arcHeight: 15
            fill: Color.GREEN
         }
      ]
   }
} 

More...

view plainprint?

1. import javafx.stage.Stage;  
2. import javafx.scene.Scene;  
3. import javafx.scene.Group;  
4. import javafx.scene.shape.Circle;  
5. import javafx.scene.paint.Color;  
6. import javafx.scene.image.Image;  
7. import javafx.scene.image.ImageView;  
8. import javafx.scene.text.Text;  
9. import javafx.scene.transform.Transform;  
10.   
11. Stage {  
12.     title: "Nodes"  
13.     width: 220  
14.     height: 170  
15.     visible: true  
16.     scene: Scene {  
17.         fill: Color.LIGHTBLUE  
18.         content: Group {  
19.             translateX: 55  
20.             translateY: 10  
21.             content: [  
22.                 Circle {  
23.                     centerX: 50   centerY: 50   radius: 50  
24.                     stroke: Color.YELLOW  
25.                     fill: Color.WHITE  
26.                 },  
27.                 Text {  
28.                     transforms: Transform.rotate(33, 10, 100)  
29.                     content: "Duke"  
30.                 },  
31.                 ImageView {  
32.                     image: Image {url: "http://java.sun.com/docs/books/tutorial/uiswing/examples/components/TextSamplerDemoProject/src/components/images/dukeWaveRed.gif"}  
33.                 }  
34.            ]  
35.         }  
36.     }  
37. }  

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.Group;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.text.Text;
import javafx.scene.transform.Transform;

Stage {
    title: "Nodes"
    width: 220
    height: 170
    visible: true
    scene: Scene {
        fill: Color.LIGHTBLUE
        content: Group {
            translateX: 55
            translateY: 10
            content: [
                Circle {
                    centerX: 50   centerY: 50   radius: 50
                    stroke: Color.YELLOW
                    fill: Color.WHITE
                },
                Text {
                    transforms: Transform.rotate(33, 10, 100)
                    content: "Duke"
                },
                ImageView {
                    image: Image {url: "http://java.sun.com/docs/books/tutorial/uiswing/examples/components/TextSamplerDemoProject/src/components/images/dukeWaveRed.gif"}
                }
           ]
        }
    }
}

More...

view plainprint?

1. import javafx.stage.Stage;  
2. import javafx.scene.Scene;  
3. import javafx.scene.paint.LinearGradient;  
4. import javafx.scene.paint.Stop;  
5. import javafx.scene.paint.Color;                
6. import javafx.scene.Group;     
7. import javafx.scene.shape.Rectangle;  
8. import javafx.scene.shape.Circle;  
9. import javafx.scene.effect.Reflection;  
10.   
11. Stage {  
12.    title: "JavaFX Record Button"  
13.    width: 249  
14.    height: 251  
15.    visible: true  
16.    scene: Scene {      
17.       fill: LinearGradient {   
18.          startX: 0, startY: 0, endX: 0, endY: 1.0, proportional: true  
19.          stops: [   
20.             Stop {offset: 0.0 color: Color.WHITE},  
21.             Stop {offset: 1.0 color: Color.BLACK}   
22.          ]  
23.       }   
24.       content: [  
25.          Group{  
26.             content: [  
27.                Rectangle {  
28.                   x: 40 y: 55 width: 150 height: 50   
29.                   arcWidth: 20 arcHeight: 55 stroke: Color.BLACK  
30.                   fill: LinearGradient {   
31.                      startX: 0.0  
32.                      startY: 0.0  
33.                      endX: 0.0  
34.                      endY: 1.0  
35.                      proportional: true  
36.                      stops: [   
37.                         Stop {offset: 0.0 color: Color.WHITE},  
38.                         Stop {offset: 1.0 color: Color.BLACK}   
39.                      ]  
40.                   }         
41.                },  
42.                Circle {  
43.                   centerX: 115 centerY: 80 radius: 15  
44.                   fill: Color.web("#ff3300") stroke: Color.DARKRED   
45.                }  
46.             ]  
47.             effect:  Reflection {fraction: 0.9  topOpacity: 0.5 topOffset: 2.5}  
48.          }   
49.       ]   
50.    }  
51. }  

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.paint.Color;              
import javafx.scene.Group;   
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Circle;
import javafx.scene.effect.Reflection;

Stage {
   title: "JavaFX Record Button"
   width: 249
   height: 251
   visible: true
   scene: Scene {    
      fill: LinearGradient { 
         startX: 0, startY: 0, endX: 0, endY: 1.0, proportional: true
         stops: [ 
            Stop {offset: 0.0 color: Color.WHITE},
            Stop {offset: 1.0 color: Color.BLACK} 
         ]
      } 
      content: [
         Group{
            content: [
               Rectangle {
                  x: 40 y: 55 width: 150 height: 50 
                  arcWidth: 20 arcHeight: 55 stroke: Color.BLACK
                  fill: LinearGradient { 
                     startX: 0.0
                     startY: 0.0
                     endX: 0.0
                     endY: 1.0
                     proportional: true
                     stops: [ 
                        Stop {offset: 0.0 color: Color.WHITE},
                        Stop {offset: 1.0 color: Color.BLACK} 
                     ]
                  }       
               },
               Circle {
                  centerX: 115 centerY: 80 radius: 15
                  fill: Color.web("#ff3300") stroke: Color.DARKRED 
               }
            ]
            effect:  Reflection {fraction: 0.9  topOpacity: 0.5 topOffset: 2.5}
         } 
      ] 
   }
}

More...

view plainprint?

1. import javafx.stage.Stage;  
2. import javafx.scene.Scene;  
3. import javafx.ext.swing.SwingSlider;  
4.   
5. import javafx.scene.shape.Circle;  
6. import javafx.scene.paint.Color;  
7. import javafx.scene.paint.Stop;  
8. import javafx.scene.paint.RadialGradient;  
9.    
10. var slider = SwingSlider{  
11.    minimum: 0  
12.    maximum: 60  
13.    value: 0  
14.    translateX: 10  
15.    translateY: 110  
16. };  
17.    
18. Stage {  
19.    title: "Data Binding"  
20.    width: 220  
21.    height: 170  
22.    scene: Scene {   
23.       fill: Color.LIGHTGRAY;  
24.       content: [   
25.          slider,   
26.          Circle {  
27.             centerX: bind slider.value+50 centerY: 60 radius: 50  
28.             stroke: Color.YELLOW  
29.             fill: RadialGradient {  
30.                centerX: 50 centerY: 60 radius: 50  
31.                focusX: 50 focusY: 30  
32.                proportional: false  
33.                stops: [  
34.                   Stop {offset: 0 color: Color.RED},  
35.                   Stop {offset: 1 color: Color.WHITE},  
36.                ]  
37.             }  
38.          }  
39.       ]  
40.    }  
41.    visible: true  
42. }    

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.ext.swing.SwingSlider;

import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.paint.Stop;
import javafx.scene.paint.RadialGradient;
 
var slider = SwingSlider{
   minimum: 0
   maximum: 60
   value: 0
   translateX: 10
   translateY: 110
};
 
Stage {
   title: "Data Binding"
   width: 220
   height: 170
   scene: Scene { 
      fill: Color.LIGHTGRAY;
      content: [ 
         slider, 
         Circle {
            centerX: bind slider.value+50 centerY: 60 radius: 50
            stroke: Color.YELLOW
            fill: RadialGradient {
               centerX: 50 centerY: 60 radius: 50
               focusX: 50 focusY: 30
               proportional: false
               stops: [
                  Stop {offset: 0 color: Color.RED},
                  Stop {offset: 1 color: Color.WHITE},
               ]
            }
         }
      ]
   }
   visible: true
}  

More...

view plainprint?

1. import javafx.stage.Stage;  
2. import javafx.scene.Scene;  
3. import javafx.ext.swing.SwingToggleGroup;  
4. import javafx.ext.swing.SwingRadioButton;  
5. import javafx.scene.shape.Circle;  
6. import javafx.scene.paint.Color;  
7. import javafx.scene.paint.RadialGradient;  
8. import javafx.scene.paint.Stop;  
9. import javafx.scene.layout.HBox;  
10. import javafx.scene.layout.VBox;  
11. import javafx.scene.text.Font;  
12.   
13. var group = SwingToggleGroup{};  
14.   
15. var choice1 = SwingRadioButton{  
16.    text: "STOP"   
17.    foreground: Color.GRAY   
18.    font: Font{name:"Tahoma" size: 15}   
19.    toggleGroup: group  
20. };  
21.   
22. var choice2 = SwingRadioButton{  
23.    text: "READY"   
24.    foreground: Color.GRAY   
25.    font: Font{name:"Tahoma" size: 15}   
26.    toggleGroup: group  
27. };  
28.   
29. var choice3 = SwingRadioButton{  
30.    text: "GO"   
31.    foreground: Color.GRAY   
32.    font: Font{name:"Tahoma" size: 15}   
33.    toggleGroup: group  
34. };  
35.   
36. var lightStop = Circle {             
37.    centerX: 12             
38.    centerY: 12             
39.    radius: 12             
40.    stroke: Color.GRAY  
41.    fill: bind RadialGradient {                       
42.       centerX: 8,     
43.       centerY: 8,     
44.       radius: 12,     
45.       proportional: false                     
46.       stops: [                         
47.          Stop {offset: 0.0 color: Color.WHITE}  
48.          Stop {offset: 1.0 color:   
49.             if (choice1.selected)                                              
50.                  then Color.RED                                              
51.             else Color.GREY                          
52.          }                    
53.       ]             
54.    }  
55. };  
56.   
57. var lightReady = Circle {             
58.    centerX: 12             
59.    centerY: 12             
60.    radius: 12             
61.    stroke: Color.GRAY   
62.    fill: bind RadialGradient {              
63.       centerX: 8,      
64.       centerY: 8,      
65.       radius: 12,      
66.       proportional: false                      
67.       stops: [                                
68.          Stop {offset: 0.0 color: Color.WHITE},                        Stop {offset: 1.0 color:   
69.             if (choice2.selected)                                              
70.                then Color.GOLD                                              
71.             else Color.GRAY                          
72.          }                 
73.       ]            
74.    }  
75. };                                   
76.   
77. var lightGo = Circle {  
78.    centerX: 12  
79.    centerY: 12  
80.    radius: 12  
81.    stroke: Color.GRAY  
82.    fill: bind RadialGradient {  
83.       centerX: 8,  
84.       centerY: 8,  
85.       radius: 12,  
86.       proportional: false  
87.       stops: [  
88.          Stop {offset: 0.0 color: Color.WHITE},  
89.          Stop {offset: 1.0 color:   
90.             if (choice3.selected)  
91.                 then Color.GREEN  
92.             else Color.GREY  
93.          }  
94.       ]  
95.    }  
96. };  
97.   
98. Stage {  
99.    title: "Lights"  
100.    width: 220  
101.    height: 130  
102.    visible: true  
103.    scene: Scene{  
104.       fill: Color.HONEYDEW  
105.       content: HBox{  
106.          spacing: 10  
107.          content:[  
108.             VBox{  
109.                 spacing: 10  
110.                 content:[choice1, choice2, choice3]  
111.             },  
112.             HBox{  
113.                 spacing: 15  
114.                 content:[lightStop, lightReady, lightGo]  
115.                 translateY: 25  
116.             }  
117.          ]        
118.       }//HBox  
119.    } //Scene  
120. }//Stage   

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.ext.swing.SwingToggleGroup;
import javafx.ext.swing.SwingRadioButton;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;

var group = SwingToggleGroup{};

var choice1 = SwingRadioButton{
   text: "STOP" 
   foreground: Color.GRAY 
   font: Font{name:"Tahoma" size: 15} 
   toggleGroup: group
};

var choice2 = SwingRadioButton{
   text: "READY" 
   foreground: Color.GRAY 
   font: Font{name:"Tahoma" size: 15} 
   toggleGroup: group
};

var choice3 = SwingRadioButton{
   text: "GO" 
   foreground: Color.GRAY 
   font: Font{name:"Tahoma" size: 15} 
   toggleGroup: group
};

var lightStop = Circle {           
   centerX: 12           
   centerY: 12           
   radius: 12           
   stroke: Color.GRAY
   fill: bind RadialGradient {                     
      centerX: 8,   
      centerY: 8,   
      radius: 12,   
      proportional: false                   
      stops: [                       
         Stop {offset: 0.0 color: Color.WHITE}
         Stop {offset: 1.0 color: 
            if (choice1.selected)                                            
                 then Color.RED                                            
            else Color.GREY                        
         }                  
      ]           
   }
};

var lightReady = Circle {           
   centerX: 12           
   centerY: 12           
   radius: 12           
   stroke: Color.GRAY 
   fill: bind RadialGradient {            
      centerX: 8,    
      centerY: 8,    
      radius: 12,    
      proportional: false                    
      stops: [                              
         Stop {offset: 0.0 color: Color.WHITE},                        Stop {offset: 1.0 color: 
            if (choice2.selected)                                            
               then Color.GOLD                                            
            else Color.GRAY                        
         }               
      ]          
   }
};                                 

var lightGo = Circle {
   centerX: 12
   centerY: 12
   radius: 12
   stroke: Color.GRAY
   fill: bind RadialGradient {
      centerX: 8,
      centerY: 8,
      radius: 12,
      proportional: false
      stops: [
         Stop {offset: 0.0 color: Color.WHITE},
         Stop {offset: 1.0 color: 
            if (choice3.selected)
                then Color.GREEN
            else Color.GREY
         }
      ]
   }
};

Stage {
   title: "Lights"
   width: 220
   height: 130
   visible: true
   scene: Scene{
      fill: Color.HONEYDEW
      content: HBox{
         spacing: 10
         content:[
            VBox{
                spacing: 10
                content:[choice1, choice2, choice3]
            },
            HBox{
                spacing: 15
                content:[lightStop, lightReady, lightGo]
                translateY: 25
            }
         ]      
      }//HBox
   } //Scene
}//Stage 

More...

view plainprint?

1. import javafx.animation.Interpolator;  
2. import javafx.animation.Timeline;  
3. import javafx.stage.Stage;  
4. import javafx.scene.Scene;  
5. import javafx.scene.paint.Color;  
6. import javafx.scene.image.Image;  
7. import javafx.scene.image.ImageView;  
8. import javafx.scene.shape.ArcTo;  
9. import javafx.scene.shape.MoveTo;  
10. import javafx.scene.shape.Path;  
11. import javafx.scene.effect.Lighting;  
12. import javafx.scene.effect.light.DistantLight;  
13.   
14. var x: Number;  
15.   
16. Timeline {  
17.    repeatCount: Timeline.INDEFINITE  
18.    autoReverse: true  
19.    keyFrames: [  
20.       at (0s) {x => 0.0},  
21.       at (7s) {x => 387.0 tween Interpolator.LINEAR},  
22.    ]  
23. }.play();  
24.   
25. var y: Number;  
26.   
27. Timeline {  
28.    repeatCount: Timeline.INDEFINITE  
29.    autoReverse: true  
30.    keyFrames: [  
31.       at (0s) {y => 0.0},  
32.       at (4s) {y => 55.0 tween Interpolator.LINEAR},  
33.    ]  
34. }.play();  
35.   
36. Stage{  
37.    title: "Cloud"  
38.    visible: true  
39.    scene: Scene{  
40.        fill: Color.WHITE  
41.        content:[  
42.           ImageView{  
43.              image: Image{url: "http://java.sun.com/docs/books/tutorial/2d/basic2d/examples/images/weather-sun.png"}  
44.           },  
45.           Path {  
46.              translateX: bind x  
47.              translateY: bind y   
48.              fill: Color.WHITE  
49.              stroke: Color.LIGHTBLUE  
50.              strokeWidth: 2  
51.              effect: Lighting{light: DistantLight{azimuth: 90}}  
52.              elements: [  
53.                  MoveTo { x: 15 y: 15 },  
54.                  ArcTo { x: 50 y: 10 radiusX: 20 radiusY: 20 sweepFlag: true},  
55.                  ArcTo { x: 70 y: 20 radiusX: 20 radiusY: 20 sweepFlag: true},  
56.                  ArcTo { x: 50 y: 60 radiusX: 20 radiusY: 20 sweepFlag: true},  
57.                  ArcTo { x: 20 y: 50 radiusX: 10 radiusY: 5 sweepFlag: true},  
58.                  ArcTo { x: 15 y: 15 radiusX: 10 radiusY: 10 sweepFlag: true},  
59.              ]  
60.           }//Path  
61.        ]  
62.    }//Scene  
63.    onClose: function() {  
64.        java.lang.System.exit(0);  
65.    }//close action  
66. }//Stage  

import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.effect.Lighting;
import javafx.scene.effect.light.DistantLight;

var x: Number;

Timeline {
   repeatCount: Timeline.INDEFINITE
   autoReverse: true
   keyFrames: [
      at (0s) {x => 0.0},
      at (7s) {x => 387.0 tween Interpolator.LINEAR},
   ]
}.play();

var y: Number;

Timeline {
   repeatCount: Timeline.INDEFINITE
   autoReverse: true
   keyFrames: [
      at (0s) {y => 0.0},
      at (4s) {y => 55.0 tween Interpolator.LINEAR},
   ]
}.play();

Stage{
   title: "Cloud"
   visible: true
   scene: Scene{
       fill: Color.WHITE
       content:[
          ImageView{
             image: Image{url: "http://java.sun.com/docs/books/tutorial/2d/basic2d/examples/images/weather-sun.png"}
          },
          Path {
             translateX: bind x
             translateY: bind y 
             fill: Color.WHITE
             stroke: Color.LIGHTBLUE
             strokeWidth: 2
             effect: Lighting{light: DistantLight{azimuth: 90}}
             elements: [
                 MoveTo { x: 15 y: 15 },
                 ArcTo { x: 50 y: 10 radiusX: 20 radiusY: 20 sweepFlag: true},
                 ArcTo { x: 70 y: 20 radiusX: 20 radiusY: 20 sweepFlag: true},
                 ArcTo { x: 50 y: 60 radiusX: 20 radiusY: 20 sweepFlag: true},
                 ArcTo { x: 20 y: 50 radiusX: 10 radiusY: 5 sweepFlag: true},
                 ArcTo { x: 15 y: 15 radiusX: 10 radiusY: 10 sweepFlag: true},
             ]
          }//Path
       ]
   }//Scene
   onClose: function() {
       java.lang.System.exit(0);
   }//close action
}//Stage

More...

view plainprint?

1. import javafx.stage.Stage;                  
2. import javafx.scene.Scene;                   
3. import javafx.scene.paint.LinearGradient;         
4. import javafx.scene.paint.Stop;           
5. import javafx.scene.paint.Color;  
6. import javafx.scene.Group;               
7. import javafx.scene.shape.Circle;  
8. import javafx.scene.effect.DropShadow;  
9. import javafx.scene.shape.Path;  
10. import javafx.scene.shape.MoveTo;     
11. import javafx.scene.shape.LineTo;  
12. import javafx.scene.paint.RadialGradient;     
13. import javafx.scene.shape.Rectangle;  
14. import javafx.scene.effect.Lighting;  
15. import javafx.scene.effect.Glow;  
16. import javafx.scene.effect.light.DistantLight;  
17. import javafx.scene.Cursor;  
18. import javafx.scene.input.MouseEvent;  
19. import javafx.scene.input.MouseButton;  
20.   
21. var effect = Glow{};  
22. var visiblePlay: Boolean = true;  
23. var visiblePause: Boolean = false;  
24. var play: Boolean = false;  
25.   
26. Stage {  
27.    title: "FXButton"  
28.    width: 170 height: 170  
29.    visible: true  
30.    scene: Scene {  
31.       fill: LinearGradient {  
32.          startX: 0, startY: 0, endX: 1, endY: 1, proportional: true  
33.          stops: [  
34.             Stop {offset: 0.0 color: Color.WHITE},  
35.             Stop {offset: 1.0 color: Color.GRAY}  
36.          ]  
37.       }  
38.       content: [  
39.          Group{  
40.             cursor: Cursor.HAND  
41.             effect: effect  
42.             content: [  
43.                Circle {  
44.                   centerX: 70  
45.                   centerY: 70  
46.                   radius: 40  
47.                   fill:LinearGradient {  
48.                      startX: 0  
49.                      startY: 0  
50.                      endX: 1  
51.                      endY: 1  
52.                      stops: [  
53.                         Stop { offset:0 color: Color.web("#0099CC") },  
54.                         Stop { offset:1 color: Color.web("#000099") }  
55.                      ]  
56.                   }  
57.                   effect: DropShadow{  
58.                      offsetX: 5  
59.                      offsetY: 5  
60.                      color: Color.BLACK  
61.                   }  
62.                },  
63.                Circle {  
64.                   centerX: 70  
65.                   centerY: 70  
66.                   radius: 34  
67.                   fill: bind RadialGradient {  
68.                      centerX:0.5  
69.                      centerY:0.5  
70.                      radius:0.5  
71.                      stops: [  
72.                         Stop { offset:0 color: Color.web("#0099CC",0) },  
73.                         Stop { offset:1 color: Color.web("#0099CC",1.0) }  
74.                      ]  
75.                   }  
76.                   effect: DropShadow{  
77.                      offsetX: 2  
78.                      offsetY: 2  
79.                      color: Color.BLACK  
80.                   }  
81.                },  
82.                Path{  
83.                   visible: bind visiblePlay;  
84.                   fill: Color.BLACK  
85.                   elements: [  
86.                      MoveTo { x: 63 y: 53 }, LineTo { x: 63 y: 84},  
87.                      LineTo { x: 83 y: 68 }, LineTo {x: 63 y:53}  
88.                   ]  
89.                   effect: Lighting{ light: DistantLight{azimuth: 90}}  
90.                },  
91.                Rectangle {  
92.                   visible: bind visiblePause;  
93.                   x: 57 y: 53 width: 9 height: 30  
94.                   stroke: Color.BLACK fill: Color.BLACK  
95.                   effect: Lighting{ light: DistantLight{azimuth: 90}}  
96.                },  
97.                Rectangle {  
98.                   visible: bind visiblePause;  
99.                   x: 73 y: 53 width: 9 height: 30  
100.                   stroke: Color.BLACK fill: Color.BLACK  
101.                   effect: Lighting{ light: DistantLight{azimuth: 90}}  
102.                },  
103.             ]  
104.   
105.             onMouseEntered: function(evt: MouseEvent):Void {  
106.                effect.level = 0.65;  
107.             }  
108.   
109.             onMouseClicked: function(evt: MouseEvent):Void {                                
110.                if(evt.button == MouseButton.PRIMARY) {  
111.                   if(play == true){  
112.                      visiblePlay = true;  
113.                      visiblePause = false;  
114.                      play = false  
115.                   }  
116.                   else{  
117.                      visiblePlay = false;  
118.                      visiblePause = true;  
119.                      play = true;  
120.                   }  
121.                }  
122.             }  
123.   
124.             onMousePressed: function(evt: MouseEvent):Void {          
125.                if(evt.button == MouseButton.PRIMARY) {  
126.                   effect.level = 0.0;  
127.                }  
128.             }   
129.   
130.             onMouseReleased: function(evt: MouseEvent):Void {  
131.                effect.level = 0.65;  
132.             }  
133.   
134.             onMouseExited: function(evt: MouseEvent):Void {  
135.                effect.level = 0.3;  
136.             }  
137.          },  
138.       ]  
139.    }  
140. }  

import javafx.stage.Stage;                
import javafx.scene.Scene;                 
import javafx.scene.paint.LinearGradient;       
import javafx.scene.paint.Stop;         
import javafx.scene.paint.Color;
import javafx.scene.Group;             
import javafx.scene.shape.Circle;
import javafx.scene.effect.DropShadow;
import javafx.scene.shape.Path;
import javafx.scene.shape.MoveTo;   
import javafx.scene.shape.LineTo;
import javafx.scene.paint.RadialGradient;   
import javafx.scene.shape.Rectangle;
import javafx.scene.effect.Lighting;
import javafx.scene.effect.Glow;
import javafx.scene.effect.light.DistantLight;
import javafx.scene.Cursor;
import javafx.scene.input.MouseEvent;
import javafx.scene.input.MouseButton;

var effect = Glow{};
var visiblePlay: Boolean = true;
var visiblePause: Boolean = false;
var play: Boolean = false;

Stage {
   title: "FXButton"
   width: 170 height: 170
   visible: true
   scene: Scene {
      fill: LinearGradient {
         startX: 0, startY: 0, endX: 1, endY: 1, proportional: true
         stops: [
            Stop {offset: 0.0 color: Color.WHITE},
            Stop {offset: 1.0 color: Color.GRAY}
         ]
      }
      content: [
         Group{
            cursor: Cursor.HAND
            effect: effect
            content: [
               Circle {
                  centerX: 70
                  centerY: 70
                  radius: 40
                  fill:LinearGradient {
                     startX: 0
                     startY: 0
                     endX: 1
                     endY: 1
                     stops: [
                        Stop { offset:0 color: Color.web("#0099CC") },
                        Stop { offset:1 color: Color.web("#000099") }
                     ]
                  }
                  effect: DropShadow{
                     offsetX: 5
                     offsetY: 5
                     color: Color.BLACK
                  }
               },
               Circle {
                  centerX: 70
                  centerY: 70
                  radius: 34
                  fill: bind RadialGradient {
                     centerX:0.5
                     centerY:0.5
                     radius:0.5
                     stops: [
                        Stop { offset:0 color: Color.web("#0099CC",0) },
                        Stop { offset:1 color: Color.web("#0099CC",1.0) }
                     ]
                  }
                  effect: DropShadow{
                     offsetX: 2
                     offsetY: 2
                     color: Color.BLACK
                  }
               },
               Path{
                  visible: bind visiblePlay;
                  fill: Color.BLACK
                  elements: [
                     MoveTo { x: 63 y: 53 }, LineTo { x: 63 y: 84},
                     LineTo { x: 83 y: 68 }, LineTo {x: 63 y:53}
                  ]
                  effect: Lighting{ light: DistantLight{azimuth: 90}}
               },
               Rectangle {
                  visible: bind visiblePause;
                  x: 57 y: 53 width: 9 height: 30
                  stroke: Color.BLACK fill: Color.BLACK
                  effect: Lighting{ light: DistantLight{azimuth: 90}}
               },
               Rectangle {
                  visible: bind visiblePause;
                  x: 73 y: 53 width: 9 height: 30
                  stroke: Color.BLACK fill: Color.BLACK
                  effect: Lighting{ light: DistantLight{azimuth: 90}}
               },
            ]

            onMouseEntered: function(evt: MouseEvent):Void {
               effect.level = 0.65;
            }

            onMouseClicked: function(evt: MouseEvent):Void {                              
               if(evt.button == MouseButton.PRIMARY) {
                  if(play == true){
                     visiblePlay = true;
                     visiblePause = false;
                     play = false
                  }
                  else{
                     visiblePlay = false;
                     visiblePause = true;
                     play = true;
                  }
               }
            }

            onMousePressed: function(evt: MouseEvent):Void {        
               if(evt.button == MouseButton.PRIMARY) {
                  effect.level = 0.0;
               }
            } 

            onMouseReleased: function(evt: MouseEvent):Void {
               effect.level = 0.65;
            }

            onMouseExited: function(evt: MouseEvent):Void {
               effect.level = 0.3;
            }
         },
      ]
   }
}