1

SVJFXUG – JavaFX Mobile Dojo

Hinkmond WongSenior Staff EngineerSun Oracle

February 10, 2010

2

AgendaIntroductionEnd-to-end deployment: Moving JavaFX apps from

Desktop to MobileJavaFX Mobile Do's and Dont'sJava ME integration: Co-mingling JavaFX code with

Java MEDemo: JavaFX Mobile running on cool devicesQ&A

3

AgendaIntroductionEnd-to-end deployment: Moving JavaFX apps from

Desktop to MobileJavaFX Mobile Do's and Dont'sJava ME integration: Co-mingling JavaFX code with

Java MEDemo: JavaFX Mobile running on cool devices

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!

5

JavaFX Scenegraph

javafx.scene.shapeRectangle

javafx.scene.shapeCircle

Scene { Group { Rectangle, Circle }}

Tree-like structure of graphical nodesEasy way of vector graphics representation

6

JavaFX Block DiagramJavaFX Applications and Services

JavaFX Apps Framework

JavaFX Common Profile

DesktopExtensions

MobileExtensions

Java Platform (Java Plug in)

JavaFXDesktopRuntime

JavaFXMobile

Runtime

JavaFXTV

Runtime

TVExtensions

AuthoringTools

Developer Tools

(IDE Plug ins, RAD, Production Suite)

DesignerTools

(Authoring, Publishing, Media Encoding)

7

Compiler andLanguages

Geometric shapes, lines,curves, arcTransparencyGradient, color fill, textureStroke styles

TextTrue Type font renderingTransforms (rotate, scale, skew)Content embedded font

Clip with arbitrary geometric shapesImage masksFullscreen supporttransforms (rotate, scale skew)

SE 5 and CLDC Target

Components Features

Graphics

JavaFX Common Profile Features

8

Animation

Cross platform audio (mp3)and video (On2)Codec native media frameworksupport (DirectShow andCore Video), play, pause, seek,volume, balance, speed controls

OtherWeb services (JSON/XML parser, RESTful APIs)Common text input control (CSS skinning)Input handling (keyboard, mouse, touch, etc.)

Media

Volume and audio balance control

Key frame animationwith tweeningPath-based animation

Standard animations(rotate, zoom, slide)

Components Features

JavaFX Common Profile Features

9

JavaFX Developer Tool Chain

Media AssetsCreated By

AssetsTransformed By

AdobeIllustrator

AdobePhotoshop JavaFX

ProductionSuite

On2 FlixEncoders

(JavaFX File Format,VP6 and MP3)

Adobe CS3(Flash and

Flash Video,JavaFX 1.5)

3rd PartyRAD Tool

IntegratedInto IDEs

Emulated By(If Required)

JavaFXCompiler

JavaFXPlug-in

for IDEs JavaFXMobile

Emulator

10

JavaFX Plugin for NetBeans

11

Incorporate Existing Visual Assets with JavaFX Production Suite

12

JavaFX Scriptclass 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!

13

Mobile vs. Desktop

Common profileMost of JavaFX is "common"Different implementationsPlatform specific APIsPerformanceCapabilities

Common

MobileDesktop

14

High level architecture

Application deployed as MIDletFull access to all JavaFX and device featuresLanguage runtime is common for all profiles

SJWC: CLDC + MIDP + MSA

Java FX Application

JavaFX Language Runtime

JavaFX Application Runtime

15

JavaFX Mobile Architecture

Mobile Device

Default Stack 2D Accelerated Stack 3D Accelerated Stack

OpenVG OpenGL-ESSoftwareRenderer

JavaFX Runtime(Common API, SceneGraph, Media, Webservices)

Sun Java Wireless Client(CLDC, MIDP 2.0, JSR 135)

16

JavaFX Mobile - Packaging

JavaFXcode Java code

JavaFX compiler Java compiler

Pre-verification

Static code analysisperformance and size

optimizations

Optionally bundled withJavaFX Platform RuntimeJAR

(CLDC ready code)

17

AgendaIntroductionEnd-to-end deployment: Moving JavaFX apps from

Desktop to MobileJavaFX Mobile Do's and Dont'sJava ME integration: Co-mingling JavaFX code with

Java MEDemo: JavaFX Mobile running on cool devices

18

Moving JavaFX from Desktop to MobileJosh Marinacci's Tech Tip

http://javafx.com/docs/techtips/mobile_sample/Program only in Common Profile

No use of SwingNo use of Effects javafx.scene.effectNo direct Java API calls

Keep screen size and orientation changeableAllow for different Input Methods

Keyboard vs. Touch Screen/StylusKeep in mind performance differencesKeep in mind graphics capabilities

19

Moving JavaFX from Desktop to Mobile

Desktop: Perspective TransformMouse clicks trigger action

Mobile: No tricky transforms, Touch-based or cursor key trigger action, screen size sensitive

20

AgendaIntroductionEnd-to-end deployment: Moving JavaFX apps from

Desktop to MobileJavaFX Mobile Do's and Dont'sJava ME integration: Co-mingling JavaFX code with

Java MEDemo: JavaFX Mobile running on cool devices

21

JavaFX Mobile Do's and Don'tsFancy graphics can be pre-rendered Do complex graphics off-line

Add dynamic content (ex. text) at runtime

22

JavaFX Mobile Do's and Don'tsMichael Heinrichs' Mobile Best Practices:

http://java.sun.com/developer/technicalArticles/javafx/mobile

Avoid unnecessary bindingsKeep the scenegraph smallUse simple shapes instead of imagesUse pre-scalingUse background loadingUse Integer instead of NumberUse functions of class Sequences

23

AgendaIntroductionEnd-to-end deployment: Moving JavaFX apps from

Desktop to MobileJavaFX Mobile Do's and Dont'sJava ME integration: Co-mingling JavaFX code with

Java MEDemo: JavaFX Mobile running on cool devices

24

Java ME integration: Co-mingling JavaFX code with Java MEWill tie JavaFX app to Java ME platform (no cross-

screen compatibility)Access JSRs (optional functionality) on mobile devices

BluetoothGPSSMS text messagingetc.

One-way calls: JavaFX calling Java ME APIsUse def whenever possibleUse Functions Outside Class

25

Java ME integration: Co-mingling JavaFX code with Java MEimport 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;

26

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

os.close();sc.close();

27

Co-mingling Bind of UI to the Controller

Java ME MIDP contains existing functionality (Controller) event code

Use of Bind in JavaFXLink attributes, so when one changes other

automatic changes happenTriggering from input events

Bind JavaFX UI events to call MIDP codeUsing data from MIDP

JavaFX objects hold onto MIDP data to pass to MIDP when bind events occur

28

Co-mingling Bind UI to the Controller

AnimationsGraphics EventsTransitions

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

}

30

Co-mingling JavaFX UI Event to Java MEvar 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 // ... }}

31

DEMO

JavaFX Mobile

32

Q&A

Hinkmond WongSenior Staff EngineerSun Oracle

February 10, 2010

33

SVJFXUG – JavaFX Mobile Dojo

Hinkmond WongSenior Staff EngineerSun Oracle

February 10, 2010

34

Backup Slides