You are on page 1of 48

1

JavaFX
The Future of Mobile Applications

Ophir Radnitz
Consultant, AlphaCSP
Agenda
• Java’s story on the client
• JavaFX Script
• A Quick Dive Into JavaFX
• JavaFX Mobile
• Looking Ahead
• Demo

3
Agenda
• Java’s story on the client
• JavaFX Script
• A Quick Dive Into JavaFX
• JavaFX Mobile
• Looking Ahead
• Demo

4
The RiA Arena: Scene
• Universal availability
• Vector graphics and animation
• Multimedia
• Data & services consumption
• Responsiveness
• Components & widgets
• Access to local resources

5
The RiA Arena: Players
• Adobe AIR
– Formerly Apollo
– Flex, Flash

• Microsoft SilverLight
– Flash competitor

• Ajax
• OpenLaszlo
6
Current Java UI Availability
• Swing
– Desktop deployment
– WebStart
– Applets

• Web

• Phonetop

7
JavaFX, The Big Picture

8
Recent Developments
• Performance
– Hardware acceleration
– Painters caching
• Graphics
– Subpixel anti-aliasing
– Multi-stop gradients

• Animation (the Timing Framework)

• Beans binding
9
The Consumer JRE
• QuickStarter
• Java Kernel
• Deployment Toolkit
• Installer Improvements
• Nimbus Look & Feel
• Graphic acceleration for Windows

10
Agenda
• Java’s story on the client
• JavaFX Script
• A Quick Dive Into JavaFX
• JavaFX Mobile
• Looking Ahead
• Demo

11
What is JavaFX Script?
• DSL for UI
– Designed for rich content application

• Renders as Swing & Java 2D

• Robust & safe

• Cool & fun

12
JavaFX Script History

• Announced at JavaOne 2007


– Formerly known as F3 (Forms Follow Function)
– Developed by Chris Oliver

• Available in all near-future environments

13
JavaFX Script Evolution
• Originally resembled a modeling language
– UML-like notations
– Attribute cardinality

• Query language added


– Features from XQuery
– Closures similar to ECMAScript

14
Language Features
• Statically typed
• Declarative syntax
• First-class functions (closures)
• List comprehensions
• Encapsulation features
– Classes , packages
– Inheritance
– Separate compilation & deployment units
15
Available Tools

• JavaFX Pad

• JavaFX Builder

• IDE plugins
– IntelliJ IDEA (IntelliJFX)
– NetBeans (JavaFX)
– Eclipse (JavaFX)
16
Agenda
• Java’s story on the client
• JavaFX script
• A Quick Dive Into JavaFX
• JavaFX Mobile
• Looking Ahead
• Demo

17
Basic Stuff
var s = “JavaEdge";
s.toUpperCase(); -> “JAVAEDGE”
s.substring(1); -> “ avaEdge "
var n = 1.5;
n.intValue(); ->1
(1.5).intValue(); -> 1
s.substring(n); -> " avaEdge "
var b = true;
b instanceof Boolean; -> true

var nums : Number* = [1,2,3];


The same
var nums = [1,2,3];

