Chapter 14 Java FX Basics Liang Introduction to

Objectives F F F To distinguish between Java. FX, Swing, and AWT (§ 14. 2). To write a simple Java. FX program and understand the relationship among stages, scenes, and nodes (§ 14. 3). To create user interfaces using panes, UI controls, and shapes (§ 14. 4). To use binding properties to synchronize property values (§ 14. 5). To use the common properties style and rotate for nodes (§ 14. 6). To create colors using the Color class (§ 14. 7). To create fonts using the Font class (§ 14. 8). To create images using the Image class and to create image views using the Image. View class (§ 14. 9). To layout nodes using Pane, Stack. Pane, Flow. Pane, Grid. Pane, Border. Pane, HBox, and VBox (§ 14. 10). To display text using the Text class and create shapes using Line, Circle, Rectangle, Ellipse, Arc, Polygon, and Polyline (§ 14. 11). To develop the reusable GUI components Clock. Pane for displaying an analog clock (§ 14. 12). Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 2

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

Introduction F There are two sets of Java APIs for graphics programming: – AWT (Abstract Windowing Toolkit) and – Swing AWT API was introduced in JDK 1. 0. Most of the AWT components have become obsolete and should be replaced by newer Swing components. F Swing API, a much more comprehensive set of graphics libraries that enhances the AWT, was introduced as part of Java Foundation Classes (JFC) after the release of JDK 1. 1. F F JFC consists of Swing, Java 2 D, Accessibility, Internationalization, and Pluggable Lookand-Feel Support APIs. JFC was an add-on to JDK 1. 1 but has been integrated into core Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All Java since JDK 1. 2. rights reserved. 4

Java. FX F Java. FX is a software platform for creating and delivering desktop applications, as well as rich internet applications (RIAs) that can run across a wide variety of devices. F Java. FX is intended to replace Swing as the standard GUI library for Java SE, but both will be included for the foreseeable future. IFX is just a name, which is normally related with sound or visual effects in the javafx i was in the belief that the fx was function. . FIPS stands for the Federal Information Processing Standardization Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 5

Java. FX vs Swing and AWT F Swing and AWT are replaced by the Java. FX platform for developing rich Internet applications. F When Java was introduced, the GUI classes were bundled in a library known as the Abstract Windows Toolkit (AWT). F AWT is fine for developing simple graphical user interfaces, but not for developing comprehensive GUI projects. In addition, AWT is likely to platform-specific bugs. F The AWT user-interface components were replaced by a more robust, versatile, and flexible library known as Swing components. F Swing components are painted directly on canvases using Java code. Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 6

// Create AWT Button Example // This java example shows how to create a Button using AWT Button class. import java. applet. Applet; import java. awt. Button; /* <applet code="Create. AWTButton. Example" width=200 height=200> </applet> */ public class Create. AWTButton. Example extends Applet{ public void init(){ /* * To create a button use * Button() constructor. */ Button button 1 = new Button(); /* * Set button caption or label using * void set. Label(String text) * method of AWT Button class. */ button 1. set. Label("My Button 1"); /* * To create button with the caption use * Button(String text) constructor of * AWT Button class. */ Button button 2 = new Button("My Button 2"); //add buttons using add method add(button 1); add(button 2); } Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All } rights reserved. 7

