COLLEGE OF COMPUTING AND

INFORMATICS

DEPARTMENT OF SOFTWARE
ENGINEERING

ADVANCED PROGRAMMING IN JAVA[SENG-2033]

BY SAMSON R.
Chapter One
GUI II
 Introduction
Definition of User Interface
 In computer science and human-computer interaction, the user
interface (of a computer program) refers to the graphical, textual
and auditory information the program presents to the user.
 The user employs several control sequences (such as keystrokes
with the computer keyboard, movements of the computer mouse,
or selections with the touch screen) to control the program.
 Cont..
Types of User Interfaces
Command-Line Interface (CLI)
 The user provides the input by typing a command string with the
computer keyboard and the system provides output by displaying
text on the computer monitor.
Graphical User Interface (GUI)
 The use of pictures rather than just words to represent the input
and output of a program.
 Input is accepted via devices such as keyboard and mouse.
CLI
GUI
 Graphical user interface
 Graphical user interface (GUI) presents a user-friendly
mechanism for interacting with an application.
 Gives an application a distinctive “look” and “feel”.
 Providing different application with consistent, intuitive user
interface components allows users to be
-- somewhat familiar with an application

-- they can learn it more quickly.

 Cont..
 In java, to develop an application that has a graphical user
interface ,we have to use GUI components.
 Among some of java GUI components(packages)

-- AWT [abstract window toolkit]

-- Swing
-- JavaFX
 Cont..
 AWT (Abstract Window Toolkit) package is an older package
designed for doing windowing interfaces.
 Swing can be viewed as an improved version of the AWT.
 However, Swing did not completely replace the AWT package.
 Some AWT classes are replaced by Swing classes, but other AWT
classes are needed when using Swing.
 We will use classes from both Swing and the AWT.
 Swing GUIs are designed using a particular form of object-
oriented programming that is known as event-driven programming.
 Cont..

Event-driven programming is a programming style that uses a

signal-and-response approach to programming. Signals to

objects are things called events, a concept we explain in this
section.
 F X
av a
J
 History of JavaFX
 JavaFX was developed by Chris Oliver.
 Initially the project was named as Form Follows Functions (F3) .
 It is intended to provide the richer functionalities for the GUI
application development.
 Later, Sun Micro-systems acquired F3 project as JavaFX in June,
2005.
 Sun Micro-systems announces it officially in 2007 at W3
Conference.
 In October 2008, JavaFX 1.0 was released. In 2009, ORACLE
corporation acquires Sun Micro-Systems and released JavaFX 1.2.
 The latest version of JavaFX is JavaFX 1.8 which was released on
18th March 2014.
 Introduction
 JavaFX is a Java library used to develop Desktop applications as well as
Rich Internet Applications (RIA).
 The applications built in JavaFX, can run on multiple platforms
including Web, Mobile and Desktops.
 JavaFX is intended to replace swing in Java applications as a GUI
framework.
  However, It provides more functionalities than swing. Like Swing,
JavaFX also provides its own components and doesn't depend upon the
operating.
  It supports various operating systems including Windows, Linux
and Mac OS.
 Cont..
 JavaFX application is divided hierarchically into three main
components known as Stage, Scene and nodes.
 In order to create a basic JavaFX application, we need to:
 Import javafx.application.Application into our code.
 Inherit Application into our class.
 Override start() method of Application class.
 Basic concepts in JavaFX
1. Stage
 The stage is the top-level object in a JavaFX application.
 The stage has four variables that either affect its appearance or
reflect its active state.
Variables Type Description
contains-focus Boolean Whether the stage is focused
icon Image[ ] The icon used in the title bar of
top level container
title String The title used in the title bar of
top level container
visible Boolean The visibility of the stage
Cont..
 Cont..
Closing the Stage
 The stage can be closed either programmatically or by user request.
 Application code can initiate the process by calling the close()
function.
 A user closes the stage by clicking the Close button in the title bar of
its desktop window, which also causes the close() function to be
called
 Cont..
2. Scene
 The scene is the part of the stage that hosts the user interface(nodes)
of a JavaFX application.
 Every stage has a single scene that is installed by assigning it to the
scene variable.
 Scene is the container of the content inside the stage.
 Setting the width and height of the scene is setting the width and
height of the entire window.
 Cont..

Variables Type Description

stage Stage Points to the stage hosting this scene.
x Number The X coordinate of the scene relative to
the stage
y Number The Y coordinate of the scene relative to
the stage
width Number The width of the scene
height Number The height of the scene
 Cont..