18
Collections (1 of 4)
var weekDays = ["Sun“,"Mon","Tue","Wed","Thur"];
var days = [weekDays, ["Fri“,"Sat”]];

var n = sizeof days; -> n = 7


days[1] -> “Mon”

function factor(n) {
return product([1..n]);
}

var result = sum([1,3..100]);

19
Collections (2 of 4)
var numbers = [1,2,3,4];

numbers[. > 2]; -> [3, 4]


numbers[indexof . > 1]; -> [3, 4]
numbers[n|n > 2]; -> [3, 4]

[] == null -> true


sizeof null -> 0

20
Collections (3 of 4)
var x = [1,2,3];

insert 12 into x; -> [1,2,3,12]


insert 10 as first into x; -> [10,1,2,3,12]
insert [88,100] as last into x; -> [10,1,2,3,12,88,100]

var x = [1,2,3];

insert 10 after x[. == 10]; -> [1,2,3,10]


insert 12 before x[1]; -> [1,12,2,3,10]
insert 13 after x[. == 2]; -> [1, 12, 2, 13, 3, 10];

21
Collections (4 of 4)
var x = [1,2,3];

insert 10 into x; -> [1,2,3,10]


insert 12 before x[1]; -> [1,12,2,3,10]
delete x[. == 12]; -> [1,2,3,10]
delete x[. >= 3]; -> [1,2]
insert 5 after x[. == 1]; -> [1,5,2];
insert 13 as first into x; -> [13, 1, 5, 2];
delete x; -> []

22
List Comprehensions
select n*n from n in [1..100]

function factors(n) {
return select i from i in [1..n/2] where n % i == 0;
}

23
Formatting
import java.util.Date;

var date = new Date();


date format as <<dd/MM/yyyy>>; -> '22/11/2007‘

100.886 format as <<%f>>; -> '100.886000‘


31.intValue() format as <<%02X>>; -> '1F‘
0.00123 format as <<00.###E0>>; -> '12.3E-4'

24
Operators
var x = 2; import java.lang.Math;
var y = 4; Math.max(x, y); -> 4
var a = true;
var b = false; sizeof [x,y]; -> 2
[x,y][indexof . == 0]; -> 2
x == y; -> false
x <> y; -> true if a then x else y; -> 2
a and b; -> false
a or b; -> true x instanceof Number; -> true
not a; -> false

25
Classes
class Person {
attribute name: String;
attribute parent: Person inverse Person.children;
attribute children: Person* inverse Person.parent;

function getFamilyIncome(): Number;


function getNumberOfChildren(): Number;
operation marry(spouse: Person);
}

26
Objects
var avi = Person {
name: “Avi"
children: [Person {
name: “Itzik"
},
Person {
name: “Esav"
}]
};

27
Objects (with variables)
var avi = Person {
var: me
name: “Avi“
var child1 = Person {
name: “Itzik“
parent: me
}
var child2 = Person {
name: “Esav“
}
children: [child1, child2]
};

28
Attributes (properties)
class X {
attribute a: Number;
attribute b: Number;
}

attribute X.a = 5;
attribute X.b = 2;

var x = new X();


x.a; -> 5
x.b; -> 2

29
Binding
class X {
attribute a: Number;
attribute b: Number;
attribute c: Number;
}
attribute X.a = 10;
attribute X.b = bind a + 10;
attribute X.c = bind b + 10;

var x = new X();


x.a; -> 10
x.b; -> 20
x.c; -> 30

30
Triggers
class X {
attribute numbers: Number*;
}
trigger on new X {
insert [3,4] into this. numbers;
}

trigger on X.nums[oldValue] = newValue {


System.out.println("just replaced {oldValue} with {newValue} at
position {indexof newValue} in X.nums");
}

31
UI
import javafx.ui.*;

Frame {
title: "Welcome to JavaEdge"
width: 200
height: 50
content: Label {
text: “Catching up on JavaFX"
}
visible: true
}

32
Animation
class Cell extends Rect {
attribute red : Number;
attribute col : Color;
}

attribute Cell.fill = Color {


red: bind red,
green:0, blue:0, opacity: 1.0
};

attribute Cell.onMouseEntered = operation(e) {


red = [1.00, 0.95 .. 0.00] dur 5000
};

33
Agenda
• Java’s story on the client
• JavaFX script
• A Quick Dive Into JavaFX
• Demo
• JavaFX Mobile
• Looking Ahead
• Demo

34
Demo

JavaFX Pad
35
Agenda
• Java’s story on the client
• JavaFX script
• A Quick Dive Into JavaFX
• Demo
• JavaFX Mobile
• Looking Ahead
• Demo

36
The Mobile Space
• The most ubiquitous application platform
– Over 1.8 billion mobile phones

• Other embedded devices

37
The MSA Stack (JSR 248 & 249)
Security & Graphics Comms Personal Application
Commerce Information Connectivity
JSR 226 JSR 180
SVG SIP

JSR 184 JSR 205 JSR 238


3D Graphics MMS Mobile I18n

JSR 229 JSR 135 JSR 82 JSR 179 JSR 172


Payments Mobile Media Bluetooth Location Web Services
JSR 177 JSR 234 JSR 211
JSR 120 JSR 75
Security & Multimedia Content
SMS PIM & File
Trust services Supplements Handler
JSR 248
Environment JSR 118, 271 JSR 139 JSR 218
MSA
MIDP CLDC CDC
clarifications 38
JavaFX Mobile Overview

Frameworks Applications
Messaging
Application APIs
Browser
UI Toolkit
Media Player
Application Manager
PIM & Phone Apps
Advanced Graphics Engine
Telephony Framework
Multimedia Framework
Software Update
Security Framework Native OS
System Libraries Low-Level Services
Java VM & Libraries
Linux Kernel

39
Write Once…
• “Write once run anywhere” – for UI too
– Desktop
– Web
– Mobile
– Embedded

• Same OS for all phones

40
Google Android

• Announced November 2007

• Open Mobile Alliance

• Based on the Dalvik VM

• Apache Harmony Java SE

41
Agenda
• Java’s story on the client
• JavaFX script
• A Quick Dive Into JavaFX
• Demo
• JavaFX Mobile
• Looking Ahead
• Demo

42
Issues To Be Resolved
• Compiler
– in progress

• Tools!
– Some available
– Not prime time ready yet

• Binding Java beans & properties


43
Runtime: Theory & Practice
Java (Swing)

Java Java Java Class


source Compiler Bytecode Loader
Compile Time Runtime

JavaFX (conceptually)

JavaFX JavaFX Java Class


Script Interprete Bytecode Loader
r
Runtime
44
Runtime: Theory & Practice
JavaFX Class Loader as the interpreter

JavaFX JavaFX Java JavaFX


Script Interprete Bytecode Class Loader
r
Runtime

JavaFX Compiler

Java JavaFX Java Class


source Compiler Bytecode Loader
Compile Time Runtime
45
Announced Tools Features
• Code completion
• Refactoring
• Javadoc-like documentation tool
• Source-level debugger
• Profiler
• Visual Builder

46
Agenda
• Java’s story on the client
• JavaFX script
• A Quick Dive Into JavaFX
• Demo
• JavaFX Mobile
• The Near Future
• Demo

47
Demo

JFXBuilder
48