IT-IPT 01 - Chapter 6 - Graphical User Interface in Java

IT-IPT 01 CHAPTER 6 – Graphical User Interface in Java: Swing and JavaFx Introduction to Swing  Swing was launched in 1997 as part of JFC (Java Foundation Classes) after JDK 1.1 was release. It is used to create window-based applications. It is built on the top of AWT (Abstract Windowing T...

IT-IPT 01 CHAPTER 6 – Graphical User Interface in Java: Swing and JavaFx Introduction to Swing  Swing was launched in 1997 as part of JFC (Java Foundation Classes) after JDK 1.1 was release. It is used to create window-based applications. It is built on the top of AWT (Abstract Windowing Toolkit) API and entirely written in java. Subsequently, JFC has been an integral part of JDK starting from JDK 1.2. Swing is large it was made up of 737 classes unevenly distributed inside 18 packages.  The Java Foundation Classes (JFC) are a set of GUI components which simplify the development of desktop applications. JFC contains 3 packages: AWT (Abstract Window Toolkit), Swing, and JavaFx (Java2D). This three packages they are basically used for creating GUI in java.  DIFFERENCE BETWEEN AWT AND SWING AWT Swing  AWT components are platform-  Java swing components dependent. are platform-independent.  AWT components are heavyweight.  Swing components are lightweight.  AWT provides less  Swing provides more powerful components than Swing. components such as tables, lists, scrollpanes, colorchooser, tabbedpane etc. SWING COMPONENTS  Similar to AWT’s component classes, Swing components also have components such as Button, TextField, Label, Panel, Frame, and Applet you just need to prefix it with letter “J” e.g. JButton, JTextField and so on and so forth. The figure below shows the hierarchy of the GUI swing classes. Same as AWT, it has two class groups: containers and components. The container shall be used to house the components. A container can also hold another container because it extends the Component class. SWING COMPONENTS SWING'S TOP-LEVEL AND SECONDARY CONTAINERS 1. JFrame - for creating the main window. It has an icon, title, content pane and an optional menu bar. It also has the maximize, minimize, restore and close button at the top- right position on Windows and at the top-left position on Mac and Linux. 2. JDialog - for creating the pop-up window. It has an icon, title, content pane and a close button. 3. JApplet - for rendering applets within the browser window. And just like AWT, Swing has a similar Panel class called JPanel for grouping components. Creating a Frame using Swing inside main()  There are two ways to create a frame: 1. By creating the object of Frame class (association) 2. By extending Frame class (inheritance) List of Components Introduction to JavaFx  Same as AWT and Swing, JavaFX was developed to build GUI for Java applications. Having a rich collection of graphic libraries, it was initially designed for Rich Internet Applications (RIA) and the like such as rendering GUI for web apps with the use of a browser plugin and was just later become a part of JDK library starting from JDK 8. The main features of JavaFX are the following: 1. It was developed in Java and is a part of the JDK library since JDK 8. 2. It has CSS support for skinning. 3. It supports FXML. 4. It supports Swing interoperability where you can use Swing UI for JavaFX applications. 5. It has a WebView for the embedding of HTML content. 6. It has a 2D/3D Graphics. 7. It has a media support for: audio, video and image 8. It provides a JavaScript engine. JavaFX PACKAGES  JavaFX has 36 packages. The following are the commonly used ones:  javafx.application: JavaFX application  javafx.stage: Top-level containers  javafx.scene: Scenes and Scene Graphs.  javafx.scene.*: Controls, Layouts, and Shapes, etc.  javafx.event: Event Handling  javafx.animation: Animation Difference between AWT, Swing and JavaFx  AWT is the first generation Java GUI toolkit, Java Swing is the second generation, and the JavaFX is the third generation.  AWT components are heavyweight components, Java Swing is components are lightweight, JavaFx components are lightweight.  AWT is platform-dependent, Java Swing is platform independent, and JavaFx is platform independent.  AWT and Java Swing are used only for desktop applications, and JavaFx is used for desktop application, website and handheld devices. Diagram #1  What we need to learn  Control are the components that allow users to interact with an application or a website. They include buttons, menus, sliders, text fields, labels and so on.  Layout defines the way in which the components are arrange and seen inside a container.  Scene is the highest element of the JavaFX scene graph, containing all of the nodes visible in a window.  Stage is the top-level JavaFX container.  Event is any change of state in an input device, user action or background task. JavaFX Stage  In general, a JavaFX application will have three major components namely Stage, Scene and Nodes as shown in the following diagram.  A stage (a window) contains all the objects of a JavaFX application. It is represented by Stage class of the package javafx.stage. The primary stage is created by the platform itself. The created stage object is passed as an argument to the start() method of the Application class.  A stage has two parameters determining its position namely Width and Height. It is divided as Content Area and Decorations (Title Bar and Borders).  There are five types of style in stage:  Decorated  Undecorated  Transparent  Unified  Utility  You have to call the show() method to display the contents of a stage. JavaFX Scene  The class Scene of the package javafx.scene represents the scene object. At an instance, the scene object is added to only one stage.  You can create a scene by instantiating the Scene Class. You can opt for the size of the scene by passing its dimensions (height and width) along with the root node to its constructor. Scene scene = new Scene();  CREATE SCENE: You can create Scene Object via its constructor. As parameters you must pass the root JavaFX GUI component that is to act as the root view to be displayed inside the Scene. Here is an example of creating JavaFX Scene Object. VBox box = new VBox(); Scene scene – new Scene(VBox) Scene Graphs and Node  A scene graph is a tree-like data structure (hierarchical) representing the contents of a scene. In contrast, a node is a visual/graphical object of a scene graph.  A node may include:  Geometrical Objects such as Circle, Rectangle,  UI Controls such as Button, Label, TextField, ListView, Checkbox, etc.  Layout such as BorderPane, GridPane, FlowPane, etc.  Media Elements such as Audio, Video and Image.  Scene Graphs and Node  The Node Class of thepackage javafx.scene represents a node in JavaFX, this class is the super class of all the nodes.  Three types of node:  Root Node − The first Scene Graph is known as the Root node.  Branch Node/Parent Node − The node with child nodes are known as branch/parent nodes. Example are the Layout Classes.  Leaf Node − The node without child nodes is known as the leaf node. For example, Rectangle, Ellipse, Box, ImageView, MediaView are examples of leaf nodes. JavaFX Layouts  Hbox arranges all the nodes in our application in a single horizontal row.  Vbox arranges all the nodes in our application in a single vertical column.  BorderPane arranges the nodes in our application in top, left, right, bottom and center positions.  StackPane arranges the nodes in our application on top of another just like in a stack. The node added first is placed at the bottom of the stack and the next node is placed on top of it.  TextFlow arranges multiple text nodes in a single flow.  AnchorPane layout anchors the nodes in our application at a particular distance from the pane. Java FX Layouts (cont…)  TilePane adds all the nodes of our application in the form of uniformly sized tiles.  GridPane arranges the nodes in our application as a grid of rows and columns.  FlowPane wraps all the nodes in a flow. A horizontal flow pane wraps the elements of the pane at its height, while a vertical flow pane wraps the elements at its width. All of the above classes are all part of the package javafx.scene.layout JavaFX Layouts (cont…) JavaFX Controls  These controls are represented by different classes of the package javafx.scene.control. Here are the list of classes  Label ScrollBar  Button FileChooser  ColorPicker ProgressBar  Checkbox Slider  Choicebox ToggleButton  RadioButton TabView  ListView  TextField  PasswordField  Hyperlink JavaFX Event  Event Handling is the mechanism that controls the event and decides what should happen, if an event occurs. This mechanism has the code which is known as an event handler that is executed when an event occurs.  JavaFX provides handlers and filters to handle events. In JavaFX every event has:  Target − The node on which an event occurred. A target can be a window, scene, and a node.  Source − The source from which the event is generated will be the source of the event. In the above scenario, mouse is the source of the event.  Type − Type of the occurred event; in case of mouse event, mouse pressed, mouse released are the type of events. JavaFX Event (cont…)  JavaFX provides support to handle a wide varieties of events. The class named Event of the package javafx.event is the base class for an event.  An instance of any of its subclass is an event. JavaFX provides a wide variety of events. Some of them are are listed below.  Mouse Event − This is an input event that occurs when a mouse is clicked. It is represented by the class named MouseEvent. It includes actions like mouse clicked, mouse pressed, mouse released, mouse moved, mouse entered target, mouse exited target, etc.  Key Event − This is an input event that indicates the key stroke occurred on a node. It is represented by the class named KeyEvent. This event includes actions like key pressed, key released and key typed.  Drag Event − This is an input event which occurs when the mouse is dragged. It is represented by the class named DragEvent. It includes actions like drag entered, drag dropped, drag entered target, drag exited target, drag over, etc.  Window Event − This is an event related to window showing/hiding actions. It is represented by the class named WindowEvent. It includes actions like window hiding, window shown, window hidden, window showing, etc. JavaFX Event (cont…)  Assume that we have an application which has a Circle, Stop and Play Buttons inserted using a group object as follows:  If you click on the play button, the source will be the mouse, the target node will be the play button, and the type of the event generated is the mouse click. JavaFX Animation  In JavaFX, a node can be animated by changing its property over time. JavaFX provides a package named javafx.animation. This package contains classes that are used to animate the nodes. Using JavaFX, you can apply animations (transitions) using the base classes such as:  Fade Transition  Fill Transition  Translate Transition  Path Transition  Rotate Transition  Scale Transition  Stroke Transition  Sequential Transition  Pause Transition  Parallel Transition JavaFX Animation (cont…) JavaFX Animation (cont…)  KeyFrame is a collection of KeyValue that change over the given duration.  KeyValue defines the transformation item and its value.We need two or more KeyValue to be plotted on the animation timeline.  Timeline is one animation sequence consisting of many KeyFrame objects. Each KeyFrame object is run sequentially. KeyFrame (KeyValue, duration) 10 secs 300px  Timeline have properties to control the animation.  setCycleCount() method means how many times play the animation. VM Option  TO EXECUTE: --module-path " C:\Program Files\Java\javafx-sdk-23.0.1\lib " --add- modules javafx.controls,javafx.fxml