3 The JavaFX Scene Graph

 It can be seen as the collection of various nodes.
 A scene graph is a tree data structure.
 The individual items held within the JavaFX scene graph are known
as nodes. Such as buttons, text box, layout, image, radio button etc..
 There is always one root node in the scene graph
 Root node act as a parent node for all the other nodes present in the
scene graph.
 Root node may be any of the layouts available in the JavaFX system.
 Cont..
 Each node is classified as either a branch node(meaning that it can have
children), or a leaf node (meaning that it cannot have children).
 The first node in the tree is always called the root node, and it never has
a parent.
 Cont..

Group is Recommended Root Node

 Javafx Layouts
 A JavaFX application can manually lay out the UI by setting the position
and size properties for each UI element.
 However, an easier option is to make use of layout panes.
 The JavaFX SDK provides several layout panes for the easy setup and
management of classic layouts such as rows, columns, stacks, tiles, and
others.
 As a window is resized, the layout pane automatically repositions and
resizes the nodes that it contains according to the properties for the nodes.
 In JavaFX, Layout defines the way in which the components are to
be seen on the stage.
 Cont..
Javafx layouts

 BorderPane
 HBox
 VBox
 GridPane
 FlowPane
 TilePane
 StackPane
 BorderPane
 The BorderPane layout pane provides five regions in which to place
nodes: top, bottom, left, right, and center.
 The regions can be any size.
 If your application does not need one of the regions, you do not
need to define it and no space is allocated for it.
 A border pane is useful for the classic look of a tool bar at the top, a
status bar at the bottom, a navigation panel on the left, additional
information on the right, and a working area in the center.
 Cont..
 If the window is larger than the space needed for the contents of
each region, the extra space is given to the center region by default.
 If the window is smaller than the space needed for the contents of
each region, the regions might overlap.
 The overlap is determined by the order in which the regions are set.
 For example, if the regions are set in the order of left, bottom, and
right, when the window is made smaller, the bottom region overlaps
the left region and the right region overlaps the bottom region.
Cont..
 HBox
 The Hbox layout pane provides an easy way for
arranging a series of nodes in a single row (horizontally).
 The padding property can be set to manage the distance
between the nodes and the edges of the Hbox pane.
 Spacing can be set to manage the distance between the
nodes.
 The style can be set to change the background color.
Cont..
 Adding HBox

HBox hbox = new HBox(); //creating HBox

Button bt1= new Button("Current");
Button btn2= new Button("Projected");
hbox.getChildren().addAll(btn1, btn2); //adding buttons on the HBox
 VBox
 The Vbox layout pane is similar to the Hbox layout pane, except
that the nodes are arranged in a single column (vertically)
 The padding property can be set to manage the distance between
the nodes and the edges of the Vbox pane. Spacing can be set to
manage the distance between the nodes.
 Margins can be set to add additional space around individual
controls.
Cont..
 Adding VBox

VBox vbox = new VBox(); // creating VBox

