Hinkmond Wong's presentation to the Silicon Valley JavaFx User Group (SvJugFx) in February 2010.

1. SVJFXUG – JavaFX Mobile Dojo
February 10, 2010
Hinkmond Wong
Senior Staff Engineer
Sun Oracle
1

2. Agenda
Introduction
End-to-end deployment: Moving JavaFX apps from
Desktop to Mobile
JavaFX Mobile Do's and Dont's
Java ME integration: Co-mingling JavaFX code with
Java ME
Demo: JavaFX Mobile running on cool devices
Q&A
2

3. Agenda
Introduction
End-to-end deployment: Moving JavaFX apps from
Desktop to Mobile
JavaFX Mobile Do's and Dont's
Java ME integration: Co-mingling JavaFX code with
Java ME
Demo: JavaFX Mobile running on cool devices
3

4. JavaFX: Simple, Declarative Scripting
Language
class HelloWorld {
var message : String;
function print() { println(message); }
}
var name = "Jan";
var hello = HelloWorld {
message: bind "Hello {name}!"
}
hello.print(); // prints Hello Jan!
name = "Brian";
hello.print(); // prints Hello Brian!
4

5. JavaFX Scenegraph
Tree-like structure of graphical nodes
Easy way of vector graphics representation
Scene {
Group { javafx.scene.shape
Rectangle, Rectangle
Circle
}
} javafx.scene.shape
Circle
5

6. JavaFX Block Diagram
JavaFX Applications and Services
JavaFX Apps Framework
Authoring
Tools
JavaFX JavaFX JavaFX
Desktop Mobile TV Developer
Runtime Runtime Runtime Tools
(IDE Plug ins, RAD,
Production Suite)
Desktop Mobile TV
Extensions Extensions Extensions Designer
Tools
JavaFX Common Profile (Authoring, Publishing,
Media Encoding)
Java Platform (Java Plug in)
6

7. JavaFX Common Profile Features
Components Features
Compiler and
Languages SE 5 and CLDC Target
Geometric shapes, lines, Clip with arbitrary geometric shapes
curves, arc Image masks
Graphics Transparency Fullscreen support
Gradient, color fill, texture transforms (rotate, scale skew)
Stroke styles
True Type font rendering
Text Transforms (rotate, scale, skew)
Content embedded font
7

8. JavaFX Common Profile Features
Components Features
Key frame animation Standard animations
Animation with tweening (rotate, zoom, slide)
Path-based animation
Cross platform audio (mp3) Volume and audio balance control
and video (On2)
Media Codec native media framework
support (DirectShow and
Core Video), play, pause, seek,
volume, balance, speed controls
Web services (JSON/XML parser, RESTful APIs)
Other Common text input control (CSS skinning)
Input handling (keyboard, mouse, touch, etc.)
8

9. JavaFX Developer Tool Chain
Media Assets Assets Integrated Emulated By
Created By Transformed By Into IDEs (If Required)
Adobe
Illustrator
JavaFX
Plug-in
Adobe
for IDEs
Photoshop JavaFX JavaFX
Production Mobile
Suite JavaFX Emulator
On2 Flix Compiler
Encoders
(JavaFX File Format,
VP6 and MP3)
Adobe CS3
(Flash and 3rd Party
Flash Video,
JavaFX 1.5) RAD Tool
9

10. JavaFX Plugin for NetBeans
10

11. Incorporate Existing Visual Assets with
JavaFX Production Suite
11

12. JavaFX Script
class HelloWorld {
var message : String;
function print() { println(message);
}
}
var name = "Jan";
var hello = HelloWorld {
message: bind "Hello {name}!"
}
hello.print(); // prints Hello Jan!
name = "Brian";
hello.print(); // prints Hello Brian!
12

13. Mobile vs. Desktop
k top on
es mm ile
D Co Mob
Common profile
Most of JavaFX is "common"
Different implementations
Platform specific APIs
Performance
Capabilities
13

14. High level architecture
Java FX Application
JavaFX Application Runtime
JavaFX Language Runtime
SJWC: CLDC + MIDP + MSA
Application deployed as MIDlet
Full access to all JavaFX and device features
Language runtime is common for all profiles
14

15. JavaFX Mobile Architecture
JavaFX Runtime
(Common API, SceneGraph, Media, Webservices)
Sun Java Wireless Client
(CLDC, MIDP 2.0, JSR 135)
Software OpenVG OpenGL-ES
Renderer
Mobile Device
Default Stack 2D Accelerated Stack 3D Accelerated Stack
15

