Analog Clock with JavaFX

Last mounth just I have commenced learning JavaFX.

I have entered on the site www.javafx.com and I have started with some tutorials. And after couple of hours I started with Analog Clock. And I have modified the code and I have saved as desktop application. And now rules like that:

My code look like this:

/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/


/**
* @author Stefan Vilceloiu
*/

//public class Main {

import java.util.Calendar;
import java.util.Date;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.Group;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.transform.Rotate;
import javafx.scene.transform.Transform;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

// varies according to scene size

var width:Number = bind scene.width;
var height:Number = bind scene.height;

// list of months
var months:String[] = ["IAN", "FEB", "MAR", "APR", "MAI", "IUN",
"IUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
var radius:Number = bind width/3; // Decides the main size of the clock
var centerX:Number = bind scene.width/2; // Shifting the X center
var centerY:Number = bind scene.height/2; // Shifting the Y center
var hours:Number;
var minutes:Number;
var seconds:Number;
var date:String;
var month:String;
var year:String;
var combination: String;

var time = Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: [
KeyFrame {
time: 1s
action: function() {
actionOnTick();
}
}
]
}

time.play();

//instance of calendar
function createCalendar() {
var date = new Date();
def calendar = Calendar.getInstance();
calendar.setTime(new Date()); // fix for mobile
calendar
}
// action taken on one tick
function actionOnTick () {
var calendar = createCalendar();
seconds = calendar.get(Calendar.SECOND);
minutes = calendar.get(Calendar.MINUTE);
hours = calendar.get(Calendar.HOUR);
date = String.valueOf(calendar.get(Calendar.DATE));
if(date.length() != 2) {
date = "0{date}";
}
month = months[(calendar.get(Calendar.MONTH))];
year = String.valueOf((calendar.get(Calendar.YEAR)));
combination = "{date}-{month}-{year}";
}
//scene which can be dynamic
var scene:Scene = Scene {
width: 233
height: 260
fill: Color.TRANSPARENT
content: [
Group {
translateX: bind centerX
translateY: bind centerY
content: bind [
Circle {
radius: radius + 20
fill: RadialGradient {
centerX: 0
centerY: 0
radius: radius + 20
proportional: false
stops: [

Stop {
offset: 0.9
color: Color.SILVER
},
Stop {
offset: 1.0
color: Color.BLACK
}
]
}

},
Circle {
radius: radius + 10
stroke: Color.BLACK
fill: RadialGradient {
centerX: 0
centerY: 0
radius: 90
proportional: false
stops: [
Stop {
offset: 0.0
color: Color.WHITE
},
Stop {
offset: 1.0
color: Color.ANTIQUEWHITE
}
]
}

},
Rectangle {
x: -35,
y: 2 * radius / 3 - 15
width: 71
height: 20
fill: Color.GRAY
opacity:0.4
strokeWidth: 2
stroke: Color.BLACK
arcHeight:10
arcWidth:10
},
Text {
font: Font {
size: 11
name: "Arial"
}
x: -31 ,
y: 2 * radius / 3
content: bind combination
},
Text {
font: Font {
size: 11
name: "Tahoma"
}
x: -24 ,
y: -1.21 * radius / 3
opacity:0.85
fill: Color.RED
content: "Vilceloiu"
},
for (i in [3, 6, 9, 12]) // Setting the main digits 3,6,9,12
Text {
transforms:bind [
Transform.translate(-5, 5)
]
x: radius * (( i + 0 ) mod 2 * ( 2 - i / 3))
y: radius * (( i + 1 ) mod 2 * ( 3 - i / 3))
content: "{i}"
font: Font {
size: 12
name: "Tahoma"
}
},
// making dots on rest of the place
for (i in [1..12])
if (i mod 3 != 0 ) then Circle {
transforms:Rotate {
angle: 30 * i
}
centerX: radius
radius: 4
fill: Color.BLACK
} else [ ],

// circle at the core center
Circle {
radius: 5
fill: Color.BLACK
},
// one more circle inside the above circle
Circle {
radius: 3
fill: Color.GRAY
},
// second arm
Line {
transforms: Rotate {
angle: bind seconds * 6
}
endY: -radius - 3
strokeWidth: 2
stroke: Color.RED

},
// hour arm
Path {
transforms: Rotate {
angle: bind (hours + minutes / 60) * 30 - 90
}
fill: Color.BLACK
opacity: 0.8
elements: [
MoveTo { x: 4, y: 4 },
ArcTo {
x: 4
y: -4
radiusX: 1
radiusY: 1
},
LineTo { x: radius - 23 y: 0 },
]
},
// minute arm
Path {
transforms: Rotate {
angle: bind minutes * 6 - 90
}
fill: Color.BLACK
elements: [
MoveTo { x: 4, y: 4 },
ArcTo {
x: 4
y: -4
radiusX: 1
radiusY: 1
},
LineTo{ x: radius y: 0 },
]
}
]
}
]
};

Stage {
style: StageStyle.TRANSPARENT
title: bind combination
scene: bind scene
width: 240
height: 320
}
//}

And now you can see my name on the clock and the current date in the bar (bottom)