Introduction to JavaFX Script
Pages: 1, 2, 3, 4, 5, 6
JavaFX code can be integrated with HTML code using the JavaFX Label class. This class supports HTML and CSS in the same manner as a web application. Here is an example that renders an HTML table.
Listing 18
import javafx.ui.*;
import java.lang.System;
import javafx.ui.canvas.*;
class Partners {
attribute name: String;
attribute company: String;
attribute phone: String;
attribute e_mail: String;
attribute partners: Partners*;
}
var myPartners = Partners {
partners: [Partners{
name: "Mary J"
company: "Software ATV Inc."
phone: "0900090345"
e_mail: "maryj@yahoo.com"
},
Partners{
name: "Leona W"
company: "Winkle LTD"
phone: "090849435"
e_mail: "leonaw@yahoo.com"
},
Partners{
name: "Joe T"
company: "Press OJ"
phone: "340909879"
e_mail: "joet@yahoo.com"
}]
};
Frame {
content: Label {
text: bind "<html>
<h2 align='center'>- My Partners -</h2>
<table align='center' border='0' bgcolor='#BBAAEE'>
<tr bgcolor='#FFEE55'>
<td><b>Name</b></td>
<td><b>Company</b></td>
<td><b>Phone</b></td>
<td><b>E-mail</b></td>
</tr>
{
if (sizeof myPartners.partners == 0)
then "<tr bgcolor='#432211'><td colspan='8'><b>
I have no partners...</b></td></tr>"
else foreach (t in myPartners.partners)
"<tr bgcolor='#FF25AD'>
<td>{t.name}</td>
<td>{t.company}</td>
<td>{t.phone}</td>
<td>{t.e_mail}</td>
</tr>"
}
</table>
</html>"
}
visible: true
}
Figure 7. Running Listing 18
In the last section of this article we will see two applications that illustrate how easy it is to build complex animations using JavaFX. The first application simulates an analog clock. The design is based on four images animated with JavaFX code.
Listing 19
import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
import java.lang.System;
class Clock extends CompositeNode{
attribute seconds: Number+;
attribute minutes: Number+;
attribute hours: Number+;
operation startClock();
}
attribute Clock.seconds = 360;
attribute Clock.minutes = 360;
attribute Clock.hours = 360;
operation Clock.startClock() {
do{
while(true)
{
if(seconds>=360) {seconds = [0,6..360]
dur 60000 linear;}
if(minutes>=360) {minutes = 0; minutes = [0,6..360]
dur 3600000 linear;}
if(hours>=360) {hours = 0;hours = [0,6..360]
dur 43200000 linear;}
}
}
}
function Clock.composeNode() =
Group {
onMouseClicked: operation(e:CanvasMouseEvent) {
startClock();
}
transform: []
content:[ImageView {
image: Image { url: ".//app//clockempty.gif" }
},
ImageView {
transform: bind [translate(203,82),
rotate (seconds,2.5,125)]
image: Image { url: ".//app//l1.gif" }
antialias: true
},
ImageView {
transform: bind [translate(203,100),
rotate (minutes,2.5,107)]
image: Image { url: ".//app//l2.gif" }
antialias: true
},
ImageView {
transform: bind [translate(203,115),
rotate (hours,2.5,92)]
image: Image { url: ".//app//l3.gif" }
antialias: true
},
Circle {
cx: 205
cy: 205
radius: 13
fill: red
strokeWidth: 1
}]
};
Frame {
centerOnScreen: true
visible: true
height: 450
width: 450
title: "JavaFX - Clock"
onClose: operation() {System.exit(0);}
content: ScrollPane {
background: white
view: Canvas {
background: black
cursor: DEFAULT
content: Clock
}
}
}
Figure 8. Running Listing 19
Notice the dur (duration) operator. JavaFX provides this operator for creating animations. It is used to apply an array asynchronously to a time interval. Before returning an element from the array JavaFX will wait a time equal to the specified milliseconds. This process will be repeated until the whole elements are returned. There are four types of interpolations:
lineareaseineaseouteaseboth
By default it is a ease-in, ease-out combination.
