Tuesday, February 10, 2009

JavaFX Scale and Rotate About Center

The transforms property of a JavaFX scene node use the default pivot point 0,0 for scaling or rotating. This means scaling a rectangle grows it to the right and down.

If you want to scale or rotate about the center you can use the scaleX, scaleY and rotate properties of a node which use the center point of the node as default pivot point:

The following example shows an animation of a rectangle growing and rotating about its center.

var scale : Number = 1.0;
var angle : Number = 10;
var animation = Timeline {
repeatCount: 50
keyFrames: [
KeyFrame {
time: 0.2s
canSkip: false
action: function() {
scale += 0.1;
angle += 5;
}
}
]
}

Stage {
title: "Scale Rectangle Over Center"
width: 300
height: 300
scene: Scene {
content: [
Rectangle {
translateX: 10,
translateY: 10,
scaleX: bind scale,
scaleY: bind scale,
rotate: bind angle,
width: 140,
height: 90
fill: Color.BLACK
}
]

}
}

animation.play()

Monday, February 9, 2009

Dynamically Adding UI Elements to JavaFX Scene Content

JavaFX is nice to statically describe your UI elements. But what if you have to add something to the UI dynamically. E.g. The user presses a button and a new text should be added to the scene.

Well this is easy too. Just create the new element in the action code of the button and add it to the content using JavaFX's sequential (list) handling operations.

Here is an example: (Note: You have to create a variable for the stage in order to be able to access it).

var myX : Number = 50;
var myY : Number = 50;

var stage : Stage = Stage {
title: "Add text"
width: 250
height: 250
scene: Scene {
content: [
SwingButton {
text: "Add char"
action: function() {
var myChar = Text {
x: myX += 10,
y: myY += 10
content: "A"
}
insert myChar into
stage.scene.content;
}
}
]
}
}

Monday, February 2, 2009

JavaFX onKeyTyped for a Scene

keyTyped events are easy to use in JavaFX. Just add a function to onKeyTyped on a node and this node will be notified if a key is typed.

But what if you start with an empty scene. There are no nodes which can receive the event. And there is no onKeyTyped for a scene or stage.

I found two solutions for this problem. Both are some kind of a hack but they work:

1. Create a CustomNode without any graphics and just a onKeyTyped and add this to the scene content.

2. (my preferred solution) Use a Group which is empty at the beginning and later contains the scenes nodes. Groups do have onKeyTyped.

Here is an example:

var stage = Stage {
title: "Application title"
fullScreen: true
scene: Scene {
content: [
Group {
content: [
]
onKeyTyped: function( e: KeyEvent) : Void {
System.out.println("Hello");
}
}
]
}
}

JavaFX fullScreen

Writing a JavaFX full screen application is easy. Just set the fullScreen property of a Stage to true.

Stage {
title: "Application title"
fullScreen: true
scene: Scene {
content: [
SwingButton {
text: "Exit"
action: function() {
System.exit(0)
}
}
]
}
}
There are some problems with that documented in the documentation of the fullScreen property.

Setting the property to true tries to set the application to full screen using various techniques. All of which you would have to write on your own if you want to support multiple platforms.

The consequence of that is that in the current version of JavaFx you can not switch an application to full screen and then switch it back again.

There is a workaround for that mentioned in the documentation of the fullScreen property. You have to use two stages. One for full screen one for windowed and switch between these two.

I have not tried out that but it seams to be easy.