Text txt1= new Text(“Text 1");
Text txt2= new Text(“Text 2");
vbox.getChildren().addAll(txt1, txt2); //adding buttons on the VBox
 StackPane
 The StackPane layout pane places all of the nodes within a single stack
with each new node added on top of the previous node.
 This layout model provides an easy way to overlay text on a shape or
image or to overlap common shapes to create a complex shape.
 GridPane
 The GridPane layout pane enables you to create a flexible grid of rows
and columns in which to layout nodes.
 Nodes can be placed in any cell in the grid and can span cells as needed.
 A grid pane is useful for creating forms or any layout that is organized
in rows and columns.
 Gap properties can be set to manage the spacing between the rows and
columns.
 The padding property can be set to manage the distance between the
nodes and the edges of the grid pane.
 The vertical and horizontal alignment properties can be set to manage
the alignment of individual controls in a cell.
Cont..
 Cont..
GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(0, 10, 0, 10));

Text chartSubtitle = new Text("Goods and Services");

//grid.add(control, colIndex, rowIndex, colSpan, rowSpan)
grid.add(chartSubtitle, 1, 1, 2, 1);

Note: index start from 0

 FlowPane
 The nodes within a FlowPane layout pane are laid out consecutively
and wrap at the boundary set for the pane. Nodes can flow vertically (in
columns) or horizontally (in rows).
 A vertical flow pane wraps at the height boundary for the pane. A
horizontal flow pane wraps at the width boundary for the pane.
 Gap properties can be set to manage the spacing between the rows and
columns.
 The padding property can be set to manage the distance between the
nodes and the edges of the pane.
Cont..
 TilePane
 A tile pane is similar to a flow pane.
 The TilePane layout pane places all of the nodes in a grid in which each
cell, or tile, is the same size.
 Nodes can be laid out horizontally (in rows) or vertically (in columns).
 Horizontal tiling wraps the tiles at the tile pane's width boundary and
vertical tiling wraps them at the height boundary.
 Use the prefColumns and prefRows properties to establish the preferred
size of the tile pane.
 Gap properties can be set to manage the spacing between the rows and
columns.
 The padding property can be set to manage the distance between the
nodes and the edges of the pane.
 Javafx UI Controls
 The graphical user interface of every desktop application mainly
considers UI elements, layouts and behavior.
 The UI elements are the one which are actually shown to the user
for interaction or information exchange.
 Layout defines the organization of the UI elements on the screen
 Behavior is the reaction of the UI element when some event is
occurred on it.
 Javafx UI Controls
 Javafx UI controls are classes those resides in the javafx.scene.control
package of the JavaFX API.
 Common javafx UI Controls

Label List View

Button Table View
Radio Button Tree View
Checkbox Tree Table View
Choice Box Separator
Combo Box Slider
Text Field Color Picker
Menu Date Picker
Password Field Tooltip
 Label
 Label class resides in the javafx.scene.control package of the JavaFX API to
display a text element.
 The below figure shows three common label usages. The label at the left is
a text element with an image, the label in the center represents rotated text,
and the label at the right renders wrapped text
 Cont..
Creating Label
//An empty label
Label label1 = new Label();
//A label with the text element

Label label2 = new Label("Search");

//A label with the text element and graphical icon

Image image = new

Image( getClass().getResourceAsStream("labels.jpg"));
Label label3 = new Label("Search", new ImageView(image));
 Cont..
Once you have created a label in your code, you can add textual and
graphical content to it by using the following methods of the Labeled
class.
o setText(String text) method – specifies the text caption for the label
o setGraphic(Node graphic)– specifies the graphical icon
o setTextFill() method specifies the color to paint the text element of
the label.
 Cont..
Adding an Icon and Text Fill to a Label

Label label1 = new Label("Search");

Image image = new Image (getClass().getResourceAsStream("labels.jpg"));

label1.setGraphic(new ImageView(image));
label1.setTextFill(Color.web("#0076a3"));
Applying Font Settings to a label

//Use a constructor of the Font class

label1.setFont(new Font("Arial", 30));

//Use the font method of the Font class

label2.setFont(Font.font("Cambria", 32));
 Button
 Button class resides in the javafx.scene.control package of the JavaFX API
enables developers to process an action when a user clicks it.
 is an extension of the Labeled class.
 It can display text, an image, or both.
 Cont..
Creating Button

//A button with an empty text caption.

Button button1 = new Button();

//A button with the specified text caption.

Button button2 = new Button("Accept");

//A button with the specified text caption and icon.

Image imageOk = new Image(getClass().getResourceAsStream("ok.png"));

Button button3 = new Button("Accept", new ImageView(imageOk));

 Cont..
Because the Button class extends the Labeled class, you can use the
following methods to specify content for a button that does not have an icon
or text caption:
setText(String text)method – specifies the text caption for the button

setGraphic(Node graphic)method – specifies the graphical icon

Adding an Icon to a Button
Image imageDecline = new Image
(getClass().getResourceAsStream("not.png"));
Button button5 = new Button();
button5.setGraphic(new ImageView(imageDecline));
 Cont..
The default skin of the Button class distinguishes the visual states of the
button.

Assigning an Action
The primary function of each button is to produce an action when it is
clicked. Use the setOnAction() method of the Button class to define what will
happen when a user clicks the button.
 Cont..
Defining an Action for a Button
button2.setOnAction((ActionEvent e) ->{
label.setText("Accepted");
});
 shows how to process an ActionEvent, so that when a user presses
button2 the text caption for a label is set to "Accepted."
 You can use the Button class to set as many event-handling methods as
you need to cause the specific behavior or apply visual effects.
 Cont..
Styling a Button
//Code added to the CSS file
.button1{
-fx-font: 22 arial;
-fx-base: #b6e7c9;
} //Code in the ButtonSample.java file
button1.getStyleClass().add("button1");

//to embed the css in to the java code

sceneName.getStylesheets().add(javaFileName.class.
getResource(“cssFileName.css").toExternalForm());
 RadioButton
 RadioButton class resides in the javafx.scene.control package of the
JavaFX API.
 A radio button control can be either selected or deselected. Typically radio
buttons are combined into a group where only one button at a time can be
selected.
 Cont..
Creating Radio Buttons
//A radio button with an empty string for its label
RadioButton rb1 = new RadioButton();
//Setting a text label
rb1.setText("Home");
//A radio button with the specified label
RadioButton rb2 = new RadioButton("Calendar");
 Cont..
final ToggleGroup group = new ToggleGroup();
RadioButton rb1 = new RadioButton("Home");
rb1.setToggleGroup(group);
rb1.setSelected(true);
RadioButton rb2 = new RadioButton("Calendar");
rb2.setToggleGroup(group);
RadioButton rb3 = new RadioButton("Contacts");

rb3.setToggleGroup(group);
 CheckBox
 CheckBox class resides in the javafx.scene.control package of the
JavaFX API.
 CheckBox control allow the user to select many options at a time.
 Cont..
Creating Checkboxes
//A checkbox without a caption
CheckBox cb1 = new CheckBox();
//A checkbox with a string caption
CheckBox cb2 = new CheckBox("Second");
cb1.setText("First");
// set the checked box to be selected

cb1.setSelected(true);
 ChoiceBox
 Choice Box class resides in the javafx.scene.control package of the JavaFX API.
 Choice Box control provides support for quickly selecting between a few options.

Creating a Choice Box

ChoiceBox cb = new ChoiceBox(FXCollections.observableArrayList (
"First", "Second", "Third")
);
 TextField
 The TextField class implements a UI control that accepts and displays text
input.
 It provides capabilities to receive text input from a user. Along with
another text input control, PasswordField, this class extends the TextInput
class, a super class for all the text controls available through the JavaFX
API.

//Creating TextField
TextField tf = new TextField ();
 Cont.
 To defines the string that appears in the text field when the application is
started TextField use setPromptText() method.
 Prompt captions notify users what type of data to enter in the text fields.

 The difference between the prompt text and the text entered in the text field
is that the prompt text cannot be obtained through the getText() method
 Cont.
Some helpful methods that you can use with text fields.

 copy()– transfers the currently selected range in the text to the

clipboard, leaving the current selection.
 cut()– transfers the currently selected range in the text to the
clipboard, removing the current selection.
 selectAll()- selects all text in the text input.
 paste()– transfers the contents in the clipboard into this text,
replacing the current selection.
 PasswordField
The PasswordField class implements a specialized textfield. The characters
typed by a user are hidden by displaying an echo string.

//Creating a Password Field

PasswordField passwordField = new PasswordField();

passwordField.setPromptText("Your password");
 ComboBox
 A combo box is a typical element of a user interface that enables users to
choose one of several options.
 A combo box is helpful when the number of items to show exceeds some limit,
because it can add scrolling to the drop down list, unlike a choice box.
 If the number of items does not exceed a certain limit, developers can decide
whether a combo box or a choice box better suits their needs.
 ComboBox
Creating a Combo Box with an Observable List

ObservableList<String> options = FXCollections.observableArrayList(

"Option 1","Option 2", "Option 3");

ComboBox comboBox = new ComboBox(options);

At any time, you can supplement the list of items with new values.

comboBox.getItems().addAll(
"Option 4","Option 5","Option 6");
 Just Relax
Quiz
1.What is stackPane?Why it is ne
2. What is the exact difference between TilePane and FlowPane?
3. One layout can be root node for the other layout(T/F)?
4.Clearly describe the difference between java swing and javafx. Also compare
and contrast the advantage and disadvantage of javafx and swing?
5.Assume the arrangement order of nodes in flowPane layout is bottom ,top,
right and left flowPane Layout. Which one of the followings are possible
overlapping if size of node is larger than the cell in layout.
A. Right Overlaps Left B. Top Overlaps Bottom
C. Right Overlaps Top D. Left Overlaps Right
 Just Relax
Quiz
1.What is stackPane?When we use StackPane?
2. Create VBOx layout and add two button on layout?
3. One layout cannot be root node for the other layout(T/F)?
4.Clearly describe the difference between java AWT,Swing and javafx. Also
compare and contrast the advantage and disadvantage of javafx and swing?
5.Assume the arrangement order of nodes in flowPane layout is bottom ,top,
right and left flowPane Layout. Which one of the followings are possible
overlapping if size of node is larger than the cell in layout.
A. Right Overlaps Left B. Top Overlaps Bottom
C. Right Overlaps Top D. Left Overlaps Right