Monday, December 01, 2008

Scene to Scene in JavaFX

Any middle or big application demands to change one window to other at some point of time. A window type of thing in JavaFX is represented by Scene and its each to switch between scene or to run multiple scenes.


Here is a small application in which clicking on image will put you in another window, written "Hello World"



package sample6;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;

var s_new:Scene;
var s = Scene {
content: [
Text {
font: Font {
size: 24
}
x: 10,
y: 30
content: "HelloWorld"
}
]
};

var s1 = Scene {
content: [
ImageView {
image: Image {
url: "{__DIR__}im2.PNG"
}
onMouseClicked: function( e: MouseEvent ):Void {
s_new = s;
}
}
]
};

s_new = s1;
Stage {
title: "Application title"
width: 250
height: 280
scene: bind s_new
}

So, its simple, on mouse click, I have bind a scene variable with a new scene. That's it !



7 comments:

tlj said...

Hi,
I´m developing a system that use a lot of scenes. The scenes controller is working in a desktop mode but when is running as applet the scenes aren´t working.

This happened too with your example.

There are other persons with the same problem

http://forums.sun.com/thread.jspa?threadID=5372082&tstart=0

Do you know what is happening ?

Best regards

Vaibhav said...

you can use a different way. that is adding and removing items of the window dynamically at runtime. See my physics apps here : http://blogs.sun.com/vaibhav

it will give you a idea, if you want source code please let me know.

tlj said...

Thank´s for advice.

Follow a simple example

import javafx.ext.swing.SwingButton;
import javafx.ext.swing.SwingTextField;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.Scene;
import javafx.stage.Stage;

def group1: Group = Group {
content: [
SwingTextField{
translateY: 40
text: "First"
width:300;
}
SwingButton{
text: "Show second group"
translateX: 10;
translateY: 20;
onMouseClicked: function(evt : MouseEvent){
showGroup(group2);
}
}
]
}

def group2: Group = Group {
content: [
SwingTextField{
translateY: 10
text: "Second"
width:300;
}
SwingButton{
text: "Show first group"
translateX: 30;
translateY: 40;
onMouseClicked: function(evt : MouseEvent){
showGroup(group1);
}
}
]
}

function showGroup(group : Group) : Void {
delete stg.scene.content;
insert group into stg.scene.content;
}

var stg = Stage {
title: "Swap groups."
width: 250
height: 280
scene: Scene{
content: [group1]
}
}

Vaibhav said...

yes, this looks correct :)

diego.benna said...

You are GREATE Vaibhav!

ruzette said...

Yey, Thanks for this. :) I've been looking for something like this code in my project. ;)

Thanks again!

Siva Prasad said...

Hi Vaibhav,

I am developing an application for mobile. I have to display a table with different data. When user clicks on button (for ex: "vegetarian") the table have to show vegetarian items in the next scene. In the same way if he chooses Non-Vegetarian, the table have to show Non-Veg items in the next scene. But the problem is the scene is not getting refreshes with latest data, it shows the previous data only. How to refresh the scene to display latest data.