CSE1007 - JAVA PROGRAMMING

MODULE-5
 Module - 5
GUI Programming and Database Connectivity (7 hours)

• GUI Programming using JavaFX

• Exploring events

• Controls and JavaFX menus

• Accessing databases using JDBC connectivity

10/16/2022 9:32:33 AM 2
 What is JavaFX?
• JavaFX is a Java library used to build Rich Internet
Applications. The applications written using this library can run
consistently across multiple platforms.

• The applications developed using JavaFX can run on various

devices such as Desktop Computers, Mobile Phones, TVs,
Tablets, etc.

• To develop GUI Applications using Java programming

language, the programmers rely on libraries such as Advanced
Windowing Toolkit (awt) and Swing.

• After the advent of JavaFX, these Java programmers can now

develop GUI applications effectively with rich content.
 Features of JavaFX
• Java Library
• Scene Builder
• Web view
• Built in UI controls
• CSS like styling
• Swing interoperability
• Canvas API
• Rich Set of APIs
• Integrated Graphics Library
• High Performance Media Engine
 Features of JavaFX
Feature Description
It is a Java library which consists of many classes and interfaces that are written
Java Library
in Java.
Scene Builder generates FXML mark-up which can be ported to an IDE.
Scene Builder
To easily layout JavaFX UI controls, charts, shapes, and containers
Web pages can be embedded with JavaFX applications. Web View uses
Web view
WebKitHTML technology to embed web pages.

JavaFX contains Built-in components which are not dependent on operating

Built in UI
system. The UI component are just enough to develop a full featured
controls
application.

JavaFX code can be embedded with the CSS to improve the style of the
CSS like styling application. We can enhance the view of our application with the simple
knowledge of CSS.
 Features of JavaFX
Feature Description

The JavaFX applications can be embedded with swing code using the Swing
Swing interoperability Node class. We can update the existing swing application with the powerful
features of JavaFX.

Canvas API provides the methods for drawing directly in an area of a JavaFX
Canvas API
scene.

Rich Set of APIs JavaFX provides a rich set of API's to develop GUI applications.
Integrated Graphics
An integrated set of classes are provided to deal with 2D and 3D graphics.
Library

High Performance The media pipeline supports the playback of web multimedia on a low latency. It
Media Engine is based on a Gstreamer Multimedia framework.
 Packages of JavaFX
• JavaFX provides a complete API with a rich set of classes and interfaces to
build GUI applications with rich graphics.
• The important packages of this API are −
– javafx.animation − Contains classes to add transition based animations
such as fill, fade, rotate, scale and translation, to the JavaFX nodes.
– javafx.application − Contains a set of classes responsible for the
JavaFX application life cycle.
– javafx.css − Contains classes to add CSS–like styling to JavaFX GUI
applications.
– javafx.event − Contains classes and interfaces to deliver and handle
JavaFX events.
– javafx.geometry − Contains classes to define 2D objects and perform
operations on them.
– javafx.stage − This package holds the top level container classes for
JavaFX application.
– javafx.scene − This package provides classes and interfaces to support
the scene graph. In addition, it also provides sub-packages such as
canvas, chart, control, effect, image, input, layout, media, paint, shape,
text, transform, web, etc. There are several components that support
this rich API of JavaFX.
JAVA Application structure
 Stage
• 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.

• The show() method to display the contents of a stage.

 Stage
• By default, stages (windows) are resizeable.
• Note that we have minimize and maximize buttons
• If we want our stage to be of
fixed size (i.e., not resizeable),
we can set that property with
stage.setResizeable(false)
 Stage
Stage Methods
– primaryStage.show();
– primaryStage.setScene(sc);
– primaryStage.setTitle(value);
– primaryStage.getTitle();
– primaryStage.setWidth(value);
– primaryStage.setHeight(value);
– primaryStage.getWidth();
– primaryStage.getHeight();
– primaryStage.setFullScreen(true);
– primaryStage.isFullScreen();
– primaryStage.close();
 Scene
• A scene represents the physical contents of a JavaFX
application.
• It contains all the contents of a scene graph.
• The class Scene of the package javafx.scene represents
the scene object. At an instance, the scene object is added
to only one stage.
• we can create a scene by instantiating the Scene Class.
• we can opt for the size of the scene by passing its
dimensions (height and width) along with the root node
to its constructor.
• EX: Scene scene = new Scene(root, 300, 250);
 Scene
