CS 112 Programming 2 Lecture 12 - Rana Atef …

1 Liang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 1 Chapter 14 JavaFX BasicsLiang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 2 MotivationsJavaFX is a new framework for developing Java GUI programs. The JavaFX API is an excellent example of how the object-oriented principle is applied. This chapter serves two purposes. First, it presents the basics of JavaFX Programming . Second, it uses JavaFX to demonstrate OOP. Specifically, this chapter introduces the framework of JavaFX and discusses JavaFX GUI components and their relationships.

2 Liang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 3 Objectives To distinguish between JavaFX, Swing, and AWT ( ). To write a simple JavaFX program and understand the relationship among stages, scenes, and nodes ( ). To create user interfaces using panes, UI controls, and shapes ( ). To use binding properties to synchronize property values ( ). To use the common properties styleand rotatefor nodes ( ). To create colors using the Colorclass ( ). To create fonts using the Fontclass ( ). To create images using the Imageclass and to create image views using the ImageViewclass ( ).

3 To layout nodes using Pane, StackPane, FlowPane, GridPane, BorderPane, HBox, and VBox( ). To display text using the Textclass and create shapes using Line, Circle, Rectangle, Ellipse, Arc, Polygon, and Polyline( ). To develop the reusable GUI components ClockPanefor displaying an analog clock ( ).Liang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 4 JavaFX vs. Swing & AWT Initially Java came with the AWT(Abstract Windows Toolkit) GUI (Graphical User Interface) library. AWT is fine for developing simple graphical user interfaces, but not for developing comprehensive GUI projects.

4 AWT components are platform-dependent AWT was replaced by a more robust, versatile, and flexible library, Swing, in 1998. Swing components are platform-independent Java 8 introduced in 2014 the JavaFXGUI framework for developing Rich Internet Applications (RIA) that provide a desktop-like experience on Web applications. JavaFX is an excellent example of how the object-oriented principles are applied. JavaFX components are platform-independentLiang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. Structure of a JavaFX ProgramEvery JavaFX program is defined in a class that Stage Scene Button start(Stage) Nodes ( , Button) the Nodes in the the Sceneon StageLiang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc.

5 All rights reserved. Panes, UI Controls, and start(Stage) Nodes in a the Parentin the the Sceneon StageLiang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. Example: Circleat the Center of a Pane7 (0, 0) X Axis Y Axis (x, y) x y Java Coordinate System X Axis Conventional Coordinate System (0, 0) Y Axis ShowCircleRunLiang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. Property Binding Property binding enables a property of a targetobjectto be bound to a property of the source the value of the property in the source object changes, the corresponding target property changes automatically The target object is called a binding object or a binding property.

6 The source object is called a bind-able or observable object Syntax: (source); ().bind( ().divide(2)); ().bind( ().divide(2));The center of the circlewill always remain in the middle of the paneLiang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. Property Binding: Accessor,Mutator&Property Accessor9 SyntaxExample Each binding property ( , centerX) in a JavaFX class ( , Circle) has the usual accessor( , getCenterX()) and a mutator( , setCenterX(double)) Each binding property also has a propertyaccessorfor returning the property itself.

7 The name for this property accesormethod should be the property name followed by the word PropertyLiang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. Uni-and Bi-directionalBinding10 BidirectionalBindingDemoRunBindingDemoRu n The binding demonstrated in the ShowCircleCenteredexample is known as unidirectional binding Occasionally, it is useful to synchronize two properties so that a change in one property is reflected in another object, and vice versa. This is called a bidirectional binding If the target and source are both binding properties and observable properties, they can be bound bi-directionally using bindBidirectional()Liang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc.

8 All rights reserved. NodeProperties: style& rotate11 The abstract Nodeclass defines many properties & methods. Here we focus upon two of those properties: styleand rotate Syntax for setting the styleof a node is style property is defined with a prefix -fx- Multiple styleproperties for a node can be set together separated by semicolon. For example, the ("-fx-stroke: black; -fx-fill: red;");sets two style properties for a circle The rotateproperty is used to specify an angle in degrees for rotating the node. For example, the following code rotates a button by 80 (80);NodeStyleRotateDemoRunLiang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc.

9 All rights reserved. 12 The ColorClassLiang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 13 The FontClassFontDemoRunLiang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 14 The Image& ImageViewClasses The Imageclass represents a graphical image andis used for loadingan image from a specified filename or URL. For example: new Image(" ") creates an Imageobject for the file the directory imagein the Java class directory new Image(" ")creates an Imageobject for the image file in the URL on the Web ImageViewis used for displaying an Imageobject.

10 For example, Imageimage= new Image(" ");ImageViewimageView= new ImageView(image);Liang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 15 ShowImageRunImageViewImageLiang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 16 Paneand its Subclasses Pane(or any of its subclasses) is used for organizing nodes The Paneis then placed in a Scene, which is placed on a Stage The Stageis then revealed on the screen using show() Liang, Introduction to Java Programming , Tenth Edition, (c) 2015 Pearson Education, Inc.