16. JavaFX Mobile - Packaging
JavaFX
Java code
code
JavaFX compiler Java compiler
Pre-verification
Optionally bundled with
Static code analysis
JAR JavaFX Platform Runtime
performance and size
(CLDC ready code)
optimizations
16

17. Agenda
Introduction
End-to-end deployment: Moving JavaFX apps from
Desktop to Mobile
JavaFX Mobile Do's and Dont's
Java ME integration: Co-mingling JavaFX code with
Java ME
Demo: JavaFX Mobile running on cool devices
17

18. Moving JavaFX from Desktop to Mobile
Josh Marinacci's Tech Tip
http://javafx.com/docs/techtips/mobile_sample/
Program only in Common Profile
No use of Swing
No use of Effects javafx.scene.effect
No direct Java API calls
Keep screen size and orientation changeable
Allow for different Input Methods
Keyboard vs. Touch Screen/Stylus
Keep in mind performance differences
Keep in mind graphics capabilities
18

19. Moving JavaFX from Desktop to Mobile
Desktop: Perspective Transform
Mouse clicks trigger action
Mobile: No tricky
transforms, Touch-
based or cursor key
trigger action, screen
size sensitive
19

20. Agenda
Introduction
End-to-end deployment: Moving JavaFX apps from
Desktop to Mobile
JavaFX Mobile Do's and Dont's
Java ME integration: Co-mingling JavaFX code with
Java ME
Demo: JavaFX Mobile running on cool devices
20

21. JavaFX Mobile Do's and Don'ts
Do complex graphics off-line
Fancy graphics can be pre-rendered
Add dynamic content (ex. text)
at runtime
21

22. JavaFX Mobile Do's and Don'ts
Michael Heinrichs' Mobile Best Practices:
http://java.sun.com/developer/technicalArticles/javafx/mobile
Avoid unnecessary bindings
Keep the scenegraph small
Use simple shapes instead of images
Use pre-scaling
Use background loading
Use Integer instead of Number
Use functions of class Sequences
22

23. Agenda
Introduction
End-to-end deployment: Moving JavaFX apps from
Desktop to Mobile
JavaFX Mobile Do's and Dont's
Java ME integration: Co-mingling JavaFX code with
Java ME
Demo: JavaFX Mobile running on cool devices
23

24. Java ME integration: Co-mingling
JavaFX code with Java ME
Will tie JavaFX app to Java ME platform (no cross-
screen compatibility)
Access JSRs (optional functionality) on mobile devices
Bluetooth
GPS
SMS text messaging
etc.
One-way calls: JavaFX calling Java ME APIs
Use def whenever possible
Use Functions Outside Class
24

25. Java ME integration: Co-mingling
JavaFX code with Java ME
import javax.microedition.*;
...
def socket =
Connector.open("socket://localhost:
10001");
def sc = socket as
javax.microedition.io.SocketConnection
;
def is = sc.openInputStream() as
InputStream;
def os = sc.openOutputStream() as
OutputStream; 25

26. Java ME integration: Co-mingling
JavaFX code with Java ME
os.write(("connect:").getBytes());
os.flush();
os.write(("update:").getBytes());
os.flush();
os.close();
sc.close();
26

27. Co-mingling Bind of UI to the Controller
Java ME MIDP contains existing functionality
(Controller) event code
Use of Bind in JavaFX
Link attributes, so when one changes other
automatic changes happen
Triggering from input events
Bind JavaFX UI events to call MIDP code
Using data from MIDP
JavaFX objects hold onto MIDP data to pass to
MIDP when bind events occur
27

28. Co-mingling Bind UI to the Controller
Animations
Graphics Events
Transitions
28

29. Co-mingling Bind of UI to the Controller
Example of Bind from JavaFX to MIDP:
Label {
text: bind data.value
}
operation getCountFromMIDP( ) {
...
// Use MIDP Java ME calls to get data
}
29

30. Co-mingling JavaFX UI Event to Java
ME
var zipCodeText: TextBox = TextBox {
blocksMouse: true
columns: 7
selectOnFocus: false
text: "95054"
onKeyPressed:function(e:KeyEvent) {
if(e.code == KeyCode.VK_ENTER) {
// Call Java ME APIs here
// Ex. Get location-based services
// ...
}
}
30

31. DEMO
JavaFX Mobile
31

32. Q&A
February 10, 2010
Hinkmond Wong
Senior Staff Engineer
Sun Oracle
32

33. SVJFXUG – JavaFX Mobile Dojo
February 10, 2010
Hinkmond Wong
Senior Staff Engineer
Sun Oracle
33

34. Backup Slides
34