JavaFX Script Basics II
JavaFX Script is a highly productive scripting language that enables
content developers to create rich media and content for deployment on
Java environments.
JavaFX Script is a declarative, statically typed programming language.
It has first-class functions, declarative syntax, list-comprehensions,
and incremental dependency-based evaluation. It can make direct calls
to JavaAPIs that are on the platform. Since JavaFX Script is statically
typed, it has the same code structuring, reuse, and encapsulation
features (such as packages, classes, inheritance, and separate
compilation and deployment units) that make it possible to create and
maintain very large programs using Java technology.
In this lab, you are going to learn basic syntaxt of JavaFX script. The
advanced features of JavaFX Script such as animation, media will be
covered in other labs.
Expected duration: 60 minutes
(excluding homework)
Software Needed
Before you begin, you need to install the following software on your
computer.
- 5704_javafx_basics2.zip (download)
- It contains this document and the lab contents
- Download it and unzip in a directory of your choice
OS platforms you can use
Change Log
- August 19th, 2008: Created
Things to be done (by the Sang Shin)
Lab Exercises
Exercise 0: Install JavaFX Plug-in to
NetBeans IDE
If you have not installed JavaFX
Plug-in to the NetBeans IDE, you will need it before you proceed.
You will need an internet connection to access the Update center.
(0.1) Install JavaFX
Plug-in to NetBeans IDE
Exercise 1: Build "HelloWorld" JavaFX
Application
In this exercise, you are going to
build a very simple "HelloWorld" JavaFX Application.
(1.1)
Create a new JavaFX Application project
(1.2)
Use Preview
1. Enable Preview.
(1.3)
Add a Text to the Frame
1. Drag Text component from the palette.
(1.4)
Open JavaFX documentation
(1.5)
Add an attribute to the Text
1. Add
fill: Color.BLUE
attrubute to the Text.
(1.6)
Add a circle to the frame
(1.7)
Add an effect to a Circle component
1. Modify Main.fx as shown below.
The code fragments that need to be added are highlighted in bold and
red-colored font. The added code adds the lighting effect to the
circle that is just added.
package javafxhelloworld;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.text.Text;
import javafx.scene.Font;
import javafx.scene.FontStyle;
import javafx.scene.paint.Color;
import javafx.scene.geometry.Circle;
import
javafx.scene.effect.Lighting;
import
javafx.scene.effect.light.DistantLight;
/**
* @author sang
*/
// place your code here
Frame {
title: "HelloWorldJavaFX"
width: 400
height: 100
closeAction: function() {
java.lang.System.exit( 0 );
}
visible: true
stage: Stage {
content: [Text {
font: Font {
size: 24
style: FontStyle.PLAIN
}
x: 10, y: 30
content: "HelloWorld"
},
Circle {
centerX: 200, centerY: 30
radius: 30
fill: Color.PINK
effect: Lighting {
light: DistantLight {
azimuth: 60
}
}
}]
}
}
|
2. Observe the lighting effect to the circle in the preview area.
return to top of the
exercise
(1.8)
Study the API of the effect
(1.9)
Add an action
1. Drag onMousePressed under Actions section of the Palette to
the code as shown below.
2. Perform formatting of the code. (This is an optional step.)
3. Modify the Main.fx code as shown
below. The code fragements that need to be added are highlighted
in bold and red-colored font. The added code basically switch on
and off the lighting effect to the circle everytime you click it.
package javafxhelloworld;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.text.Text;
import javafx.scene.Font;
import javafx.scene.FontStyle;
import javafx.scene.paint.Color;
import javafx.scene.geometry.Circle;
import javafx.scene.effect.Lighting;
import javafx.scene.effect.light.DistantLight;
import javafx.input.MouseEvent;
/**
* @author sang
*/
// place your code here
Frame {
title: "HelloWorldJavaFX"
width: 400
height: 100
closeAction: function() {
java.lang.System.exit( 0 );
}
visible: true
var counter:Integer
= 0
stage: Stage {
content: [
Text
{
font: Font {
size: 24
style: FontStyle.PLAIN
}
x: 10, y: 30
content: "HelloWorld"
},
Circle {
centerX: 200, centerY: 30
radius: 30
fill: Color.PINK
effect: Lighting {
light: DistantLight {
azimuth: 60
}
}
onMousePressed: function( e: MouseEvent ):Void {
if (counter mod 2 == 0) {
e.node.effect = null
} else {
e.node.effect = Lighting {
light: DistantLight {
azimuth: 60
}
}
}
counter++
}
}]
}
}
|
4. Click the circle in the preview area.
5. Observe that the lighting effect is gone.
6. Click it again to see the lighting effect.
Solution
The solution of this exercise is provided as a ready-to-build NetBeans
project - <LAB_UNZIP_DIR>/javafx_basics2/samples/JavaFXHelloWorld1.
You should be able to build and run the project.
Summary
In this exercise, you have learned how
to build a simple JavaFX application using NetBeans.
return
to the top
Exercise 2: Add Binding
In this exercise, you are going to
learn how to use binding capability of JavaFX.
(2.1)
Bind Text component to a message variable
1. Modify Main.fx as shown below.
package javafxhelloworld;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.text.Text;
import javafx.scene.Font;
import javafx.scene.FontStyle;
import javafx.scene.paint.Color;
import javafx.scene.geometry.Circle;
import javafx.scene.effect.Lighting;
import javafx.scene.effect.light.DistantLight;
import javafx.input.MouseEvent;
/**
* @author sang
*/
// place your code here
Frame {
var message:String =
"Good morning!"
title: "HelloWorldJavaFX"
width: 400
height: 100
closeAction: function() {
java.lang.System.exit( 0 );
}
visible: true
var counter:Integer = 0
stage: Stage {
content: [
Text
{
font: Font {
size: 24
style: FontStyle.PLAIN
}
x: 10, y: 30
content: bind
message
},
Circle {
centerX: 200, centerY: 30
radius: 30
fill: Color.PINK
effect: Lighting {
light: DistantLight {
azimuth: 60
}
}
onMousePressed: function( e: MouseEvent ):Void {
if (counter mod 2 == 0) {
e.node.effect = null
} else {
e.node.effect = Lighting {
light: DistantLight {
azimuth: 60
}
}
}
counter++
}
}]
}
}
|
(2.2)
Set the variable via action
package javafxhelloworld;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.text.Text;
import javafx.scene.Font;
import javafx.scene.FontStyle;
import javafx.scene.paint.Color;
import javafx.scene.geometry.Circle;
import javafx.scene.effect.Lighting;
import javafx.scene.effect.light.DistantLight;
import javafx.input.MouseEvent;
/**
* @author sang
*/
// place your code here
Frame {
var message:String = "Good morning!"
title: "HelloWorldJavaFX"
width: 400
height: 100
closeAction: function() {
java.lang.System.exit( 0 );
}
visible: true
var counter:Integer = 0
stage: Stage {
content: [
Text
{
font: Font {
size: 24
style: FontStyle.PLAIN
}
x: 10, y: 30
content: bind message
},
Circle {
centerX: 200, centerY: 30
radius: 30
fill: Color.PINK
effect: Lighting {
light: DistantLight {
azimuth: 60
}
}
onMousePressed: function( e: MouseEvent ):Void {
if (counter mod 2 == 0) {
e.node.effect = null;
message
="Coffee"
} else {
e.node.effect = Lighting {
light: DistantLight {
azimuth: 60
}
}
message
= "Tea"
}
counter++
}
}]
}
}
|
Solution
The solution of this exercise is provided as a ready-to-build NetBeans
project - <LAB_UNZIP_DIR>/javafx_basics2/samples/JavaFXHelloWorld2.
You should be able to build and run the project.
Summary
In this exercise, you have
added binding feature to the application.
Exercise 3: Use a Model class
In this exercise, you are going to
create a Model class called HelloWorldModel, which captures message and
color attributes.
(3.1)
Create a Model class for messages
package javafxhelloworld;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.text.Text;
import javafx.scene.Font;
import javafx.scene.FontStyle;
import javafx.scene.paint.Color;
import javafx.scene.geometry.Circle;
import javafx.scene.effect.Lighting;
import javafx.scene.effect.light.DistantLight;
import javafx.input.MouseEvent;
/**
* @author sang
*/
// Create
a model class
public
class HelloWorldModel{
public attribute message:String;
public attribute color:Color;
}
// place your code here
Frame {
var message_model =
HelloWorldModel{
message: "Sang"
color: Color.AQUA
}
title: "HelloWorldJavaFX"
width: 400
height: 100
closeAction: function() {
java.lang.System.exit( 0 );
}
visible: true
var counter:Integer = 0
stage: Stage {
content: [
Text
{
font: Font {
size: 24
style: FontStyle.PLAIN
}
x: 10, y: 30
content: bind message_model.message
fill: bind message_model.color
},
Circle {
centerX: 200, centerY: 30
radius: 30
fill: Color.PINK
effect: Lighting {
light: DistantLight {
azimuth: 60
}
}
onMousePressed: function( e: MouseEvent ):Void {
if (
counter mod 2 == 0) {
e.node.effect = null;
message_model.message ="Banana";
message_model.color = Color.YELLOW;
} else {
e.node.effect = Lighting {
light: DistantLight {
azimuth: 60
}
}
message_model.message ="Apple";
message_model.color = Color.RED;
}
counter++
}
}]
}
}
|
(3.2)
Create a Model class for effect
package javafxhelloworld;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.text.Text;
import javafx.scene.Font;
import javafx.scene.FontStyle;
import javafx.scene.paint.Color;
import javafx.scene.geometry.Circle;
import javafx.scene.effect.Lighting;
import javafx.scene.effect.light.DistantLight;
import javafx.input.MouseEvent;
/**
* @author sang
*/
// Create a model class for messages
public class HelloWorldModel{
public attribute message:String;
public attribute color:Color;
}
// Create
a model class for effects
public
class HelloWorldEffectModel{
public attribute my_lighting:Lighting;
}
// place your code here
Frame {
var message_model = HelloWorldModel{
message: "SangShin"
color: Color.AQUA
}
var lighting1 = Lighting {
light: DistantLight {
azimuth: 60
}
}
var lighting2 = Lighting {
light: DistantLight {
azimuth: 240
}
}
var effect_model = HelloWorldEffectModel{
my_lighting: lighting1
}
title: "HelloWorldJavaFX"
width: 400
height: 100
closeAction: function() {
java.lang.System.exit( 0 );
}
visible: true
var counter:Integer = 0
stage: Stage {
content: [
Text
{
font: Font {
size: 24
style: FontStyle.PLAIN
}
x: 10, y: 30
content: bind message_model.message
fill: bind message_model.color
},
Circle {
centerX: 200, centerY: 30
radius: 30
fill: Color.PINK
//effect:
Lighting {
// light: DistantLight {
// azimuth: 60
// }
//}
effect:
bind effect_model.my_lighting
onMousePressed: function( e: MouseEvent ):Void {
if (counter mod 2 == 0) {
//e.node.effect = null;
effect_model.my_lighting = lighting2;
message_model.message ="Banana";
message_model.color = Color.YELLOW;
} else {
//e.node.effect =
Lighting {
// light: DistantLight {
// azimuth: 60
// }
//}
effect_model.my_lighting = lighting1;
message_model.message ="Apple";
message_model.color = Color.RED;
}
counter++
}
}]
}
}
|
Homework
Exercise (for people
who
are taking Sang Shin's "JavaFX Programming online course")
<to
be provided>
