This is a presentation given in a Java Open day conducted by Trainologic.
Trainologic shares its training content for free at trainologic.org you can find many more free full course there.
2. JavaFX
• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.
copyright 2008 trainologic LTD
3. 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
4. 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
5. 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
6. JavaFX
What is JavaFX?
6
copyright 2008 trainologic LTD
7. JavaFX
• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.
copyright 2008 trainologic LTD
8. 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
9. JavaFX
The JavaFX Scripting Language
• Let’s dive into the water...
result = add(1, 2);
println(quot;1 + 2 = {result}quot;);
function add(numOne:Integer, numTwo:Integer):Integer {
var result = numOne + numTwo;
return result;
}
9
copyright 2008 trainologic LTD
10. 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
11. 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(quot;Name: {firstName} {lastName}quot;);
}
11
copyright 2008 trainologic LTD
13. 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
14. JavaFX
The JavaFX Scripting Language
• Sequences:
// Sequence Literal
var weekDays: String[] = [quot;Monquot;,quot;Tuequot;,quot;Wedquot;,quot;Thuquot;,quot;Friquot;];
// Sequence Concatenation
var days = [weekDays, [quot;Satquot;,quot;Sunquot;]];
// 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
15. 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(quot;Total is {total}.quot;);
15
copyright 2008 trainologic LTD
16. 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
17. 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
18. JavaFX
The JavaFX Scripting Language
• Binding an object, starting to get more interesting...
var myStreet = quot;1 Main Streetquot;;
var myCity = quot;Santa Claraquot;;
var myState = quot;CAquot;;
var myZip = quot;95050quot;;
def address = bind Address {
street: myStreet;
city: myCity;
state: myState;
zip: myZip;
};
println(quot;address.street == {address.street}quot;); // 1 Main Street
myStreet = quot;100 Maple Streetquot;;
println(quot;address.street == {address.street}quot;); // 100 Maple Street
18
copyright 2008 trainologic LTD
19. 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
20. 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
21. JavaFX
• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.
copyright 2008 trainologic LTD
22. 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
23. 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
24. 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
25. 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
26. JavaFX
User Interface
26
copyright 2008 trainologic LTD
28. JavaFX
User Interface
• Adding a small piece of code can totally change the
look.
Text{
content:quot;Hello Worldquot;
x:10
y:20
fill: Color.SEAGREEN
font:Font{
name:quot;Verdanaquot;
size:20
}
effect: Reflection {
fraction: 0.9
topOpacity: 0.9
topOffset: 0.1
}
}
28
copyright 2008 trainologic LTD
29. 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
30. JavaFX
User Interface
• There is much more to the User Interface in JavaFX:
Animations.
•
Transformations.
•
Layout
•
Media elements
•
More...
•
30
copyright 2008 trainologic LTD
31. JavaFX
• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.
copyright 2008 trainologic LTD
32. 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
33. 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
34. JavaFX
Deployment
• Web Start is using the JNLP, just like a Swing Web
Start.
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
<jnlp spec=quot;1.0+quot; codebase=quot;file:/HelloJavaFX/dist/quot; href=quot;HelloJavaFX.jnlpquot;>
<information>
<title>HelloJavaFX</title>
<vendor>galmarder</vendor>
<homepage href=quot;quot;/>
<description>HelloJavaFX</description>
<offline-allowed/>
<shortcut>
<desktop/>
</shortcut>
</information>
<resources>
<j2se version=quot;1.5+quot;/>
<extension name=quot;JavaFX Runtimequot; href=quot;http://dl.javafx.com/javafx-rt.jnlpquot;/>
<jar href=quot;HelloJavaFX.jarquot; main=quot;truequot;/>
</resources>
<application-desc main-class=quot;HelloWorldquot;/>
</jnlp>
34
copyright 2008 trainologic LTD