University of Dar es Salaam

CS 234: Object-Oriented
Programming in Java
Lecture 6 – GUI & Graphics
Programming

Aron Kondoro
 University of Dar es Salaam
GUI vs Graphics Programming
Graphical User Interface Graphics Programming
(GUI) • Manipulate graphical elements
• Display info and accept user on a display
input • Points, lines, curves, shapes
• Built using components • Texture and lighting
• Forms applications • Animation, 3D effect
 University of Dar es Salaam
GUI
 University of Dar es Salaam
Graphics Programming
 University of Dar es Salaam
Java Graphics Toolkits
• Java provides frameworks for building graphical Uis
• AWT: Abstract Windowing Toolkit
• The first Java graphics framework
• Swing: OS-independent framework
• JavaFX: XML-based layouts
• Uses SceneBuilder to create a layout
• Can also create layouts in code (like Swing)
• SWT: Standard Widget Toolkit
• An Eclipse Project
• Designed for efficiency
• Used in Eclipse, Firefox
 University of Dar es Salaam
Simple GUI Application
• A GUI consists of components, containers, and layouts
 University of Dar es Salaam
Designing a simple GUI
1. Create a window (container)
2. Create components
3. Layout components in a container
4. Display the container
5. Wait for a user to do somethings (events)
 University of Dar es Salaam
Graphics Toolkits
• Java
• Provides complete frameworks for building graphical applications. A
framework contains all the components and logic needed to manage a
graphical interface
• You
• Select components and set their properties
• Write application logic that controls how an application responds to user
actions
• May extend (subclass) existing components to create custom components
 University of Dar es Salaam
AWT Graphics Toolkit
• The first GUI toolkit
• Uses graphical UI components of the operating system e.g. Windows,
MacOS, X-Windows
• Efficient, low overhead
• Applications look different on each platform
• Difficult to write and test good applications
• Different bugs on each OS
 University of Dar es Salaam
AWT Example
To display the window call setVisible(True)
 University of Dar es Salaam
Swing Graphics Toolkit
• Improved, OS-independent GUI framework (replace
AWT)
• Written in Java (AWT is not)
• Classes in javax.swing and sub-packages
• Swing implements all components in software
• Applications look & behave the same on all
platforms
• Applications may not look like native GUI apps (but
you can change that by applying a LookAndFeel)
• Part of the Java Foundation Classes (JFC).
• JFC also includes a 2D API and drag-and-drop API
 University of Dar es Salaam
Swing Features
• Swing components support pluggable look-and-feel.
• You can choose between Java look-and-feel and the look-and-feel of the underlying OS
• Swing supports mouse-less operation, i.e., it can operate entirely using a keyboard
• Swing application uses AWT event-handling classes (in package java.awt.event)
• Swing application uses AWT's layout manager
• It added new layout managers such as Springs, Struts, and BoxLayout (in
package javax.swing).
 University of Dar es Salaam
Swing Containers
• JFrame is the top level container for most applications
• has a title bar, menu bar, and content pane
• JFrame is a heavy weight component.
 University of Dar es Salaam
Swing Example
To display the window call setVisible(True)
 University of Dar es Salaam
SWT GUI Toolkit
• Standard Widget Toolkit
• From IBM, now under Eclipse
Foundation
• Native + Custom Components
• Implemented in native libraries,
platform-specific
• Native Look & Feel
• Java Widget objects have, native
peers
• Have to manually dispose objects
 University of Dar es Salaam
Java FX
• a Java library used to develop Desktop
applications as well as Rich Internet
Applications (RIA).
• Intended to replace swing in Java applications as
a GUI framework
• Provides more functionalities than Swing
• provides its own components and doesn't
depend upon the operating system (like
Swing)
• Scene-graph-based UI Framework
• Scene Builder generates FXML mark-up which
can be ported to an IDE.
• Positioned as the new primary GUI story
 University of Dar es Salaam
Demo
Create a simple Login interface
 University of Dar es Salaam
Top Level Containers
• A window that is displayed on the screen
• JFrame: title bar, menu, and content pane
• JWindow: no title bar or menu
• JDialog: a dialog window, has a title bar
• JApplet: for applets (run in the web browser). Deprecated now.
 University of Dar es Salaam
