java core | javafx 2.0: great user interfaces in java | simon ritter
DESCRIPTION
2011-11-02 | 01:30 PM - 02:15 PM | VictoriaWith the recent release of Java SE 7 the Java platform is back on the move, addressing the needs of developers as platforms and applications change. This session will briefly recap recent developments in Java SE 7 and the Java Community Process before moving onto the current ideas for features in Java SE 8. Discussions are underway within Oracle about the main themes for Java SE 9 and beyond. We'll conclude with an open discussion around what features the audience would like to see included in future releases of the Java platform. Key points from this will be passed back to Java SE product management in Oracle.TRANSCRIPT
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