Java GUI using JavaFX 03-JavaGUI PDF

JavaFx Tan Tien Ping 1 Tan Tien Ping (Dr.), School of Computer Sciences, Universiti Sains Malaysia Java Graphical User Interface (GUI) There are 3 frameworks that can be used to build a GUI...

JavaFx Tan Tien Ping 1 Tan Tien Ping (Dr.), School of Computer Sciences, Universiti Sains Malaysia Java Graphical User Interface (GUI) There are 3 frameworks that can be used to build a GUI in Java. Standard Widget Toolkit (SWT): SWT implementation accesses the native GUI libraries of the operating system. Swing: Swing provides a richer set of GUI components that SWT. Instead of wrapping native GUI components, it accesses to the low level OS drawing routines directly using Java2D. JavaFX: Design to run as a Desktop app. and mobile app, inside a Web browser and/or as Web Start application. The successor of Swing. Examples are from: http://docs.oracle.com/javafx/2/scenegraph/jfxpub-scenegraph.htm http://docs.oracle.com/javafx/2/get_started/jfxpub-get_started.htm 2  Users with Eclipse or older IntelliJ (before Java WYSIWYG Java IDE SDK17) can follow the setup pg. 4-pg. 20. NetBean by default provides “What You See Is What You Get” or Drag/Drop feature. For Eclipse, you have to install additional plugin to have the WYSIWYG feature. There are two choices. Download JavaFx libraries. They are.jar files. JavaFx does not come with Java JDK. Download: https://gluonhq.com/products/javafx/ Add as usual like any library external jar files. JavaFx plugin E(fx)clipse + Scene Builder. Scene Builder installation: http://gluonhq.com/labs/scene-builder/ Drag and drop GUI development with FXML Note: make sure Scene Builder version (e.g. version 11) is the same as Java version (11) and JavaFx version (11). Swing plugin for Eclipse: WindowBuilder (not cover here) Installation: Help> Install New Software > 3 Download Scene builder for your OS. Install Scene builder. Download JavaFx SDK for your OS. Unzip the SDK. 4 Eclipse and JavaFx 5 Install E(fx)clipse. 6 7 Set up SceneBuilder path in Eclipse. 8 JavaFx library has to be added like any external library to a project. 9 10  Java VM arguments have to add: --module-path “C:\\your\\javafx\\path\\lib” --add-modules=javafx.controls --add- modules=javafx.fxml. Note: Windows path use ‘\\’, Linux and Mac path use ‘/’ do not use “ ” for mac 11 IntelliJ and JavaFx 12  Latest IntelliJ with JDK 21 or higher Starting a Project 13 Settings: Set the location of your Scene Builder at IntelliJ 14 Run the Hello World GUI! 15 Dialog & Controls for Interface Design With JavaFx 16 Dialog JavaFx ready-to-used Dialog: Refer to http://code.makery.ch/blog/javafx-dialogs-official/ 17 JavaFx Controls JavaFx Components: Refer to http://docs.oracle.com/javafx/2/ui_controls/overview.htm Buttons Toggle Buttons Labels Radio Buttons Checkbox Choice box 18  Textfield Scroll Pane Scrollbar List TextArea Tree View Table Separator Slider Progress bar 19  Hyperlink Combo box Menu bar Password field Tooltip Accordion 20  File Chooser Color Picker 21 Creating a GUI with JavaFx There are 3 ways to create a GUI using JavaFx. You can create and design the GUI you want by: Using a.java file The whole GUI is in the Java file. Using a.java + CSS file The GUI design is separated from the codes and put in a CSS file. Using a.java + FXML file The whole GUI is in a FXML (a type of XML) file. 22 Basic JavaFx GUI 23 JavaFx A Stage contains the UI of a JavaFX app. Typically consists of a title bar and border. A Scene is the top container in the JavaFX scene graph. A Scene holds the graphical elements that are displayed on the Stage. 24 JavaFx Stage: the Window. Consists of at least one Scene. Scene/ scene graph: a tree structure which consists of nodes (branch and leaf). Different classes can act as either branch or leaf. Root Group node Branch Leaf node Leaf node Circle Rectangle Region node Image Leaf node Leaf node Text View 25 Steps in JavaFx I. Create a Stage for one or more Scenes of a performance. II. Create a Scene for different actors (GUI components) to interact with the audience/user. III. Create GUI components. IV. Create variable and classes that represent the state for the components in the scene. V. Create event handlers that allows user to interact with the GUI. VI. Create timelines and transitions that animate the scene. 26  A Blank Window Create a simplest javafx window. Must be a subclass of javafx.application.Application Every window application has 3 stages: init(), start() and stop(). Init() and stop() not implemented here. The root is a class of type javafx.scene.Parent. Parent extends from javafx.scene.Node. Main() method is not required if building with JavaFX Packager tool. 27 A Window Adding a leaf node 28 A Window with Animation 29  Hello World Window When you click on the button, setOnAction() will be called (note: the codes does not show it). This method, will then call the handle() in EventHandler. Event is implemented using Observer design pattern in Java. 30  Hello World Window A layout pane describes how objects will be arrange on the window. In this example, we use a layout called FlowPane. Notice that it is also a root. FlowPane Button Button Label 31 Different Layout out of the Box Figure from: https://dzone.com/refcardz/javafx-8-1 32 GridPane 33 GridPane Before After 34 GridPane Column width (in number of pixels) Before Min, preferred, max width After 35 Experiment it, and Refer to API Doc! 36 Create A JavaFx GUI Using CSS 37 Changing the Looks with CSS Cascading Style Sheets (CSS) is a plain text file format, first used for formatting content on web pages. By using a CSS file, the content (text, button …) and design (the looks and feel, font size, color, border …) and can be separated. JavaFX can also make use of CSS file to format the components of an application, instead of writing it explicitly inside the Java file. JavaFX CSS is based on the W3C CSS version 2.1. JavaFX CSS also has some extensions to CSS in support of specific JavaFX features. Next, we will use CSS to change the look of a Window. We will create a JavaFx project in Eclipse. (Note: required the installation of E(fx)clipse plugin) 38 E(fx)clipse: JavaFx 39 cssdemo 40 Auto generated Main.java code and CSS file by Eclipse 41 For demonstration, we will reuse the codes from LoginWindow that we tested previously. 42 Add a new CSS file and rerun the code. Pseudo-class My directory Put the new.css file at src/cssdemo/ Right click & Refresh the directory at Eclipse IDE 43 Styling FX Buttons with CSS Check out the CSS for different styles of button here : http://fxexperience.com/2011/12/styling-fx-buttons-with-css/ 44 Figure from: http://fxexperience.com/2011/12/styling-fx-buttons-with-css/ JavaFx CSS Reference 45 Ref: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html Create a JavaFx GUI with FXML F 46 Creating a Java GUI Using FXML In the following example, we will use Scene Builder WYSIWYG features to build a GUI. The information of the GUI is kept in a file called FXML. The FXML will be interpreted during run time directly by FXMLLoader, where it Parse the FXML file Create and initialize JavaFX objects Link the UI components to the controller 47 The drag and drop facility in Scene Builder allows user to design the GUI easily, instead of writing code. The GUI setting is kept in xml style file. 48 49 50 The automatic created FXML file. There’s an error here. Ignore for now. 51 Change the layout that you want by modifying the FXML file. 52 Right click on the FXML file. Open in SceneBuilder for designing your GUI. 53 54 55 56 57 After done. Save it! 58 FXML file updated. 59 Create the “missing” Controller, by create an empty Java class. 60 Modify the HelloWorld program by updating your FXML file. Run the program. 61 Declare the components in your Controller. 62 Assign the correct id to every component. 63 Implement the click action in the Controller. 64 Assign the method to the component. 65 66 Appendix 67 JavaFX 8 68 Install E(fx)clipse plugin. 69 Install E(fx)clipse plugin. 70 Install Scene Builder 71