What is a component?
• Also called widgets
• You need to know the
available components and
what they do
 University of Dar es Salaam
What is a container?
• A container holds a group of components.
• It provides a space where a component can be managed and displayed.
• Top-level Containers
• Inherit from Component and Container of AWT.
• Cannot be contained within other containers.
• Heavyweight
• Example: JFrame, JDialog, JApplet
• Lightweight Containers
• Inherit from JComponent class.
• Are general purpose containers.
• Can be used to organize related components together.
• Example: JPanel, JTabbedPane, JSplitPane
 University of Dar es Salaam
Containers and Components
• A GUI has many components in containers
• Use add to put a component in a container
• A container is also a component
• So a container may contain other containers
 University of Dar es Salaam
AWT Containers and Components
• Component (Widget, Control)
• Components are elementary GUI entities,
such as Button, Label, and TextField
• They are also called widgets or controls in
other graphics systems.
• Container
• Containers, such as Frame and Panel, are
used to hold components in a specific
layout (such as FlowLayout or GridLayout).
• A container can also hold sub-containers.
 University of Dar es Salaam
AWT Container Classes
• Top-Level Containers: Frame, Dialog and Applet
 University of Dar es Salaam
AWT Component Classes
• provides many ready-made and reusable GUI components in
package java.awt
• The frequently used are: Button, TextField, Label,
Checkbox, CheckboxGroup, List, and Choice
 University of Dar es Salaam
Swing Containers and Components
• Swing component classes
(in
package javax.swing)
begin with a prefix ”J”
• e.g., JButton,
JTextField, JLabel,
JPanel, Jframe,
or JApplet.
 University of Dar es Salaam
Swing Container Classes
• JFrame: used for the application's
main window (with an icon, a title,
minimize/maximize/close buttons, an
optional menu bar, and a content-
pane), as illustrated.
• Jdialog: used for a secondary pop-
up window (with a title, a close
button, and a content pane).
• JApplet: used for the applet's
display area (content-pane) inside a
browser’s window.
 University of Dar es Salaam
What can a component do?
 University of Dar es Salaam
Important Components to Know
 University of Dar es Salaam
Hierarchy of Graphics Components
You can use a JButton,
JLabel etc any place
where the program is
expecting a Component
 University of Dar es Salaam
Playing with a JButton
 University of Dar es Salaam
Lightweight Containers
• A lightweight container is one that is not a window
• You must place it inside another container
• Cannot be drawn on the screen by itself
• JPanel: a simple rectangular area (most common)
• JTabbedPane: multiple panels with a tab on top
• JSplitPane
• JInternalFrame: like a JFrame inside a JFrame
 University of Dar es Salaam
Layout Managers
• A container has layout manager to arrange its components
• AWT provides the following layout managers (in package java.awt)
• FlowLayout, GridLayout, BorderLayout, GridBagLayout,
BoxLayout, CardLayout, and others
 University of Dar es Salaam
Layout Managers (continued)
• Swing added the following layout managers (in package javax.swing)
• Springs, Struts, and BoxLayout
• An AWT Panel is a rectangular pane, which can be used as a sub-
container to organise a group of related components in a specific
layout (e.g., FlowLayout, BorderLayout).
• Panels are secondary containers
 University of Dar es Salaam
Exercise
• Create the following GUI using containers, components, and panels
 University of Dar es Salaam
WindowsBuilder for Eclipse
• A graphical editor for
creating UI with Swing or
SWT
• Included in Eclipse, but
you may need to
download & install extra
components
• Understands hand-
written code
• Switch between visual &
code editing at will
 University of Dar es Salaam
GUI Designer: IntelliJ IDEA
 University of Dar es Salaam
Example of popular Java-based GUI Apps
• SWT
• Eclipse
• Vuze
• Swing
• IntelliJ IDEA
• NetBeans
• SoapUI
• JMeter
• FreeMind
 University of Dar es Salaam
Further Readings
• Creating a GUI With Swing (The Java Tutorials)
• https://docs.oracle.com/javase/tutorial/uiswing/index.html
• Java GUI Tutorial: Make a GUI in 13 Minutes
• https://www.youtube.com/watch?v=5o3fMLPY7qY
• Java Programming Tutorial
• https://www3.ntu.edu.sg/home/ehchua/programming/java/j4a_gui.html