Graphical User Interface

GUI
Sahirul Alim Tri Bawono

Overview

GUI

AWT

Frame

Component

Panel

Layout Manager

Event

GUI

With the availability of powerful and cheap hardware, and widespread and
diverse use of computers, easy and intuitive interfaces have become an
important aspect to developers.

To reduce software costs, developers must be able to easily create and

modify code that implements these interfaces.

Two Sets of Java APIs for Graphics

Programming

There are two sets of Java APIs for graphics programming: AWT (Abstract
Windowing Toolkit) and Swing.

AWT API was introduced in JDK 1.0. Most of the AWT components have become
obsolete and should be replaced by newer Swing components.

Swing API, a much more comprehensive set of graphics libraries that enhances the
AWT, was introduced as part of Java Foundation Classes (JFC) after the release of
JDK 1.1. JFC consists of Swing, Java2D, Accessibility, Internationalization, and
Pluggable Look-and-Feel Support APIs. JFC was an add-on to JDK 1.1 but has been
integrated into core Java since JDK 1.2.

AWT

Consistent with the principles of abstraction, the AWT model for graphical
user-interfaces in Java is broken into several constituents with its own
concerns and functionality

Briefly, AWT constituents include:

Frame

Components

Panels

Layout managers

event

Frame

The frame abstraction allows for independent windows in the Java host.
While a Java application typically runs in a window, it may also create more
graphical windows to provide alternative or complementary views.

An application window is created by instantiating a Frame object. A program

that merely creates a Frame object is shown in Listing. Since a Frame object
is initially invisible, the setVisible(true)method is used to bring it to the top
of the desktop.

Frame

Besides creating a window by instantiating a Frame object, we may also

define a new class by inheriting from the Frame class. This is the means for
defining a new Frame-like abstraction, but with new default settings or
specific behavior. The class skeleton in Figure with a default size of 150 100
pixel window is one such example.

Component

The AWT components consist of a custom set of widgets for various styles of
user interaction. The range of widgets includes:

Text label

Button

Choice and list selections

Scrollbars

Text fields and editing areas

Canvas painting areas

Component

The insertion of a component into a Frame instance proceeds in two steps:

first, an instance of the component is created with the appropriate
parameters to the constructor method. Subsequently, it is inserted into the
Frame via the add()method, with signature:

Component

Panels

The AWT panels are used to contain a set of logically related AWT components. For example, user authentication by a user name and password may be
pre-sented by two text field components together with two buttons. One
button allows the user to proceed with authentication, while the other
cancels the request. These components may be logically included in an AWT
panel.

Panel

Panels may be succinctly described as components holding other components.

As a component, it may be placed in a Frame via add() as already seen with
Checkbox and Button. As a container, it will also accept constituent
components via its own add()method.

Layout manager

The layout manager constituent of the AWT model allows for layout control of
components within panels.

The layout of components in Panels is the responsibility of Layout Managers.

The default layout used by Panels is known as Flow Layout. In this layout
scheme, components are automatically placed in a left-to-right manner, and
down to the next row if the right margin is exceeded. Formatting components
within a row may be centered (default), left- or right-justified.

Layout manager (GridLayout)

Two other layout schemes are commonly used: The GridLayout class implements a table-style layout with fixed row sand columns

Tips on Choosing Layout Manager

Scenario:You need to display a component in as much space as it can get.

If it is the only component in its container, use GridLayout or BorderLayout. Otherwise, BorderLayout or
GridBagLayout might be a good match.

If you use BorderLayout, you will need to put the space-hungry component in the center. With GridBagLayout, you
will need to set the constraints for the component so that fill=GridBagConstraints.BOTH. Another possibility is to
use BoxLayout, making the space-hungry component specify very large preferred and maximum sizes.

Scenario:You need to display a few components in a compact row at their natural size.

Scenario:You need to display a few components of the same size in rows and columns.

BoxLayout is perfect for this.

Scenario:You need to display aligned columns, as in a form-like interface where a column of labels is used
to describe text fields in an adjacent column.

GridLayout is perfect for this.

Scenario:You need to display a few components in a row or column, possibly with varying amounts of space
between them, custom alignment, or custom component sizes.

Consider using a JPanel to group the components and using either the JPanel's default FlowLayout manager or the
BoxLayout manager. SpringLayout is also good for this.

SpringLayout is a natural choice for this. The SpringUtilities class used by several Tutorial examples defines a
makeCompactGrid method that lets you easily align multiple rows and columns of components.

Scenario:You have a complex layout with many components.

Consider either using a very flexible layout manager such as GridBagLayout or SpringLayout, or grouping the
components into one or more JPanels to simplify layout. If you take the latter approach, each JPanel might use a
different layout manager.

Event

Currently, the views painted by the application frame with its constituent
components are like empty shells with no application processing logic
underneath. In a typical scenario, processing logic would involve:

retrieving the state of switches, such as to determine the states of the Save
config and Ignore colors Checkboxes, or reading input keyed into the top
TextArea; or

