JavaFX
Rich Internet Application with Java
copyright 2008 trainologic LTD

JavaFX
• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.
copyright 2008 trainologic LTD

JavaFX
What is JavaFX?
• Started from the F3 project developed by Chris Oliver.
• Java’s Rich Internet Application Platform.
• Direct Competition with Adobe Flash/Flex/Air.
• Direct competition with MS Silverlite.
3
copyright 2008 trainologic LTD

JavaFX
What is JavaFX?
A platform and tools suite that offers distinct
advantages to Web developers, Web designers, and
Java developers who are building rich, connected
experiences.
4
copyright 2008 trainologic LTD

JavaFX
What is JavaFX?
• Composed of a simple scripting language, combined
with enhanced graphics abilities.
• Tools that help designers and developers work closer
together.
• Runs on the JVM.
• Deploys easily to the desktop, browser.
• Future releases are planed to support Mobile Phones
and TV.
5
copyright 2008 trainologic LTD

JavaFX
What is JavaFX?
6
copyright 2008 trainologic LTD

JavaFX
• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• As the name suggests, it is a scripting language.
• Unlike many other scripting languages, it is a compiled
language.
• As you probably guessed, it is compiling to Java
Classes.
• Unlike Java, it has a handful of tricks that makes the
development really easy... We will cover some of them.
8
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• Let’s dive into the water...
result = add(1, 2);
println(\"1 + 2 = {result}\");
function add(numOne:Integer, numTwo:Integer):Integer {
var result = numOne + numTwo;
return result;
}
9
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• So... What do we have here?
• Code out of a class.
• Untyped variables.
• Special String literal.
• There is much more...
10
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• Declaring a class:
class Customer {
var firstName: String;
var lastName: String;
var phoneNum: String;
var address: Address;
function printName() {
println(\"Name: {firstName} {lastName}\");
}
11
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• Object literals:
def customer = Customer {
firstName: \"John\";
lastName: \"Doe\";
phoneNum: \"(408) 555-1212\";
address: Address {
street: \"1 Main Street\";
city: \"Santa Clara\";
state: \"CA\";
zip: \"95050\";
}
}
12
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• The basic data types:
String - “Hello”, ‘Hello’, “Hello {expression}”
•
Number - 4.2
•
Integer - 3
•
Boolean - true, false
•
Duration - 10ms, 5s, 3m, 1h
•
Void - just like Java, but written with upper-case.
•
null - just the same as in Java.
•
13
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• Sequences:
// Sequence Literal
var weekDays: String[] = [\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"];
// Sequence Concatenation
var days = [weekDays, [\"Sat\",\"Sun\"]];
// Sequence ranges
var nums = [1..100]
var nums = [1..100 step 2] // 1, 3, 5, ...99
// Sequence Querying
var numsGreaterThanTwo = nums[n | n > 2]; // 3, 4, 5 ...100
14
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• Block Expression - Returns the value of the last
expression in the block.
var nums = [5, 7, 3, 9];
var total = {
var sum = 0;
for (a in nums) { sum += a };
sum;
}
println(\"Total is {total}.\");
15
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• Another cool feature in JavaFX is data binding.
• Data binding means binding the value of one variable
to another.
• When the first changes it changes the second as well.
• Objects and methods can also be bound.
• Let’s take a look...
16
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• Binding two variables, not so impressive...
var x = 0;
def y = bind x;
x = 1;
println(y); // y now equals 1
x = 47;
println(y); // y now equals 47
17
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• Binding an object, starting to get more interesting...
var myStreet = \"1 Main Street\";
var myCity = \"Santa Clara\";
var myState = \"CA\";
var myZip = \"95050\";
def address = bind Address {
street: myStreet;
city: myCity;
state: myState;
zip: myZip;
};
println(\"address.street == {address.street}\"); // 1 Main Street
myStreet = \"100 Maple Street\";
println(\"address.street == {address.street}\"); // 100 Maple Street
18
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• Binding and functions:
var scale = 1.0;
bound function makePoint(xPos : Number, yPos : Number) : Point {
Point {
x: xPos * scale
y: yPos * scale
}
}
var myX = 3.0;
var myY = 3.0;
def pt = bind makePoint(myX, myY);
println(pt.x); // 3
myX = 10.0;
println(pt.x); // 10
scale = 2.0;
println(pt.x); // 20
19
copyright 2008 trainologic LTD

JavaFX
The JavaFX Scripting Language
• There is more:
Replace Triggers
•
Special Access Modifiers - public-read, public-init...
•
Special sequences tricks.
•
Integration with Java classes.
•
Running from a Java application.
•
more...
•
20
copyright 2008 trainologic LTD

JavaFX
• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.
copyright 2008 trainologic LTD

JavaFX
User Interface
• JavaFX has a very strong support for building rich user
interfaces.
• It has a very strong graphics engine which is capable of
taking advantage of hardware graphics accelerators.
• All Swing components are supported.
• A strong API for 2D painting using the JavaFX scripting
language.
• Support for a wide variety of media formats.
22
copyright 2008 trainologic LTD

JavaFX
User Interface
• JavaFX supports a streamlined development model
from the designer to the developer.
• JavaFX comes with a set of plugins that enables the
export of objects from Adobe Photoshop and Illustrator
directly to JavaFX.
23
copyright 2008 trainologic LTD

JavaFX
User Interface
• Unlike its competitors, JavaFX doesn’t use XML to
represent the UI.
• Instead, JavaFX uses the scripting language to define a
composite (tree like) structure of components.
• We call this structure, “The Scene Graph”.
24
copyright 2008 trainologic LTD

JavaFX
User Interface
• The main nodes in every JavaFX “tree”:
Stage - The window hosting the application.
•
Scene - The canvas, where the components show.
•
• All the components and graphic elements are put into
the Scene.
25
copyright 2008 trainologic LTD

JavaFX
User Interface
26
copyright 2008 trainologic LTD

JavaFX
User Interface
Stage{
title: \"Hello World\"
width: 250
height: 50
scene:Scene{
content: [
Text{
content:\"Hello World\"
x:10
y:12
font:Font{
name:\"Verdana\"
size:12
}
}
]
}
}
27
copyright 2008 trainologic LTD

JavaFX
User Interface
• Adding a small piece of code can totally change the
look.
Text{
content:\"Hello World\"
x:10
y:20
fill: Color.SEAGREEN
font:Font{
name:\"Verdana\"
size:20
}
effect: Reflection {
fraction: 0.9
topOpacity: 0.9
topOffset: 0.1
}
}
28
copyright 2008 trainologic LTD

JavaFX
User Interface
• Adding behavior is super easy...
Text{
...
onMouseEntered: function (evt:MouseEvent) {
evt.node.effect = Reflection {
fraction: 0.9
topOpacity: 0.9
topOffset: 0.1
}
}
}
29
copyright 2008 trainologic LTD

JavaFX
User Interface
• There is much more to the User Interface in JavaFX:
Animations.
•
Transformations.
•
Layout
•
Media elements
•
More...
•
30
copyright 2008 trainologic LTD

JavaFX
• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.
copyright 2008 trainologic LTD

JavaFX
Deployment
• JavaFX supports the following deployment modes:
Standard Execution.
•
Web Start.
•
In Browser.
•
Mobile - Based on a MIDlet. Currently in Beta.
•
32
copyright 2008 trainologic LTD

JavaFX
Deployment
• Standard execution is a regular process execution using
the javafx executable.
.../bin/javafx -classpath MyJFXApplication.jar myPackage.myMainScript.class
33
copyright 2008 trainologic LTD

JavaFX
Deployment
• Web Start is using the JNLP, just like a Swing Web
Start.
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<jnlp spec=\"1.0+\" codebase=\"file:/HelloJavaFX/dist/\" href=\"HelloJavaFX.jnlp\">
<information>
<title>HelloJavaFX</title>
<vendor>galmarder</vendor>
<homepage href=\"\"/>
<description>HelloJavaFX</description>
<offline-allowed/>
<shortcut>
<desktop/>
</shortcut>
</information>
<resources>
<j2se version=\"1.5+\"/>
<extension name=\"JavaFX Runtime\" href=\"http://dl.javafx.com/javafx-rt.jnlp\"/>
<jar href=\"HelloJavaFX.jar\" main=\"true\"/>
</resources>
<application-desc main-class=\"HelloWorld\"/>
</jnlp>
34
copyright 2008 trainologic LTD

JavaFX
Deployment
• In-Browser - The good old Applet...
<script src=\"http://dl.javafx.com/dtfx.js\"></script>
<script>
javafx(
{
archive: \"HelloJavaFX.jar\",
draggable: true,
width: 200,
height: 200,
code: \"HelloWorld\",
name: \"HelloJavaFX\"
}
);
</script>
35
copyright 2008 trainologic LTD

JavaFX
Deployment
• Mobile - There is a Mobile emulator, currently in beta.
36
copyright 2008 trainologic LTD

Thank You
Q&A
Gal Marder
CEO, Trainologic
copyright 2008 trainologic LTD