Java Core | JavaFX 2.0: Great User Interfaces in Java | Simon Ritter
Download as PPTX, PDF4 likes2,397 views
JavaFX 2.0 is an evolution of the Java Rich Client Platform designed to enhance application development for modern user needs. It incorporates web technology, improved APIs, and a focus on rich media and animations, while providing tools for building visually engaging applications. The upcoming roadmap includes further integration with existing Java applications and a commitment to provide a powerful, extensible platform for developers.
![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)
5](https://image.slidesharecdn.com/4simonritterjavafx2-0-111108112643-phpapp01/85/Java-Core-JavaFX-2-0-Great-User-Interfaces-in-Java-Simon-Ritter-5-320.jpg)
![Creating A Simple Application
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);
}
}
6 6](https://image.slidesharecdn.com/4simonritterjavafx2-0-111108112643-phpapp01/85/Java-Core-JavaFX-2-0-Great-User-Interfaces-in-Java-Simon-Ritter-6-320.jpg)
![Let's Compare: JavaFX 1.x
import javafx.application.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
Stage {
scene:Scene{
Content:[
Circle {
centerX: 50
centerY: 50
radius: 50
fill: Color.RED
}
]
}
}
7](https://image.slidesharecdn.com/4simonritterjavafx2-0-111108112643-phpapp01/85/Java-Core-JavaFX-2-0-Great-User-Interfaces-in-Java-Simon-Ritter-7-320.jpg)
![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);
}
}
8](https://image.slidesharecdn.com/4simonritterjavafx2-0-111108112643-phpapp01/85/Java-Core-JavaFX-2-0-Great-User-Interfaces-in-Java-Simon-Ritter-8-320.jpg)
Java Core | JavaFX 2.0: Great User Interfaces in Java | Simon Ritter
- 1. 1
- 2. <Insert Picture Here> JavaFX 2.0 Simon Ritter Technology 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. 3
- 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 4
- 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) 5
- 6. Creating A Simple Application 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); } } 6 6
- 7. Let's Compare: JavaFX 1.x import javafx.application.*; import javafx.scene.shape.*; import javafx.scene.paint.*; Stage { scene:Scene{ Content:[ Circle { centerX: 50 centerY: 50 radius: 50 fill: Color.RED } ] } } 7
- 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); } } 8
- 9. 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 9 9
- 10. Scene Graph • Directed Acyclic Graph • Parents & children • Representation of a GUI • Drawing primitives and controls 10
- 11. Types of Nodes • Shapes • Images • Media • Web browser • Text • Controls • Charts • Group • Container 11
- 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) 1 2 12
- 13. Controls Many more... 13
- 14. ListView ListView 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); 14
- 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 15
- 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 16
- 17. Charts 17
- 18. Effects ImageView sample = new ImageView(BOAT); final Reflection reflection = new Reflection(); reflection.setFraction(0.2); sample.setEffect(reflection); getChildren().add(sample); 18
- 19. And Many More Effects... GaussianBlur InnerShadow SepiaTone 19
- 20. Transforms 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); rect.setTranslateX(40); rect.setTranslateY(10); 20
- 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 2 1 21
- 22. Layouts • Pane • AnchorPane • BorderPane • FlowPane • GridPane • HBox • StackPane • TilePane • VBox 22
- 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 23
- 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 24
- 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); 25
- 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)); 26
- 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)); 27
- 28. Animations • Timeline based keyframe animations • Animated transitions 28
- 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 29
- 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 3 0 30
- 31. Event Handling Bubbled up • All of our events extend an Event object Capture • Event flow: Parent • Capturing • Bubbling Child • EventHandler callback for events • setOnMouseClicked(EventHandler<MouseEvent>) • addMouseHandler(MouseEventID, EventHandler) • addMouseFilter(MouseEventID, EventHandler) • Events can be consumed 3 1 31
- 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 3 2 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 3 3 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 34
- 35. JavaFX Roadmap Roadmap JavaFX JavaFX 3.0 JavaFX 2.0 GA JavaFX 2.x Included in JDK 8 Windows GA Mac OS X GA Concurrent OS support (Windows, Mac OS, Linux) Mac OS X Dev. Preview Linux Dev. Preview 2011 2012 2013 2014 JavaFX Beta JavaFX 2.0.2 JavaFX 2.x Windows Beta JDK 7 co-install Linux GA Mac OS X EA JavaFX NetBeans.next JavaFX Scene Builder EA Scene Builder GA JavaFX 3.0 Support more NetBeans 7.1 Beta JavaFX 2.0 Support 35
- 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 36
- 37. 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. 37 37
- 38. <Insert Picture Here> Thank You
Editor's Notes
- #36: Here is the roadmap for JavaFX releases over the next couple of years. As you can see, the release of JavaFX 2.0 on Mac OS and Linux is still work in progress, but we are committed to it.One driving factor is that JavaFX will become integral part of the JDK releases starting with JDK8, which means JavaFX must be available on most of the same platforms as Java SE. But this go even further: starting with the JavaFX 2.0 release, we will align all the JavaFX security and limited feature release on the Java SE schedule. The main difference with Java SE is that weplan to include new features in most of our limited releases. Stay tuned for more!