Lecture 7:Introduction to JavaFX Michael Hsu CSULA

A New Era  You’ve learned most of the basic concepts of Java  You should be able to pick up any library, do some research, and use it in your project  From now and on, there are too many methods available in the libraries that we’re covering, we will not go over all of them in class  It’s up to you to figure it out

GUI Applications  So far, you’ve probably only worked on console applications  Provide input from keyboard  Read input using java.util.Scanner  Do something  Print result to System.out  It’ll be nice to have a GUI application  Examples: Microsoft Word, Apps on your phone, Your browser  We cover the basic material before covering GUI programming because it requires use of all the basic knowledge you’ve learned so far  We will cover JavaFX in this class

Why JavaFX  JavaFX is a new framework for developing Java GUI Programs  Graphical functionality is provided by the library, no need to write your own  Some Java History  Ancient code: AWT  Until Java 7: Swing (Will never die, most current application still use it)  Java 8 and later: JavaFX  Good way to review and use all the knowledge you acquired so far  Object Oriented Programming  The principles you learn in this class will apply to many UI frameworks you learn in the future

Getting JavaFX to work on your computer  Couple of options:  Download the all-in-one eclipse package   Install the e(fx)clipse plugin in your existing eclipse   Modify the Java Compiler Option for a JavaFX Project (not recommended)  The reason why eclipse shows an error is JavaFX may not be available on all machines, it is part of the “extended API”  Go to Window -> Preferences -> Java -> Compiler -> Errors/Warnings. Then under Deprecated and restricted API, change “Forbidden reference (access rules)” to ignore.  Compiling from command line should work as long as you’re using the latest JDK

JavaFX HelloWorld Example public class HelloWorld extends Application { public static void main(String[] args) { launch(args); } // Override the start method in the Application public void start(Stage primaryStage) { // Create a scene and place a button in the scene Button btOK = new Button("OK"); Scene scene = new Scene(btOK, 200, 250); primaryStage.setTitle("MyJavaFX"); // Set the stage title primaryStage.setScene(scene); // Place the scene primaryStage.show(); }

JavaFX HelloWorld Example: Start public class HelloWorld extends Application { public static void main(String[] args) { launch(args); } // Override the start method in the Application public void start(Stage primaryStage) { // Create a scene and place a button in the scene Button btOK = new Button("OK"); Scene scene = new Scene(btOK, 200, 250); primaryStage.setTitle("MyJavaFX"); // Set the stage title primaryStage.setScene(scene); // Place the scene primaryStage.show(); } Starting Point of a JavaFX application Main Method can be omitted when running from console/with e(fx)clispe installed A primary stage is created automatically

JavaFX HelloWorld Example: Controls public class HelloWorld extends Application { public static void main(String[] args) { launch(args); } // Override the start method in the Application public void start(Stage primaryStage) { // Create a scene and place a button in the scene Button btOK = new Button("OK"); Scene scene = new Scene(btOK, 200, 250); primaryStage.setTitle("MyJavaFX"); // Set the stage title primaryStage.setScene(scene); // Place the scene primaryStage.show(); } Individual UI components are called controls Example: Labels, Buttons

Some Terminologies  Stage  Represents windows, top level container  Many setter methods: setTitle(), setWidth()  You can create multiple stages and use one or another  Scene  Each stage has a scene  Scene holds controls (buttons, labels, etc)  Pane  You can put controls in Scenes directly, but we usually Panes for better layout  Examples: StackPane, BorderPane, HBox, VBox

JavaFX HelloWorld Example: Creating the Stage public class HelloWorld extends Application { public static void main(String[] args) { launch(args); } // Override the start method in the Application public void start(Stage primaryStage) { // Create a scene and place a button in the scene Button btOK = new Button("OK"); Scene scene = new Scene(btOK, 200, 250); primaryStage.setTitle("MyJavaFX"); // Set the stage title primaryStage.setScene(scene); // Place the scene primaryStage.show(); } Place the scene in the Stage Stage.show() makes window appear

Example: Multiple Stages

Examples: Using Panes

13 Basic Structure of JavaFX  Application  Override the start(Stage) method  Stage, Scene, and Nodes

14 Layout Panes JavaFX provides many types of panes for organizing nodes in a container.

15 Panes, UI Controls, and Shapes

16 Display a Shape This example displays a circle in the center of the pane. ShowCircle.java

17 Binding Properties  JavaFX introduces a new concept called binding property  Enables a target object to be bound to a source object.  If the value in the source object changes, the target property is also changed automatically.  The target object is simply called a binding object or a binding property. ShowCircleCentered.java BidrectionalBinding.java

18 Binding Property: getter, setter, and property getter

19 Common Properties and Methods for Nodes  style: set a JavaFX CSS style  rotate: Rotate a node

20 The Image Class

21 The ImageView Class