Introduction to Java FX

JavaFX
Rich Internet Application with Java

copyright 2008 trainologic LTD

JavaFX

• Introduction.
• The Scripting Language.
• UI - The Scene Graph.
• Deployment.


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

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

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

JavaFX

What is JavaFX?

6

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

JavaFX


• 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

JavaFX


• So... What do we have here?
• Code out of a class.
• Untyped variables.
• Special String literal.
• There is much more...

10

JavaFX


• 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

JavaFX


• Object literals:

def customer = Customer {
firstName: quot;Johnquot;;
lastName: quot;Doequot;;
phoneNum: quot;(408) 555-1212quot;;
address: Address {
street: quot;1 Main Streetquot;;
city: quot;Santa Claraquot;;
state: quot;CAquot;;
zip: quot;95050quot;;
}
}

12

JavaFX


• 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

JavaFX


• 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

JavaFX


• 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

JavaFX


• 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

JavaFX


• 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

JavaFX


• 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

JavaFX

• 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

JavaFX

• 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

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

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

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

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

JavaFX

User Interface

26

JavaFX

User Interface

Stage{
title: quot;Hello Worldquot;
width: 250
height: 50

scene:Scene{
content: [
Text{
content:quot;Hello Worldquot;
x:10
y:12
font:Font{
name:quot;Verdanaquot;
size:12
}
}
]

}
}

27

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

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

JavaFX

User Interface

• There is much more to the User Interface in JavaFX:
Animations.
•

Transformations.
•

Layout
•

Media elements
•

More...
•

30

JavaFX

Deployment

• JavaFX supports the following deployment modes:
Standard Execution.
•

Web Start.
•

In Browser.
•

Mobile - Based on a MIDlet. Currently in Beta.
•

32

JavaFX

Deployment

• Standard execution is a regular process execution using
the javafx executable.

.../bin/javafx -classpath MyJFXApplication.jar myPackage.myMainScript.class

33

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

JavaFX

Deployment

• In-Browser - The good old Applet...

<script src=quot;http://dl.javafx.com/dtfx.jsquot;></script>
<script>
javafx(
{
archive: quot;HelloJavaFX.jarquot;,
draggable: true,
width: 200,
height: 200,
code: quot;HelloWorldquot;,
name: quot;HelloJavaFXquot;
}
);
</script>

35

JavaFX

Deployment

• Mobile - There is a Mobile emulator, currently in beta.

36

Thank You

Q&A
Gal Marder

CEO, Trainologic


Introduction to Java FX

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Mehr von Gal Marder

Mehr von Gal Marder (10)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introduction to Java FX