javafx 8: new and noteworthy steve northover (client architect) kevin rushforth (consulting member...

JavaFX 8: New and Noteworthy

Steve Northover (Client Architect)Kevin Rushforth (Consulting Member of Technical Staff)Java Client PlatformSept, 2014

Copyright © 2014, Oracle and/or its affiliates. All rights reserved.


Safe Harbor StatementThe following 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.


Program Agenda

Brief History / Overview of JavaFX

JavaFX 8 and 8u20: Here Today

JavaFX 8u40: Coming Soon

JavaFX 9: Coming Not So Soon

Conclusion / Summary

1

2

3

4

5


History• Dec 2008: JavaFX 1.0 (FX script, closed source)• April 2010: JavaFX 1.3 (Controls, charts, css)• Oct 2011: JavaFX 2.0 (Windows, FX reboot)• Dec 2011: OpenJFX (First component open sourced)• April 2012: JavaFX 2.1 (Port to Mac, co-bundled)• Aug 2012: JavaFX 2.2 (Linux, canvas, new controls)• Oct 2013: OpenJFX (Last component open sourced)• Mar 2014: JavaFX 8.0 (Part of the Oracle JDK)


Overview / Features• Data Binding• FXML (declarative markup)• CSS• Graphics• Controls• Drag and Drop / Clipboard• Tasks• Layout

• Media• Browser• Charts• Swing and SWT Integration


JavaFX 8 and 8u20: Here Today• 3D Support (*)• Printing• Complex Text (BIDI, TextFlow) (*)• Component Orientation (RTL, Mirroring) (*)• Modena (New theme for FX8)• New Controls (DatePicker, TreeTableView)• SwingNode (Embed Swing in FX) (*)


JavaFX 8 and 8u20: Here Today• New Build System (based on gradle, IDE support)• Native Font Rasterizer (Windows, Mac, Linux) (*)• HTML5 Improvements (local storage etc.)• HDPI Support (Retina displays)• GPU Acceleration on Linux• CSS Improvements (public API) (*)• On Top Stages


3D Support in FX 8• Shape3D• Lights• Movable camera• SubScene• Scene antialiasing• Sample loaders to load 3D models


Shape3D Node• 3D geometry– Predefined shapes• Box, Cylinder, Sphere

– User-defined shapes• MeshView

• Material:– Defines rendering appearance– Texture mapping, bump mapping, etc.


Shape3D: MeshView• Geometry– A set of positions– A set of texture coordinates– A set of faces (triangles) that describe the topology

• Smoothing group– Used to group triangles that are part of same curved surface– Hard edges between triangles in different smoothing groups

• Sharable among multiple MeshView nodes


3D Attributes: PhongMaterial• Defines the rendering appearance:– Diffuse color, diffuse map– Specular color, specular map– Specular power– Bump map (normal map)– Self-illumination map

• Sharable among multiple Shape3D nodes


3D Lights• Defined as nodes in the scene graph• Scene contains a set of active lights– Default light provided when the set is empty

• Each light has a set of affected nodes (scope)– If a Parent is in the set, all children are affected– Default is root node of Scene

• Each Shape3D affected by up to 3 lights (at present)


Movable Camera• Camera is now a Node– Add to scene graph to move the camera– Position and aim camera using transforms– Use “fixed eye” mode for 3D scenes– Non-moving camera need not be added to scene graph

• New properties for near & far clipping plane


SubScene• Renders a subset of the scene with:– Different camera– Different scene attributes (depth test, antialiasing)

• Used to separate 2D and 3D content• Overlay or “heads-up” display:– Example: UI controls in a scene with a moving camera


Loading 3D Models• Many 3D file formats exist, such as:–Obj, Maya, 3D Studio Max, Collada

• Sample code available for some of these– Included in 3DViewer sample

• Community can also write loaders

Demo?


Complex Text (BIDI, TextNode)• Text node correctly renders BIDI strings– Supports the BIDI algorithm, control characters, ligatures etc.

• TextFlow– A subclass of Pane that positions Text and Node children– Supports text wrapping, BIDI reordering, contextual shaping– Not the same as a FlowPane (think “RichTextEditor output only”)


Create Text Nodes: Use a TextFlow … Text text1 = new Text("JavaFX"); text1.getStyleClass().add("bold"); Text text2 = new Text(" is a "); Text text3 = new Text("software platform"); text3.getStyleClass().add("link"); text3.addEventFilter(MouseEvent.MOUSE_CLICKED, this); Text text4 = new Text(" for creating and delivering "); Text text5 = new Text("rich internet applications (RIAs)"); text5.getStyleClass().add("link"); text5.addEventFilter(MouseEvent.MOUSE_CLICKED, this); Text text6 = new Text(" that can run across a wide variety of devices."); TextFlow textFlow = new TextFlow(text1, text2, text3, text4, text5, text6); textFlow.getStyleClass().add("textFlow"); …


Use CSS to Style Text: Bold or Links.bold { -fx-font-weight: bold;}

.link { -fx-fill: royalblue; -fx-underline: true; -fx-cursor: hand;}

.textFlow { -fx-font-family: "Helvetica"; -fx-font-size: 18px; -fx-padding: 6px; -fx-border-color: royalblue; -fx-border-radius: 4px; -fx-border-insets: 6px;}


TextFlow versus FlowPane

Text nodes are positioned and wrapped correctly in the TextFlow


Component Orientation (RTL, Mirroring)• Every Node has an orientation– (LTR) Left-to-right, (RTL) Right-to-left, (INHERIT) inherit– The default orientation for Scene and most Nodes is INHERT– Applications set node orientation to change the layout

• Every Node has an effective orientation– The effective orientation of a node is computed based on INHERIT– The effective orientation is either LRT or RTL (never INHERIT)– Applications cannot set the effective orientation– Nodes draw using this orientation


Node Orientationpublic enum NodeOrientation {

/** Indicates that the node draws from left-to-right */ LEFT_TO_RIGHT, /** Indicates that the node draws from right-to-left */ RIGHT_TO_LEFT, /** Indicates that the node inherits orientation from the parent */ INHERIT}


Node Orientation API• Node.setNodeOrientation()

• Node.getNodeOrientation()

• Node.nodeOrienationProperty()

• Node.getEffectiveNodeOrientation()

• Node.effectiveNodeOrientationProperty()

• Scene.setNodeOrientation()

• Scene.getNodeOrientation()

• Scene.nodeOrienationProperty()

• Scene.getEffectiveNodeOrientation()

• Scene.effectiveNodeOrientationProperty()

-Djavafx.scene.nodeOrientation.RTL=true


A Simple Application: Default Orientation


The Same Application: RIGHT_TO_LEFT


The Node Orientation set with a Property static {

String lang = Locale.getDefault().getLanguage();

if (lang == "ar" || lang == "iw" || lang == "fa" || lang == "ur") {

System.setProperty("javafx.scene.nodeOrientation.RTL", "true");

System.out.println("Application set to RTL");

}

}

Different strings are loaded from a resource bundle but there are noother code changes.


Mirroring: An Implementation of Node Orientation

(0,0)

0 ... N

(0,0)

N … 0

Left to Right Right to Left


Advantages of Mirroring• Applications are written for the default orientation (LTR)• Almost no code changes required to work in RTL orientation– Need to handle a few “hard left” and “hard right” concepts– For example, left arrow must traverse always traverse to the left– Traversal is handled correctly by FX (but the application look for arrow keys)

• No special API concepts such as LEAD or TRAILING required


SwingNode• SwingNode is a regular JavaFX node• Multiple SwingNode supported in a single application• Overrides event handlers and forwards to AWT/Swing• Performance is comparable to stand alone AWT/Swing• Supports accelerated painting, drag and drop, etc.

Copyright © 2014, Oracle and/or its affiliates. All rights reserved. Oracle Confidential – Internal/Restricted/Highly Restricted 29

SwingNode: A Complete Example public void start(Stage stage) {

SwingNode swingNode = new SwingNode();

SwingUtilities.invokeLater(() -> {

swingNode.setContent(new JButton("Click me!"));

});

StackPane pane = new StackPane();

pane.getChildren().add(swingNode);

stage.setScene(new Scene(pane, 100, 50));

stage.show();

}


CSS Improvements• CSS Public API – javafx.css package– Create styleable properties–Manage pseudo-class state

• @font-face support (load a font)• @import support (to import another style sheet)• setUserAgentStylesheet on Scene and SubScene


Native Font Rasterizer• FX 2.x used custom T2K font rasterizer– Same rasterizer that is used in the JDK

• FX 8.0 uses native font rasterizer on:–Windows: DirectWrite–Mac: Core Text

• FX 8u20 uses native font rasterizer on:– Linux: Freetype + Pango


Native Font Rasterizer

T2K Mac (CoreText)


JavaFX 8u40: Coming Soon


JavaFX 8u40: Coming Soon• Accessibility (Windows and Mac)• New Controls– Spinner– Filtered Text– Dialogs (Alerts, TextInputDialog, ChoiceDialog)

• LCD Text on Canvas (highly requested)• 3D User-Defined Normals

Early Access builds are available at https://jdk8.java.net/download.html


Accessibility• A full featured minimal API and implementation• Supports native accessibility (VoiceOver, Narrator)• All built-in controls and charts are accessible• Developers can make their own controls accessible


The Fundamental Accessibility APIA simple set of properties to solve the most common cases

• Node#accessibleRoleProperty()

• Node#accessibleRoleDescriptionProperty()

• Node#accessibleTextProperty()

• Node#accessibleHelpProperty()

• Label#labelForProperty() (not a new property)


Making a Bouncing Ball Accessible…

ball.setAccessibleRole(AccessibleRole.BUTTON);

ball.setAccessibleRoleDescription("Bouncing Ball");

ball.setAccessibleText(text);

ball.setAccessibleHelp("This is bouncing ball, use the primary action to start animation");

…


VoiceOver on a TableView


New Controls• Spinner control has been missing for a long time• Applications need the ability to filter and format text fields• Applications need to use standard dialogs to interact with the user– Alert– TextInputDialog– ChoiceDialog

• Applications need to create their own dialogs


Spinner• Single line text field with up/down arrows• Values are one of:– Range of numbers (int or double)–Observable list of items

• Select value or list item from a sequence• Field can be editable or not


Filtered Text• TextInputControl has new TextFormatter property– Restricts and format the text that can be displayed and typed

• TextFormatter has one or both of:– Filter -- intercepts and can modify or reject text changes– ValueConverter -- A StringConverter that converts between the values and text– Several predefined converters in javafx.util.converter package


Using a Filter to Limit Text Length• A text filter is a lambda that returns the Change argument (or null)• API on Change is used to get and set the new edit state (text, caret etc.)

// Simple filter to limit text to 4 characters or less

TextFormatter<String> formatter1 = new TextFormatter<>(c -> c

.getControlNewText().length() > 4 ? null : c);

textField1.setTextFormatter(formatter1);


Using a Value Converter to Convert to a Number• A value converter is a standard JavaFX Converter• Use TextFormatter.getValue() to get the converted value

// Simple number converter

NumberStringConverter valConv = new NumberStringConverter();

TextFormatter<Number> formatter2 = new TextFormatter<>(valConv);

textField2.setTextFormatter(formatter2);


Dialogs• Framework for modal and non-modal dialogs• Base Dialog class provides common dialog capability– Three preconfigured Dialog subclasses– Define your own custom dialog if needed

• Properties– DialogPane (content)–Modality (used to disable other windows)–Owner window– Blocking (showAndWait) and non-blocking (show) methods


Predefined Dialogs• Alert– Standard information and confirmation dialogs– Specify list of ButtonTypes (optional)

• Example: Alert alert = new Alert(AlertType.CONFIRMATION);

ButtonType result = alert.showAndWait().get();

if (result == ButtonType.OK) {

// Do something...

}


Predefined Dialogs• ChoiceDialog– Item selection via a combo-box– Confirm with OK/Cancel buttons

• Example: ArrayList<String> list = …•

ChoiceDialog<String> dlg = new ChoiceDialog<>(list.get(0), list);

dlg.showAndWait().ifPresent(val -> {

System.out.println("Selected: " + val);

});


Predefined Dialogs• TextInputDialog– Enter data in a TextField– Confirm with OK/Cancel buttons

• Example: TextInputDialog dlg = new TextInputDialog("Jonathan");

dlg.showAndWait().ifPresent(name -> {

System.out.println("Your name is: " + name);

});


LCD Text on Canvas• Canvas has immediate-mode drawString API• 8u40 adds “LCD” font-smoothing mode– setFontSmoothingType(FontSmoothingType.LCD);

• Only takes effect on opaque background– Use fillRect(0, 0, w, h) with an opaque color


3D User-Defined Normals• TriangleMesh now has per-vertex surface normals• Can be used as an alternative to smoothing group–More efficient in most cases–More convenient if you already have vertex normals–Many loaders include vertex normals


JavaFX 9: Coming Not So Soon


JavaFX 9: Coming Not So Soon• JDK9 Modularity (Jigsaw)• RichTextEditor (?)• Image Writing (?)• …

But we need help. The focus for 9 is bug fixing and performance.


Conclusion / Summary


Conclusion / Summary• JavaFX is a full featured UI toolkit• Significant functionality has been added in each release– 3D support, printing, BIDI, accessibility, …

• Comprehensive and complete applications are possible– Significant functionality over AWT/Swing is built into the toolkit

• Very few gaps remain between FX and AWT/Swing


Safe Harbor StatementThe 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.

javafx 8: new and noteworthy steve northover (client architect) kevin rushforth (consulting member...

Documents

oracle andor

oracle jdk slide

javafx 8u40

sole discretion of oracle

d support

swt integration slide

d models

d attributes