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


Published on

2011-11-02 | 01:30 PM - 02:15 PM | Victoria
With 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.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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!
  • Java Core | JavaFX 2.0: Great User Interfaces in Java | Simon Ritter

    1. 1. 1
    2. 2. <Insert Picture Here>JavaFX 2.0Simon RitterTechnology Evangelist
    3. 3. What is JavaFX 2.0JavaFX is the evolution of the Java richclient platform, designed to address the needs of today‟s and tomorrow‟s customers. 3
    4. 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. 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. 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. 7. Lets 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 } ] }} 7
    8. 8. Lets Compare: JavaFX 2.0public 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. 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 normal9 9
    10. 10. Scene Graph• Directed Acyclic Graph• Parents & children• Representation of a GUI• Drawing primitives and controls 10
    11. 11. Types of Nodes• Shapes• Images• Media• Web browser• Text• Controls• Charts• Group• Container 11
    12. 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. 13. Controls Many more... 13
    14. 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(;//listView.setCellFactory(Cells.ListView.rotateLabel(90));listView.getSelectionModel().setMultipleSelectionEnabled(true);getChildren().add(listView); 14
    15. 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. 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. 17. Charts 17
    18. 18. EffectsImageView sample = new ImageView(BOAT);final Reflection reflection = new Reflection();reflection.setFraction(0.2);sample.setEffect(reflection);getChildren().add(sample); 18
    19. 19. And Many More Effects... GaussianBlur InnerShadow SepiaTone 19
    20. 20. TransformsRectangle 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. 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. 22. Layouts• Pane• AnchorPane• BorderPane• FlowPane• GridPane• HBox• StackPane• TilePane• VBox 22
    23. 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. 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. 25. Simple Binding Exampleprivate 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. 26. Expression ExampleDefining expressions with Fluent API: result = a*b + c*dDoubleExpression a,b,c,d;DoubleBinding result = a.multiply(b).add(c.multiply(d)); 26
    27. 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*dimport static javafx.beans.binding.Bindings.*;NumberBinding foo = add (multiply(a, b),multiply(c,d)); 27
    28. 28. Animations• Timeline based keyframe animations• Animated transitions 28
    29. 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. 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. 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. 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. 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. 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. 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. Preview2011 2012 2013 2014JavaFX Beta JavaFX 2.0.2 JavaFX 2.x Windows Beta JDK 7 co-install Linux GA Mac OS X EA JavaFX JavaFX Scene Builder EA Scene Builder GA JavaFX 3.0 Support more NetBeans 7.1 Beta JavaFX 2.0 Support 35
    36. 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 • 36
    37. 37. The preceding is intended to outline our generalproduct direction. It is intended for informationpurposes only, and may not be incorporated into anycontract. It is not a commitment to deliver any material,code, or functionality, and should not be relied upon inmaking purchasing decisions.The development, release, and timing of any featuresor functionality described for Oracle‟s products remainsat the sole discretion of Oracle. 37 37
    38. 38. <Insert Picture Here>Thank You