Scene Graph
• In JavaFX, the GUI Applications were coded using a
Scene Graph.
• A Scene Graph is the starting point of the construction
of the GUI Application.
• It holds the (GUI) application primitives that are termed
as nodes.
• A node is a visual/graphical object and it may include −
• Geometrical (Graphical) objects − (2D and 3D) such as
circle, rectangle, polygon, etc.
• UI controls − such as Button, Checkbox, Choice box, Text
Area, etc.
• Containers − (layout panes) such as Border Pane, Grid
Pane, Flow Pane, etc.
• Media elements − such as audio, video and image objects.
 Life cycle of Java FX
• The JavaFX Application class has three life cycle methods, which are −
1. start() − The entry point method where the JavaFX graphics code is to be
written.
2. stop() − An empty method which can be overridden, here you can write the
logic to stop the application.
3. init() − An empty method which can be overridden, but you cannot create
stage or scene in this method.
• In addition to these, it provides a static method named launch() to launch JavaFX
application.
• Since the launch() method is static, you need to call it from a static context (main
generally).
• Whenever a JavaFX application is launched, the following actions will be carried
out (in the same order).
1. An instance of the application class is created.
2. Init() method is called.
3. The start() method is called.
4. The launcher waits for the application to finish and calls the stop() method.
 Steps to create JAVAFX application
Step 1: Creating a Class
Create a Java class and inherit the Application class of the package javafx.application and
implement the start() method of this class as follows.
public class Samplefx extends Application
{
public void start(Stage primaryStage) throws Exception
{
}
}
Step 2: Creating a Group Object
In the start() method, create a group object by instantiating the class named Group, which
belongs to the package javafx.scene, as follows.
Group root = new Group();
Step 3: Creating a Scene Object
Create a Scene by instantiating the class named Scene which belongs to the package
javafx.scene. To this class, pass the Group object (root), created in the previous step. In
addition to the root object, you can also pass two double parameters representing height and
width of the screen along with the object of the Group class as follows.
Scene scene = new Scene(root,600, 300);
 Steps for create JAVAFX application
Step 4: Setting the Title of the Stage
You can set the title to the stage using the setTitle() method of the Stage class. The
primaryStage is a Stage object which is passed to the start method of the scene class,
as a parameter. Using the primaryStage object, set the title of the scene as Sample
Application as shown below.
primaryStage.setTitle("Sample Application");
Step 5: Adding Scene to the Stage
You can add a Scene object to the stage using the method setScene() of the class named
Stage. Add the Scene object prepared in the previous steps using this method as shown
below.
primaryStage.setScene(scene);
Step 6: Displaying the Contents of the Stage
Display the contents of the scene using the method named show() of the Stage class as
follows.
primaryStage.show();
Step 7: Launching the Application
Launch the JavaFX application by calling the static method launch() of the Application
class from the main method as follows.
public static void main(String args[]){ launch(args); }
JAVAFX Application
 Three main things
1. First, that the class uses “extends
Application.“
2. Second, we required method named
“start(Stage primaryStage).“
3. Finally, we tell the Stage to appear by
“primaryStage.show();“
– This is what makes the application visible.
 Example
import javafx.application.Application;
import javafx.stage.Stage;
public class firstfx extends Application
{
public void start(Stage primaryStage)
{
primaryStage.show();
}
public static void main(String[] args)
{
launch(args);
}
}
 Launch
• Launch a standalone application.
• This method is typically called from the main method().
• It must not be called more than once or an exception will be
thrown(IllegalStateException). This is equivalent to launch(TheClass.class,
args) where TheClass is the immediately enclosing class of the method that
called launch.
• It must be a subclass of Application or a RuntimeException will be thrown.
• The launch method does not return until the application has exited, either via a
call to Platform.exit or all of the application windows have been closed.
• Typical usage is:
public static void main(String[] args)
{
Application.launch(args);
}
Layouts
 Panes
• We put the button directly on the scene, which
centered the button and made it occupy the entire
window.
• Rarely is this what we really want to do
• One approach is to specify the size and location of
each UI element (like the buttons)
• A better solution is to
put the UI elements
(known as nodes)
into containers called
panes, and then add
the panes to the scene.
 Panes
• Panes can even contain other panes:
 Layouts
There are many different layouts.
The following are some of the more common layouts:
Layouts
 FlowPane