Links for API Resources F You need to check the JDK API specification (http: //docs. oracle. com/javase/7/docs/api/index. html) for the AWT and Swing APIs while reading this chapter. The best online reference for Graphics programming is the "Swing Tutorial" @ http: //docs. oracle. com/javase/tutorial/uiswing/. For advanced 2 D graphics programming, read "Java 2 D Tutorial" @ http: //docs. oracle. com/javase/tutorial/2 d/index. html. Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 8

Programming GUI with AWT Java Graphics APIs - AWT and Swing - provide a huge set of reusable GUI components, such as: – Button – text field label, – choice, – panel and – frame for building GUI applications. Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 9

AWT Packages F F AWT is huge! It consists of 12 packages Swing is even bigger, with 18 packages as of JDK 1. 7!. Fortunately, only 2 packages - java. awt andjava. awt. event - are commonlyused. The java. awt package contains the core AWT graphics classes: u u F The java. awt. event package supports event handling: u u u F GUI Component classes (such as Button, Text. Field, and Label), GUI Container classes (such as Frame, Panel, Dialog and Scroll. Pane), Layout managers (such as Flow. Layout, Border. Layout and Grid. Layout), Custom graphics classes (such as Graphics, Color and Font). Event classes (such as Action. Event, Mouse. Event, Key. Event and Window. Event), Event Listener Interfaces (such as Action. Listener, Mouse. Listener, Key. Listener and Window. Listener), Event Listener Adapter classes (such as Mouse. Adapter, Key. Adapter, and Window. Adapter). AWT provides a platform-independent and device-independent interface to develop graphic programs that runs on all platforms, such as Windows, Mac, and Linux. Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 10

import java. awt. *; // Using AWT container and component classes import java. awt. event. *; // Using AWT event classes and listener interfaces // An AWT program inherits from the top-level container java. awt. Frame public class AWTCounter extends Frame implements Action. Listener { private Label lbl. Count; // Declare component Label private Text. Field tf. Count; // Declare component Text. Field private Button btn. Count; // Declare component Button private int count = 0; // Counter's value /** Constructor to setup GUI components and event handling */ public AWTCounter () { set. Layout(new Flow. Layout()); // "super" Frame sets its layout to Flow. Layout, which arranges the components // from left-to-right, and flow to next row from top-to-bottom. lbl. Count = new Label("Counter"); // construct Label add(lbl. Count); // "super" Frame adds Label tf. Count = new Text. Field("0", 10); // construct Text. Field tf. Count. set. Editable(false); // set to read-only add(tf. Count); // "super" Frame adds tf. Count btn. Count = new Button("Count"); // construct Button add(btn. Count); // "super" Frame adds Button btn. Count. add. Action. Listener(this); // Clicking Button source fires Action. Event // btn. Count registers this instance as Action. Event listener set. Title("AWT Counter"); // "super" Frame sets title set. Size(250, 100); // "super" Frame sets initial window size // System. out. println(this); // System. out. println(lbl. Count); // System. out. println(tf. Count); // System. out. println(btn. Count); set. Visible(true); // "super" Frame shows /** The entry main() method */ public static void main(String[] args) { // Invoke the constructor to setup the GUI, by allocating an instance AWTCounter app = new AWTCounter(); } /** Action. Event handler - Called back upon button-click. */ public void action. Performed(Action. Event evt) { ++count; // increase the counter value // Display the counter value on the Text. Field tf. Count. set. Text(count + ""); // convert int to String } } Output Example: AWT Counter // System. out. println(this); // System. out. println(lbl. Count); // System. out. println(tf. Count); Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All // System. out. println(btn. Count); rights reserved. } 11

Containers and Components F There are two types of GUI elements: – Component: Components are elementary GUI entities (such as. Button, Label, and Text. Field. ) – Container: Containers (such as Frame, Panel and Applet) are used to hold components in a specific layout (such as flow or grid). A container can also hold sub-containers. – GUI components are also called controls (Microsoft Active. X Control), widgets (Eclipse's Standard Widget Toolkit, Google Web Toolkit), which allow users to interact with (i. e. , control) the application through these components (such as button-click and text-entry). Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 12

http: //www 3. ntu. edu. sg/home/ehchua/programming/java/j 4 a_gui. html Liang, Introduction to Java Programming,

Basic Structure of Java. FX F Application F Override the start(Stage) method F Stage, Scene, and Nodes My. Java. FX Multiple. Stage. Demo Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. Run 14

F My Java. Fx import javafx. application. Application; import javafx. scene. Scene; import javafx. scene. control. Button; import javafx. stage. Stage; public class My. Java. FX extends Application { @Override // Override the start method in the Application class public void start(Stage primary. Stage) { // Create a button and place it in the scene Button bt. OK = new Button("OK"); Scene scene = new Scene(bt. OK, 200, 250); primary. Stage. set. Title("My. Java. FX"); // Set the stage title primary. Stage. set. Scene(scene); // Place the scene in the stage primary. Stage. show(); // Display the stage } /** * The main method is only needed for the IDE with limited * Java. FX support. Not needed for running from the command line. */ public static void main(String[] args) { launch(args); } } Multiple. Stage Demo F import javafx. application. Application; import javafx. scene. Scene; import javafx. scene. control. Button; import javafx. stage. Stage; public class Multiple. Stage. Demo extends Application { @Override // Override the start method in the Application class public void start(Stage primary. Stage) { // Create a scene and place a button in the scene Scene scene = new Scene(new Button("OK"), 200, 250); primary. Stage. set. Title("My. Java. FX"); // Set the stage title primary. Stage. set. Scene(scene); // Place the scene in the stage primary. Stage. show(); // Display the stage Stage stage = new Stage(); // Create a new stage. set. Title("Second Stage"); // Set the stage title // Set a scene with a button in the stage. set. Scene(new Button("New Stage"), 100)); stage. show(); // Display the stage } /** * The main method is only needed for the IDE with limited * Java. FX support. Not needed for running from the command line. */ //public static void main(String[] args) { // launch(args); // } } Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 15

Panes, UI Controls, and Shapes Button. In. Pane Run Liang, Introduction to Java Programming,

Display a Shape This example displays a circle in the center of the pane. Show. Circle Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. Run 17

Binding Properties import import javafx. application. Application; javafx. scene. Scene; javafx. scene. layout. Pane; javafx. scene. paint. Color; javafx. scene. shape. Circle; javafx. stage. Stage; Show. Circle. Centered Java. FX introduces a class Show. Circle. Centered extends Application { new concept called public void start(Stage primary. Stage) { // Create a pane to hold the circle binding property Pane pane = new Pane(); // Create a circle and set its properties that enables a target Circle circle = new Circle(); circle. center. XProperty(). bind(pane. width. Property(). divide(2)); object to be bound to circle. center. YProperty(). bind(pane. height. Property(). divide(2)) ; a source object. If circle. set. Radius(50); circle. set. Stroke(Color. BLACK); the value in the circle. set. Fill(Color. WHITE); pane. get. Children(). add(circle); // Add circle to the pane source object // Create a scene and place it in the stage changes, the target Scene scene = new Scene(pane, 200); primary. Stage. set. Title( "Show. Circle. Centered"); // Set the stage property is also title primary. Stage. set. Scene(scene); // Place the scene in the stage changed primary. Stage. show(); // Display the stage } automatically. The /** target object is * The main method is only needed for the IDE with limited * Java. FX support. Not needed for running from the command line. simply called a */ public static void main(String[] args) { binding object or a launch(args); Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All 18 } binding property. rights reserved.

Binding Property: getter, setter, and property getter Liang, Introduction to Java Programming, Tenth Edition,

The Color Class Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education,

The Font Class Font. Demo Liang, Introduction to Java Programming, Tenth Edition, (c) 2015

The Image Class Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education,

The Image. View Class Show. Image Liang, Introduction to Java Programming, Tenth Edition, (c)

Layout Panes Java. FX provides many types of panes for organizing nodes in a

Flow. Pane Show. Flow. Pane Liang, Introduction to Java Programming, Tenth Edition, (c) 2015

Grid. Pane Show. Grid. Pane Run Liang, Introduction to Java Programming, Tenth Edition, (c)

Border. Pane Show. Border. Pane Liang, Introduction to Java Programming, Tenth Edition, (c) 2015

HBox Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All

VBox Show. HBox. VBox Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson

Shapes Java. FX provides many shape classes for drawing texts, lines, circles, rectangles, ellipses, arcs, polygons, and polylines. Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 30

Text Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All

Text Example Show. Text Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson

Line Show. Line Run Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson

Rectangle Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All

Rectangle Example Show. Rectangle Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson

Circle Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All

Ellipse Show. Ellipse Run Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson

Arc Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All

Arc Examples Show. Arc Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson

Polygon and Polyline Show. Arc Liang, Introduction to Java Programming, Tenth Edition, (c) 2015

Polygon Show. Polygon Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education,

Case Study: The Clock. Pane Class This case study develops a class that displays a clock on a pane. Clock. Pane Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights reserved. 42