reacting to events, such as the click of the Exit Button

The List of Event

Example action event

Event (Delegation model)

Event handling in JDK 1.1 adopts the delegation model and consists of event
sources and event listeners. One or more event listeners may register to be
notified of particular events with a source. Any object may be a listener by
implementing the appropriate EventListenerinterface. Just as in JDK 1.0,
where there are various groups of events, there are also various groups of
EventListeners in JDK 1.1.

Event (Delegation model)

The following code fragment Listing uses components as in previous examples, but using JDK 1.1styledevent handling. Corresponding to Button and
Checkbox components and the use of Frames, there are three groups of
listeners required. We need EventListeners for action, item, and window
events. The corresponding listeners are ActionListener, ItemListener,and
WindowListener, respectively.

Swing API

Overview

Why Swing Component

Transiting AWT to Swing

Swing Component

Layout Manager Cont...

JRadioButton

JComboBox

Why Swing component

The AWT components we have been discussing were the first graphical components Java
ever had. For easy implementation, they are ultimately mapped to the native graphical
widgets provided by the underlying windowing systems by various machine platforms
such as Windows, Linux, or Mac OS.

Thus, while AWT runs on different platform (just like all other Java codes), AWT
components look different on the various platforms. This is not too significant except
that different dimensions can sometimes drastically alter how designed interfaces look.

This shortcoming has led to the introduction of Swing components in JDK 1.2. Swing
components work in a similar fashion to AWT components in that we still instantiate
suitable component classes and attach handlers for relevant events.

The wonderful aspect of Swing components is that they are implemented in pure Java.
As such, they exhibit the same look-and-feel across platforms. Swing provides a rich set
of components for developing a responsive user-interface

Transiting from awt to swing

Moving from AWT to Swing is generally easy. While the AWT component classes
such as Button, Label, Checkbox,and Frame are defined in the java.awt
package, the Swing package javax.swing contains classes JButton, JLabel,
JCheckBox and JFrame.

Mix AWT and Swing

Swing Component

Swing hierarchy diagram

Main fiture of Swing

Swing is written in pure Java (except a few classes) and therefore is 100% portable.

Swing components are lightweight.

Swing components support pluggable look and feel

Swing supports mouse-less operation

Swing components support "tool-tips

Swing components areJavaBeans.

Swing application uses AWT event-handling classes (in package java.awt.event).

Swing application uses AWT's layout manager (such as FlowLayout and BorderLayout in package java.awt).

Swing implements double-buffering and automatic repaint batching for smoother screen repaint

Swing introduces JLayeredPane and JInternalFrame for creating Multiple Document Interface (MDI)
applications.

Swing supports floating toolbars (in JToolBar), splitter control, "undo

Others - check the Swing website

Swing's Top-Level and Secondary

Container

Just like AWT application, a Swing application requires a top-level

container. There are three top-level containers in Swing:

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 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

browsers window.

Example of hold component in continue

pane

Layout Manager (Border Layout)

BorderLayout divides the container into five areas, and you can add a
component to each area. The five regions correspond to the top, left,
bottom, and right sides of the container, along with one in the center, as
illustrated in Figure

Layout Manager(Border Layout)

BoxLayout

A BoxLayout allows you to create either a single row or a single column of

components. In other words, the components you add to a BoxLayout are
arranged vertically from top to bottom or horizontally from left to right.

Example

JRadioButton

Radio buttons(declared with class JRadioButton) are similar to checkboxes in

that they have two statesselected and not selected (also called deselected).
However, radio buttons normally appear as a group in which only one button
can be selected at a time

Example
Class pilihan
{
public static void main(String args[])
{
JRadioButton rb1,rb2;
JFrame f= new Jframe(Radioku);
Container pane = f.getContentPane();
pane.setLayout(new FlowLayout);
pane.add(rb1=new JRadioButton(Laki-laki));
pane.add(rb2=new JRadioButton(Perempuan));
ButtonGroup bg = new ButtonGroup();
bg.add( rb1);
bg.add(rb2);
f.setVisible(true);
}
}

ComboBox

A combo box (sometimes called a drop-down list) enables the user to select
one item from a list

Combo boxes are implemented with classJComboBox, which extends class

JComponent. JComboBoxes generate ItemEvents just as JCheckBoxes and
JRadioButtons do

Example
class pilihan
{
public static void main(String args[])
{
JRadioButton rb1,rb2;
JFrame f= new Jframe(Radioku);
Container pane = f.getContentPane();
pane.setLayout(new FlowLayout);
String[] data = {Laki-laki,Perempuan};
pane.add(new JComboBox(data));
f.setVisible(true);
}
}

Referensi

The Java TM Tutorials, https://

docs.oracle.com/javase/tutorial/uiswing/layout/using.html, 26-09-2015

Poo, D., et. All., 2008,Object Oriented Programming And Java, SpringerVerlag. London.

Deitel, P., et. All., 2005, Java How to Program, Prentice Hall, New York.