• The FlowPane can be set up to work in “reading
order” (sequential rows left-to-right), by using
Orientation.HORIZONTAL or in sequential top-to-
bottom columns (Orientation.VERTICAL)
• You can also specify the gap between nodes (in pixels)
• So far, we have seen putting Button and ImageView
nodes on a pane.
 The FlowPane
public void start(Stage primaryStage) // From Listing 14.10 (p. 553)
{
// Create a pane and set its properties
FlowPane pane = new FlowPane();
pane.setPadding(new Insets(11, 12, 13, 14));
pane.setHgap(5);
pane.setVgap(5);

// Place nodes in the pane

pane.getChildren().addAll(new Label("First Name:"),
new TextField(), new Label("MI:"));
TextField tfMi = new TextField();
tfMi.setPrefColumnCount(1);
pane.getChildren().addAll(tfMi, new Label("Last Name:"),
new TextField());

// Create a scene and place it in the stage

Scene scene = new Scene(pane, 200, 250);
primaryStage.setTitle("ShowFlowPane"); // Set the stage title
primaryStage.setScene(scene); // Put scene in stage
primaryStage.show(); // Display the stage
}
 The FlowPane
public void start(Stage primaryStage) // From Listing 14.10 (p. 553)
{
// Create a pane and set its properties
FlowPane pane = new FlowPane();
pane.setPadding(new Insets(11, 12, 13, 14));
pane.setHgap(5);
pane.setVgap(5); Setting the padding with an Insets object gives us a
margin inside the pane. Just as angles are always
clockwise, the Insets are specified in clockwise order
// Place nodes in the pane
pane.getChildren().addAll(new
from theLabel("First
top, so this paneName:"),
will have an 11-pixel gap
new TextField(), new Label("MI:"));
between the top of the pane and the first row, a 12-
TextField tfMi = new TextField();
pixel gap between the right-most node and the right
tfMi.setPrefColumnCount(1);
side of the pane, 13 pixels at the bottom, and 14 pixels
pane.getChildren().addAll(tfMi, new Label("Last Name:"),
on the left side.
new TextField());
The Hgap
// Create a scene and place it inand Vgap
the properties specify the gap
stage
between
Scene scene = new Scene(pane, elements
200, 250);on the same row, or between rows
primaryStage.setTitle("ShowFlowPane"); // Set the stage title
primaryStage.setScene(scene);
Resizing the window//“re-flows”
Put scene in stage
the nodes, just as
primaryStage.show(); // in
changing the page size Display the stage
Word re-flows your text.
}
 The FlowPane
public void start(Stage primaryStage)
This
{ example introduces two new nodes: Label (which just lets us display text on a pane),
// Create (which
and TextField a pane and set
provides a boxits
into properties
which the user can type text).
FlowPane pane = new FlowPane();
TextField nodes typically have
pane.setPadding(new a corresponding
Insets(11, 12,Label, so the user can tell what’s
13, 14));
pane.setHgap(5);
supposed to go IN the TextField
pane.setVgap(5);

// Place nodes in the pane

pane.getChildren().addAll(new Label("First Name:"),
new TextField(), new Label("MI:"));
TextField tfMi = new TextField();
tfMi.setPrefColumnCount(1);
pane.getChildren().addAll(tfMi, new Label("Last Name:"),
new TextField());
We can Create individual
// .add() a scenenodes
and to a pane,
place itorin
we the
can .addAll()
stage to add a list of nodes, as is
doneScene
here. scene = new Scene(pane, 200, 250);
primaryStage.setTitle("ShowFlowPane"); // Set the stage title
We add a Label of “First Name:”, and then a TextField//
primaryStage.setScene(scene); into which
Put the user
scene in can type their
stage
first primaryStage.show(); // Display the stage
name, and then another Label for “MI:” (“Middle Initial”).
}
 The FlowPane
public void start(Stage primaryStage)
{
// Create a pane and set its properties
FlowPane pane = new FlowPane();
pane.setPadding(new Insets(11, 12, 13, 14));
pane.setHgap(5);
pane.setVgap(5);

// Place nodes in the pane

pane.getChildren().addAll(new Label("First Name:"),
new TextField(), new Label("MI:"));
TextField tfMi = new TextField();
tfMi.setPrefColumnCount(1);
pane.getChildren().addAll(tfMi, new Label("Last Name:"),
new TextField());
Next,//weCreate
create another
a scene TextField
and place for the
itMiddle
in theInitial,
stageand set its preferred column count
to 1 Scene
(if it’s only going=tonew
scene hold Scene(pane,
an initial, why make
200,a “wide”
250); box to hold it?)
primaryStage.setTitle("ShowFlowPane"); // Set the stage title
Note:primaryStage.setScene(scene);
the TextField’s variable is prefixed with “tf”. Node // variables
Put scene are typically
in stage prefixed
withprimaryStage.show();
an abbreviation of its type, so we can tell from looking //atDisplay thewhat
the variable stage
kind of
}
variable it is
 The FlowPane
