1

OpenJFX on Android and DevicesStephen Chin (@steveonjava)Java Technology AmbassadorJavaOne Content Chair

2

JavaFX on AndroidIt is about time!

3

Open Source Efforthttps://javafxports.org/

4

• Cross-platform Animation, Video, Charting

• Integrate Java, JavaScript, and HTML5 in the same application

• New graphics stack takes advantage of hardware acceleration for 2D and 3D applications

• Integrate in Swing applications using JFXPanel and SwingNode

Immersive Application Experience

JavaFX 2 Platform

5

How to Get JavaFX

Step 1: Download Java 8

6

How to Develop JavaFXUse Your Favorite IDE

7

How to Deploy to Android Devices

1. Install the Android SDK / ADT

2. Download the JavaFX -Dalvik Runtime from: http://javafxports.org/

3. Compile your JavaFX application for Android using Gradle

As easy as 1… 2… 3

8

Architecture of JavaFX 2

Java Virtual Machine

Java2D Open GL D3D

Prism GlassWinTk

MediaEngine

WebEngine

JavaFX Public API

Quantum Toolkit

9

9

Vanishing Circles

10

Application Skeletonpublic class VanishingCircles extends Application { public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("Vanishing Circles"); Group root = new Group(); Scene scene = new Scene(root, 800, 600, Color.BLACK); [create the circles…] root.getChildren().addAll(circles); primaryStage.setScene(scene); primaryStage.show(); [begin the animation…] }}

11

Create the Circles

List<Circle> circles = new ArrayList<Circle>();for (int i = 0; i < 50; i++) { final Circle circle = new Circle(150); circle.setCenterX(Math.random() * 800); circle.setCenterY(Math.random() * 600); circle.setFill(new Color(Math.random(), Math.random(), Math.random(), .2)); circle.setEffect(new BoxBlur(10, 10, 3)); circle.setStroke(Color.WHITE); [setup binding…] [setup event listeners…] circles.add(circle);}

11

12

Setup Binding

circle.strokeWidthProperty().bind(Bindings

.when(circle.hoverProperty())

.then(4)

.otherwise(0)

);

12

13

Setup Event Listeners

circle.addEventHandler(MouseEvent.MOUSE_CLICKED,

new EventHandler<MouseEvent>() {

public void handle(MouseEvent t) {

KeyValue collapse = new KeyValue(circle.radiusProperty(), 0);

new Timeline(new KeyFrame(Duration.seconds(3),

collapse)).play();

}

});

13

14

Begin the Animation

Timeline moveCircles = new Timeline();

for (Circle circle : circles) {

KeyValue moveX = new KeyValue(circle.centerXProperty(),

Math.random() * 800);

KeyValue moveY = new KeyValue(circle.centerYProperty(),

Math.random() * 600);

moveCircles.getKeyFrames().add(new KeyFrame(Duration.seconds(40),

moveX, moveY));

}

moveCircles.play();

15

MemeQuest: End-to-end JavaFX

Animations, Images, Binding, Controls on the Client DataFX (http://www.javafxdata.org) for communication with DaliCloud

back-end User Interface: We need to stop Johan from doing User Interfaces.

Who wants to help? Code + downloads at http://bitbucket.org/lodgon/memequestfx

Layout Basics

17

Built-in Layouts

AnchorPane BorderPane VBox/HBox FlowPane StackPane TilePane GridPane

18

Built-in Layouts

AnchorPane BorderPane VBox/HBox FlowPane StackPane TilePane GridPane

19

Built-in Layouts

AnchorPane BorderPane VBox/HBox FlowPane StackPane TilePane GridPane

20

Built-in Layouts

AnchorPane BorderPane VBox/HBox FlowPane StackPane TilePane GridPane

A B

D E

C

21

Built-in Layouts

AnchorPane BorderPane VBox/HBox FlowPane StackPane TilePane GridPane

22

Built-in Layouts

AnchorPane BorderPane VBox/HBox FlowPane StackPane TilePane GridPane

23

Built-in Layouts

AnchorPane BorderPane VBox/HBox FlowPane StackPane TilePane GridPane

Controls

25

Button Control

Simple Button Control Add and remove click event handler Support Cascading Style Sheets

26

TextField Control

One line entry text field control Set OnAction event handler Can listen to individual key events Support Cascading Style Sheets

27

ListView Control

Displays a list of items Reuses cells for performance Default cell renderer can display Strings For other object types

– Create custom CellFactory

28

TreeView Control

Displays a tree view of items Can dynamically populate as tree is expanded Default cell renderer can display Strings For other object types

– Create custom CellFactory

29

ToolBar Demo

Toolbar displays items horizontally or vertically Handles arbitrary number of items Can add any node to the toolbar, including custom nodes Automatic adds an overflow hint if cannot display all toolbar items

30

Progress Bars and Indicators

Progress Bars can be laid out vertically and horizontally

Progress Indicator is a circular widget Progress Bar and Indicator can be indefinite Double property 0.0 <= x <= 1.0

31

Accordion Control

Accordion is a space saving components Accordian accept only TitledPanes Each TitledPane managed one

scenegraph node Can choose the titled pane expanded by

default

32

TabPane Control

Alternative space saving component Choose a side for the Tab Each manages one component node Tab pane has two modes:

– floating

– recessed

33

DatePicker

Allows selection of dates and ranges

Can use custom formats and calendars

Supports Cascading Style Sheets

34

TreeTableView

Combines a TreeView and a TableView

Optional menu for hiding and showing columns

Root can be hidden Supports multiple selection Supports CSS

35

New Modena UI Theme

36

Embedded Controls Theme

37

38

Build Applications VisuallyJavaFX Scene Builder 2

39

RoboVMJavaFX on iOS

+ =

40

41

Stephen Chintweet: @steveonjavablog: http://steveonjava.com

nighthacking.com

Real GeeksLive Hacking

NightHacking Tour

42

The preceding is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle.