Java Core | JavaFX 2.0: Great User Interfaces in Java | Simon Ritter

1

<Insert Picture Here>

JavaFX 2.0 Simon RitterTechnology Evangelist

3

What is JavaFX 2.0

JavaFX is the evolution of the Java rich client platform, designed to address the

needs of today’s and tomorrow’s customers.

4

APIs and Programming Model

• Continuation from JavaFX 1.X product line

• Most APIs have simply been ported directly to Java

• Some APIs are being revisited (e.g. layout, media)

• Embrace more web technology

• JavaFX CSS to be a strict superset of CSS 3

• Use WAI-ARIA for accessibility API

• Make HTML available for rich text in all Text nodes

• Follow web specifications for drag and drop, events

• Developers use the Scenegraph not the DOM

5

Getting Started

• javafx.application.Application• JavaFX applications extends this class• destroy(): convenient place to destroy resources.• init(): initialization method.• start(Stage primaryStage): main entry point for all

JavaFX applications.• stop(): convenient place to stop animation, and prepare for

application exit.

• javafx.application.Launcher• Utility class to launch a standalone application.• launch(Class<? extends Application> appClass, String[] args)

66

public class MyApp extends Application { @Override public void start(Stage stage) { Group root = new Group(); Scene scene = new Scene(root, 500, 400); scene.setFill(Color.BLACK); stage.setScene(scene); stage.setVisible(true); } public static void main(String a[]) { Launcher.launch(JavaFXTest.class, null); }}

Creating A Simple Application

7

Let's Compare: JavaFX 1.ximport javafx.application.*;import javafx.scene.shape.*;import javafx.scene.paint.*;

Stage { scene:Scene{ Content:[ Circle { centerX: 50 centerY: 50 radius: 50 fill: Color.RED } ] }}

8

Let's Compare: JavaFX 2.0

public class JavaFXTest extends Application { @Override public void start(Stage stage) { Group root = new Group(); Scene scene = new Scene(root,100,100); stage.setScene(scene); Circle c1 = new Circle(50.0f, 50.0f, 50.0f, Color.RED); root.getChildren().add(c1); stage.setVisible(true); }

public static void main(String a[]) { Launcher.launch(JavaFXTest.class, null); } }

99

Launching JavaFX Applications

• From the command line• java -jar myapp.jar• java -cp jfxrt.jar:myapp.jar MyApp• javafx -cp myapp.jar MyApp

• From any IDE• Just setup classpath and run as normal

10

Scene Graph

• Directed Acyclic Graph• Parents & children• Representation of a GUI• Drawing primitives and controls

11

Types of Nodes

• Shapes• Images• Media• Web browser• Text• Controls• Charts• Group• Container

12

Media

• JavaFX supports both visual and audio media• Cross platform JavaFX Media file (fxm, mp3)• Media class represents a media file• MediaPlayer plays a Media file• MediaView is a Node which displays the Media

• Many MediaViews can have the same MediaPlayer• And it is cheap to do so

• MediaViews can scale the media proportionally or disproportionally

• MediaView does not come with pre-built playback controls (you need a MediaControl)

12

13

Controls

Many more...

14

ListViewListView listView = new ListView();//listView.setVertical(false);listView.setItems(FXCollections.sequence(43.68f, 102.35f, -23.67f, 110.23f, -43.93f, 87.21f));listView.setCellFactory(Cells.ListView.cash());//listView.setCellFactory(Cells.ListView.rotateLabel(90));listView.getSelectionModel().setMultipleSelectionEnabled(true);getChildren().add(listView);

15

Table

• Full featured table component• Resizeable columns• Columns can be moved• Groups of columns can be moved

• Uses standard MVC pattern• Create model for data• Attach to Table ‘view’ for display

• Efficient• Lazy loading of data – only displayed data is loaded

16

Adding HTML Content:The Embedded Browser

• WebEngine • Provides basic web page browsing functionality. Renders

web pages• Supports user interaction: navigating links, submitting HTML

forms.

• WebView• Extension of a Node class• Encapsulates a WebEngine object• Incorporates HTML into the scene

• To apply effects and transformations

17

Charts

18

Effects

ImageView sample = new ImageView(BOAT);

final Reflection reflection = new Reflection();

reflection.setFraction(0.2);

sample.setEffect(reflection);

getChildren().add(sample);

19

And Many More Effects...

GaussianBlur

InnerShadow

SepiaTone

20

Transforms

rect.setTranslateX(40);rect.setTranslateY(10);

Rectangle rect=new Rectangle(0,0,60,60);rect.setFill(Color.DODGERBLUE);rect.setArcWidth(10);rect.setArcHeight(10);

rect.setRotate(45);

rect.setScaleX(2);rect.setScaleY(0.5);

Shear shear = new Shear(0.7, 0);rect.getTransforms().add(shear);

21

Layout

• A surprisingly hard problem!• We’ve made fairly substantial changes in each

release so far and we’re going to do so again!• Design Goals:

• Easy to program with by hand• Works with animated transitions• Can be manipulated from CSS• Easy to use with RAD tools

21

22

Layouts

• Pane• AnchorPane• BorderPane• FlowPane• GridPane• HBox• StackPane• TilePane• VBox

23

Binding

• Creates a dependancy between a property and a changeable value

• High level API• Simple to use• Covers most common situations

• Low level API• Allows for more complex interactions• Optimised for fast execution and small footprint

24

Properties

• Basis for high-level binding API• Types for all primitives, String and Object

• DoubleProperty, StringProperty, etc

• Subclasses Observable, ReadOnlyProperty, WriteableValue interfaces

• Provides simple API• bind• unbind• bindBidirectional/unbindBidirectional• isBound

• Simple concrete classes

25

Simple Binding Example

private SimpleDoubleProperty topXProperty = new SimpleDoubleProperty();private SimpleDoubleProperty topYProperty = new SimpleDoubleProperty();

Line foldLine = new Line();foldLine.setEndX(200);foldLine.setEndY(200);foldLine.startXProperty().bind(topXProperty);foldLine.startYProperty().bind(topYProperty);

...

topXProperty.set(tx);topYProperty.set(ty);

26

Expression Example

Defining expressions with Fluent API:

result = a*b + c*d

DoubleExpression a,b,c,d;

DoubleBinding result =

a.multiply(b).add(c.multiply(d));

27

Bindings Class

• Helper class with utility methods to create simple bindings:– add, bindWithInverse, concat, convert, divide, iqual, greaterThan, max, min, greaterThanOrEqual, lessThan, not, or, lessThanOrEqual, multiply, notEqual, substract, select, unbindWithInverse, when.

result = a*b + c*d

import static javafx.beans.binding.Bindings.*;

NumberBinding foo = add (multiply(a, b),multiply(c,d));

28

Animations

• Timeline based keyframe animations• Animated transitions

29

Timeline-Based Animation

• Timeline• Modifies values of variables specified by KeyFrames• Doesn’t necessarily do any animation itself

• KeyFrame: specifies that a variable should have...• A particular value• At a particular time

• KeyValue: key value to be interpolated for a particular interval

• How is animation actually done?• Arrange for a KeyFrame to modify an interesting Node

variable• Use binding

30

Animated Transitions

• Predefined, single-purpose animations• Fade, Path, Pause, Rotate, Scale, Translate• Can specify to, from, and by values

• Container transitions• Parallel, Sequential• Can be nested arbitrarily

• Transitions and Timelines have a similar ancestry• A timeline can be added to a Parallel / Sequential transition

• Transitions are being optimized for speed in 2.0

30

31

Event Handling

• All of our events extend an Event object• Event flow:

• Capturing• Bubbling

• EventHandler callback for events• setOnMouseClicked(EventHandler<MouseEvent>)• addMouseHandler(MouseEventID, EventHandler)• addMouseFilter(MouseEventID, EventHandler)

• Events can be consumed

31

Parent

Child

Ca

ptu

re

Bu

bb

led u

p

32

Tasks

• The preferred way to work with threading• A Task is a one-shot worker

• Somewhat like a Callable with a lot more API• Can report:

• Total amount of work to do• Amount of work complete• Percentage complete• Errors• Notification on completion

• Implementations should also yield one or more “products” when they complete operation

32

33

Swing Integration

• We are FINALLY supporting embedding of JavaFX into existing Swing applications!

• Accomplishing this requires 3 objectives:• Java APIs for JavaFX• Ability to embed hardware accelerated 2D/3D scenes• Swing API for embedding the scene

• However (shed a tear), we are not going to support embedding Swing components in JavaFX scene graphs

33

34

Experiments & Blueprints

• At the same time we are working on the platform, we are building experiments and blueprints

• Experiments:• Small applications meant for outside developers to see and

play with, but who’s code is not necessarily ideal

• Blueprints:• Larger applications meant to simulate (or actually be) real

world, and who’s code is representative of a best practice and intended to be copied by developers

35

JavaFX Roadmap

2011 2012 2013

JavaFX 3.0

Included in JDK 8

Concurrent OS support(Windows, Mac OS, Linux)

JavaFXScene Builder GA

JavaFX 2.x

Mac OS X GA

Linux Dev. Preview

2014

NetBeans.next

JavaFX 3.0 Support

more

JavaFX 2.0 GA

Windows GA

Mac OS X Dev. Preview

JavaFX Beta

Windows Beta

Mac OS X EA

JavaFXScene Builder EA

NetBeans 7.1 Beta

JavaFX 2.0 Support

JavaFX 2.0.2

JDK 7 co-install

JavaFX 2.x

Linux GA

JavaFX Roadmap

36

Conclusions

• JavaFX provides a new way to write rich, visual applications• Java language based• Easy to extend existing applications• Integration with Swing

• Powerful features• Binding• Animations• Extensive component library

• Try it now and give feedback• http://www.javafx.com

3737

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.

<Insert Picture Here>

Thank You