Simple examples with a rectangle (move, resize, bouncing, catch) for the compiler and interpreter.
RectMove.fx (Compiler)[]
import javafx.ext.swing.*;
import javafx.input.*;
import javafx.scene.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import java.lang.System;
var rect: Rectangle = Rectangle {
var dragStartX: Number;
var dragStartY: Number;
width : 100
height: 100
fill : Color.BLUE
cursor: Cursor.MOVE
onMousePressed: function (e: MouseEvent) {
dragStartX = rect.x;
dragStartY = rect.y;
}// onMousePressed
onMouseDragged: function (e: MouseEvent) {
rect.x = dragStartX + e.getDragX();
rect.y = dragStartY + e.getDragY();
}// onMouseDragged
}// Rectangle
SwingFrame {
closeAction: function(): Void {System.exit(0);}
title : 'Rectangle: Move with mouse'
background : Color.WHITE;
width : 600
height : 400
visible : true
content: Canvas {
content: rect
}// Canvas
}// SwingFrame
RectResize.fx (Compiler)[]
import javafx.ext.swing.*;
import javafx.input.*;
import javafx.scene.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import java.lang.System;
public class RectResize extends CustomNode {
public attribute x : Number;
public attribute y : Number;
public attribute width : Number;
public attribute height: Number;
public attribute startWidth : Number;
public attribute startHeight: Number;
public override function create(): Node {
// SE_RESIZE (bottom, right)
var grab: Rectangle = bind Rectangle {
width : 10
height: 10
x : bind x + width - grab.width
y : bind y + height - grab.height
fill : Color.RED
cursor: Cursor.SE_RESIZE
onMousePressed: function (e: MouseEvent) {
this.startWidth = this.width;
this.startHeight = this.height;
}// onMousePressed
onMouseDragged: function (e: MouseEvent) {
if(this.startWidth + e.getDragX() > 0) {
width = this.startWidth + e.getDragX();
}
if(this.startHeight + e.getDragY() > 0) {
height = this.startHeight + e.getDragY();
}
}// onMouseDragged
}// Rectangle (SE_RESIZE)
Group {
content: [Rectangle {
x : bind x
y : bind y
width : bind width
height: bind height
fill : Color.BLUE
}, // Rect
grab
]// content (Group)
}// Group
}//create()
}// RectResize
SwingFrame {
closeAction: function(): Void {System.exit(0);}
title : 'Rectangle: Resize rectangle with mouse'
background : Color.WHITE;
width : 600
height : 400
visible : true
content: Canvas {
content: [RectResize {
x : 250
y : 100
width : 100
height: 100
}// RectResize
]// content (Canvas)
}// Canvas
}// SwingFrame
RectBounce.fx (Compiler)[]
import javafx.ext.swing.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import javafx.animation.*;
import java.lang.System;
public class Bounce {
public attribute rect: Rectangle;
public attribute dx : Number = 3;
public attribute dy : Number = 3;
function move(): Void {
var x = rect.x + dx;
var y = rect.y + dy;
if(x < 0){x = 0; dx = -dx;}
if(y < 0){y = 0; dy = -dy;}
if(x > 200){x = 200; dx = -dx;}
if(y > 150){y = 150; dy = -dy;}
rect.x = x;
rect.y = y;
}// move()
}// Bounce
var rect = Bounce {
rect: Rectangle {
width : 50
height: 50
fill : Color.BLUE
}// Rectangle
}// Bounce
var t = Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: [KeyFrame{time : 1s / 25
action: function(): Void {rect.move();}}
]//keyFrames
}// Timeline
SwingFrame {
closeAction: function(): Void {System.exit(0);}
title : 'Rectangle: Bounce'
background : Color.WHITE;
width : 600
height : 400
visible : true
content: Canvas{
content: [Rectangle{width: 250 height: 200 stroke: Color.BLACK},
rect.rect]
}// Canvas
}// SwingFrame
t.start();
RectCatch.fx (Compiler)[]
import javafx.ext.swing.*;
import javafx.input.*;
import javafx.scene.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import javafx.animation.*;
import java.lang.System;
public class Bounce {
public attribute running: Boolean = true;
public attribute rect : Rectangle;
public attribute dx : Number = 3;
public attribute dy : Number = 3;
function move(): Void {
var x = rect.x + dx;
var y = rect.y + dy;
if(x < 0){x = 0; dx = -dx;}
if(y < 0){y = 0; dy = -dy;}
if(x > 200){x = 200; dx = -dx;}
if(y > 150){y = 150; dy = -dy;}
rect.x = x;
rect.y = y;
}// move()
}// Bounce
var rect: Bounce = Bounce {
rect: Rectangle {
cursor: Cursor.HAND
width : 50
height: 50
fill : Color.BLUE
onMousePressed: function(e: MouseEvent) {
rect.running = not rect.running;
if(rect.running){t.resume()}else{t.pause()};
}// onMousePressed
}// Rect
}// Bounce
var t = Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: [KeyFrame{time : 1s / 25
action: function(): Void {rect.move();}}
]//keyFrames
}// Timeline
SwingFrame {
closeAction: function(): Void {System.exit(0);}
title : 'Rectangle: Catch'
background : Color.WHITE;
width : 600
height : 400
visible : true
content: Canvas {
content: [Rectangle{width: 250 height: 200 stroke: Color.BLACK},
rect.rect]
}// Canvas
}// SwingFrame
t.start();
RectMove.fx[]
import javafx.ui.*;
import javafx.ui.canvas.*;
Frame {
title : 'Rectangle move'
width : 600
height : 400
content: Canvas {
content: [Rect {
var : self
width : 100
height: 100
fill : blue
cursor: MOVE
onMouseDragged: operation (e: CanvasMouseEvent) {
self.x += e.localDragTranslation.x;
self.y += e.localDragTranslation.y;
}// onMouseDragged
}// Rect
]// content (Canvas)
}// Canvas
visible: true
}// Frame
RectResize.fx[]
import javafx.ui.*;
import javafx.ui.canvas.*;
class RectResize extends CompositeNode {
public attribute x : Number;
public attribute y : Number;
public attribute width : Number;
public attribute height: Number;
}
function RectResize.composeNode() = Group {
content: [Rect {
x : bind x
y : bind y
width : bind width
height: bind height
fill : blue
}, // Rect
// SE_RESIZE (bottom, right)
Rect {var : self
width : 10
height: 10
x : bind x + width - self.width
y : bind y + height - self.height
fill : red
cursor: SE_RESIZE
onMouseDragged: operation (e: CanvasMouseEvent) {
if(width + e.localDragTranslation.x > 0) {
width += e.localDragTranslation.x;
}
if(height + e.localDragTranslation.y > 0) {
height += e.localDragTranslation.y;
}
}// onMouseDragged
}// Rect (SE_RESIZE)
]// content (Group)
};// Group
Frame {
title : 'Rectangle resize'
width : 600
height : 400
content: Canvas {
content: [RectResize {
x : 250
y : 100
width : 100
height: 100
}// RectResize
]// content (Canvas)
}// Canvas
visible: true
}// Frame
RectBounce.fx[]
import javafx.ui.*;
import javafx.ui.canvas.*;
class Bounce {
public attribute ticks : Number;
public attribute rect : Rect;
public attribute dx : Number;
public attribute dy : Number;
}// class Bounce
trigger on Bounce.ticks = newValue {
var x = rect.x + dx;
var y = rect.y + dy;
if(x < 0){x = 0; dx = -dx;}
if(y < 0){y = 0; dy = -dy;}
if(x > 200){x = 200; dx = -dx;}
if(y > 150){y = 150; dy = -dy;}
rect.x = x;
rect.y = y;
}// trigger on Bounce.ticks
var rect = Bounce {
dx: 3
dy: 3
rect: Rect {
width : 50
height: 50
fill : blue
}// Rect
}; // Bounce
Frame {
title : 'Rectangle bounce'
width : 300
height : 300
content: Canvas {
content: [Rect{width: 250 height: 200 stroke: black},
rect.rect]
}// Canvas
visible: true
}// Frame
// Start
rect.ticks = [1..1000] dur 1000 linear fps 50 continue if true;
RectCatch.fx[]
import javafx.ui.*;
import javafx.ui.canvas.*;
// Click in rectangle to stop/start moving
class Catch {
public attribute ticks : Number;
public attribute running: Boolean;
public attribute rect : Rect;
public attribute dx : Number;
public attribute dy : Number;
}// class Catch
trigger on Catch.running = newValue {
if(true == newValue) {
ticks = [1..500] dur 500 linear fps 50 continue if running;
}
}// trigger on Catch.running
trigger on Catch.ticks = newValue {
if(running) {
var x = rect.x + dx;
var y = rect.y + dy;
if(x < 0){x = 0; dx = -dx;}
if(y < 0){y = 0; dy = -dy;}
if(x > 200){x = 200; dx = -dx;}
if(y > 150){y = 150; dy = -dy;}
rect.x = x;
rect.y = y;
}// if(running)
}// trigger on Catch.ticks
var rect = Catch {
var : self
dx : 3
dy : 3
rect: Rect {
width : 50
height: 50
fill : blue
onMousePressed: operation(e: CanvasMouseEvent) {
self.running = not self.running;
}// onMousePressed
}// Rect
}; // Catch
Frame {
title : 'Rectangle catch'
width : 300
height : 300
content: Canvas {
cursor : HAND
content: [Rect{width: 250 height: 200 stroke: black},
rect.rect]
}// Canvas
visible: true
}// Frame
// Start
rect.running = true;