1. Lecture 7:Introduction to JavaFX Michael Hsu CSULA

2. 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

3. 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

4. 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  Do not use Swing/AWT examples copied from online sources  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

5. Getting JavaFX to work on your computer  Couple of options:  Download the all-in-one eclipse package  http://www.eclipse.org/efxclipse/install.html#for-the-lazy http://www.eclipse.org/efxclipse/install.html#for-the-lazy  Install the e(fx)clipse plugin in your existing eclipse  http://www.eclipse.org/efxclipse/install.html#for-the-ambitious http://www.eclipse.org/efxclipse/install.html#for-the-ambitious  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

6. JavaFX HelloWorld Example // import javafx.scene.control.Button, not java.awt.Button!!!!! public class HelloWorld extends Application { public static void main(String[] args) { launch(args); } // Override the start method in the Application class @Override 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(); }

7. JavaFX HelloWorld Example: Start public class HelloWorld extends Application { public static void main(String[] args) { launch(args); } // Override the start method in the Application class @Override 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

8. JavaFX HelloWorld Example: Controls public class HelloWorld extends Application { public static void main(String[] args) { launch(args); } // Override the start method in the Application class @Override 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

9. 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

10. 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 class @Override 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

11. JavaFX Example: Multiple Stages public class MultiStageDemo extends Application { public static void main(String[] args) { launch(args); } // Override the start method in the Application class @Override 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(); Stage secondStage = new Stage(); secondStage.setTitle("Second Stage"); secondStage.setScene(new Scene(new Label("This is exmaple of label"))); secondStage.show(); }

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

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

14. Using Panes  Required Reading: http://docs.oracle.com/javafx/2/layout/builtin_layouts.htm http://docs.oracle.com/javafx/2/layout/builtin_layouts.htm  Familiar yourself with the built in layouts  You can mix and match different types of layouts  Panes are also nodes  You can have an HBox in a BorderPane, a VBox in a StackPane, etc

15. 15 Panes, UI Controls, and Shapes Read: http://docs.oracle.com/javafx/2/scenegraph/jfxpub-scenegraph.htm

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

17. 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. 18 Binding Property: getter, setter, and property getter

19. Common Properties and Methods for Nodes  style: set a JavaFX CSS style  https://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm https://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm  You can use both in-line code styling and external stylesheets, just like HTML.  rotate: Rotate a node

20. 20 The Image Class

21. 21 The ImageView Class

22. JavaFX Resources  Oracle JavaFX Portal:  http://docs.oracle.com/javase/8/javase-clienttechnologies.htm http://docs.oracle.com/javase/8/javase-clienttechnologies.htm  How to Use Layouts:  http://docs.oracle.com/javafx/2/layout/builtin_layouts.htm http://docs.oracle.com/javafx/2/layout/builtin_layouts.htm  UI Controls:  http://docs.oracle.com/javase/8/javafx/user-interface- tutorial/ui_controls.htm#JFXUI336 http://docs.oracle.com/javase/8/javafx/user-interface- tutorial/ui_controls.htm#JFXUI336  Property Binding:  http://docs.oracle.com/javase/8/javafx/properties-binding- tutorial/binding.htm#JFXBD107 http://docs.oracle.com/javase/8/javafx/properties-binding- tutorial/binding.htm#JFXBD107