public void start(Stage primaryStage)
{
// Create a pane and set its properties
FlowPane pane = new FlowPane();
pane.setPadding(new Insets(11, 12, 13, 14));
pane.setHgap(5);
pane.setVgap(5);

// Place nodes in the pane

pane.getChildren().addAll(new Label("First Name:"),
new TextField(), new Label("MI:"));
TextField tfMi = new TextField();
tfMi.setPrefColumnCount(1);
pane.getChildren().addAll(tfMi, new Label("Last Name:"),
new TextField());
Finally,
// we go backatoscene
Create the taskand
of adding
placethe
it(narrow)
in theMiddle
stage Initial TextField, plus a Label
and aScene scenefor= the
TextField newlastScene(pane,
name to the pane.
200, 250);
primaryStage.setTitle("ShowFlowPane"); // Set the stage title
NowprimaryStage.setScene(scene);
we have Label / TextField pairs for First Name, Middle
// PutInitial (a one-character-wide
scene in stage
primaryStage.show();
TextField), and Last Name // Display the stage
}
 The FlowPane
• This is the stage we have built:

• Because we went in “reading order”, and added the

nodes in the order we did, we got this – the “MI:” label
is next to the tfMi TextField in reading order, but this
isn’t visually appealing.
 The FlowPane
• If we make the scene wider (enlarge the window)

• The elements “re-flow”, and now the MI TextField

fits on the same row as its Label
 The GridPane
• The GridPane divides the pane’s area into a 2-D
grid of rows and columns.
• Ex:
GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));
Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
 The GridPane
Text scenetitle = new Text("Welcome");
scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1);//row,column,columnspan, rowspan
Label userName = new Label("User Name:");
grid.add(userName, 0, 1);
TextField userTextField = new TextField();
grid.add(userTextField, 1, 1);
Label pw = new Label("Password:");
grid.add(pw, 0, 2);
PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);
The GridPane
 The GridPane
Button btn = new Button("Sign in");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4);
 The GridPane
• The first line creates a button named btn with the label
Sign in, and the second line creates an HBox layout pane
named hbBtn with spacing of 10 pixels.
• The HBox pane sets an alignment for the button that is
different from the alignment applied to the other controls
in the grid pane.
• The alignment property has a value of
Pos.BOTTOM_RIGHT, which positions a node at the
bottom of the space vertically and at the right edge of the
space horizontally.
• The button is added as a child of the HBox pane, and the
Hbox pane is added to the grid in column 1, row 4.
 The GridPane

• A few notes:
– The “Add” button is right-aligned within its cell
– The whole frame is centered
– The labels get the default horizontal alignment of “left”
– We specify the column first (backwards from arrays)
– Not every cell needs to be filled
– Elements can be moved from one cell to another
 The BorderPane
• The BorderPane divides the pane into five “regions”
• BorderPane class lays its children in top, bottom,
center, left and, right positions
• Pane is also a Node, so a Pane can contain another
Pane
 The BorderPane
Methods Explanation
getAlignment(Node c) Returns the alignment of the node.

getBottom() Returns the bottom node of the border pane.

getCenter() Returns the center node of the border pane.

getLeft() Returns the left node of the border pane.

getRight() Returns the right node of the border pane.

getTop() Returns the top node of the border pane.

setAlignment(Node c, Pos v) Sets the alignment of node c to pos v.

setBottom(Node v) Sets the bottom node of the border pane.

setCenter(Node v) Sets the center node of the border pane.
setLeft(Node v) Sets the left node of the border pane.
setRight(Node v) Sets the right node of the border pane.
setTop(Node v) Sets the top node of the border pane.
BorderPane
 HBox and VBox
• The FlowPane gave us rows and columns (in
reading order)
• The HBox and VBox panes give us a single
row or column (respectively)
• HBox – arranges its content nodes
horizontally in a single row.
• VBox – arranges its content nodes vertically
in a single column.
HBox and VBox