Graphic User Interfaces (GUIs) III

Sebastian Alejandro Velasco

Object Oriented Programming

Graphic User Interfaces (GUIs)

 Agenda

Layouts

Events &
Listeners

Look & Feel

GUI and Layers

Graphic User Interfaces (GUIs)

Layouts

Graphic User Interfaces (GUIs)

 Layouts define how components are organized

Layouts can be set for

Windows and Containers

Layouts make easier to

Layout Types adjust the look-and-feel

Absolute Box Border

Grid Flow Card

Grid Bag Null

Graphic User Interfaces (GUIs)

Absolute or Null Layout

Components size
and position can
be define by
developers

Graphic User Interfaces (GUIs)

 Border Layout

If the window is enlarged,

the center area gets as
much of the available space
as possible.

Components can be added in

five areas:

PAGE_START
PAGE_END
LINE_START
LINE_END
CENTER

Graphic User Interfaces (GUIs)

 Box Layout

Box layout stacks its

components on top of
each other or put them
in a row

Graphic User Interfaces (GUIs)

 Flow Layout

Flow layout stacks its

components in a row. If
the container is too small
multiple rows are used.

Graphic User Interfaces (GUIs)

 Grid Layout

AGridLayoutobject places
components in a grid of cells.
Each component takes all the
available space within its cell,
and each cell is exactly the
same size.

Graphic User Interfaces (GUIs)

Writing layout code by hand can be challenging

This options is
available for
containers and
windows
components

Graphic User Interfaces (GUIs)

It is possible to mix multiples layouts

Null Layout

GridBag Layout

Flow Layout

Box Layout

Graphic User Interfaces (GUIs)


Events & Listeners
Events are interactions between user and GUI

GUI events are generated when the user

interacts with a component on the GUI

Events are
objects!

Graphic User Interfaces (GUIs)

 We handle events using listeners

Instantiate a listener Register the listener

that is capable of object with the
hearing and specific component
responding to a
particular event type.

Graphic User Interfaces (GUIs)

 Creating listener
Elegant (long) way

Graphic User Interfaces (GUIs)

 Creating listeners using inner classes (short way)

Instantiate a
listener

Register the
listener

Graphic User Interfaces (GUIs)

Creating listeners using inner classes (shortest way)

Graphic User Interfaces (GUIs)

Two components can be heard by the same listener

Graphic User Interfaces (GUIs)

 Inner (or nested) classes
are used to handle GUI
events

Local Inner class

Anonymous
Inner class

Graphic User Interfaces (GUIs)

Inner (or nested) classes are used to handle GUI events

Outer class

Member
Inner class

Graphic User Interfaces (GUIs)

 Listeners that All Swing Components Support

Listener Listen to
Component changes in the component's size, position, or visibility.
Focus whether the component gained or lost the keyboard
focus.
Key key presses; key events are fired only by the component
that has the current keyboard focus.
Mouse mouse clicks, mouse presses, mouse releases and
mouse movement into or out of the component's drawing
area.
Mouse-Motion changes in the mouse cursor's position over the
component.
Mouse-Wheel mouse wheel movement over the component.
Hierarchy changes to a component's containment hierarchy of
changed events.
Hierarchy Bounds changes to a component's containment hierarchy of moved
and resized events.

Graphic User Interfaces (GUIs)

 Other Listeners that Swing Components Support

Full table here:

http://docs.oracle.com/javase/tutorial/uiswing/events/eventsandcomponents.html

Graphic User Interfaces (GUIs)

 Other Listeners that Swing Components Support

Listener Occurs when

Action The user clicks a button, chooses a menu item, presses
Enter in a text field.
Caret The caret in a text component moves or when the selection
in a text component changes.
Change A component changes, change listener is not notified of
what has changed, but simply that the source object has
changed.
Document, An operation that can be undone occurs on a component.
undoable edit
Item Occurs by components that implement the ItemSelectable
interface (check boxes, check menu items, toggle buttons
etc).
List selection The selection in a list or table is either changing or has just
changed.
Windows Opening, Closing, Iconifying, Deiconifying, Focused,
Activated, Deactivated or Maximizing a window
Graphic User Interfaces (GUIs)
IDEs help us with the event handling process

Component
Available
events for
the
component

Graphic User Interfaces (GUIs)

 IDEs help us with auto-generated code

This is the auto-generated

button definition and
listener instantiation and
registration

In NetBeans, the gray code can not be modified

Graphic User Interfaces (GUIs)

Mouse event example

This is the occurred event

Graphic User Interfaces (GUIs)

Action button event example

This event occurs if user press the Salir

button

Graphic User Interfaces (GUIs)

 Key event example

This event occurs if the user press a

keyboard key when the main frame
has the focus.

Graphic User Interfaces (GUIs)

 More Examples here

Implementing Listeners for Commonly Handled

Events

Graphic User Interfaces (GUIs)


Look & Feel
 Look & Feel

Graphic User Interfaces (GUIs)

Default Look & Feel - "Metal"

Cross Platform Look And Feel

This is the "Java L&F"

Graphic User Interfaces (GUIs)

 Setting native System Look And Feel

It is possible to set the L&F that is native to

the system

Graphic User Interfaces (GUIs)

Setting native System Look And Feel

Windows L&F Linux L&F

Graphic User Interfaces (GUIs)
 Substance and Insubstantial

There are Java free APIs used to change the

L&F of Java apps

Substance Insubstantial

Insubstantial WebPage

Graphic User Interfaces (GUIs)

Insubstantial WebPage A hodgepodge of Widgets
Insubstantial WebPage A Ribbon Demo
How to add Insubstantial libraries to project

This is the Look and Feel

class name

Graphic User Interfaces (GUIs)

 How to add Insubstantial libraries to project

Insubstantial WebPage

Graphic User Interfaces (GUIs)


GUI and layers

Graphic User Interfaces (GUIs)

Remember the Tic Tac Toe Example?

Graphic User Interfaces (GUIs)

 New requirements arrive

1. We need to keep
the old text UI
working
2. We need to
develop a new GUI

Graphic User Interfaces (GUIs)

Ok, let us begin with the GUI!!

Graphic User Interfaces (GUIs)

Designing a new GUI using NetBeans

Graphic User Interfaces (GUIs)

 This is the components
palette

This is the canvas

This is the properties

panel for selected
components

Graphic User Interfaces (GUIs)

 The inspector
panel shows
the components
in a hierarchical
representation.

Try to set readable names

to components
Thanks to Visual
Editor it is easy
to make GUI like
this
The properties
panel allow us
to change the
look and feel of
components
without worrying
about code
 After some work
the GUI design is
finished, now it is
time to make real
code
Our old UI class

Graphic User Interfaces (GUIs)

Interfaces allow us to extend working code

This model facilitate

us the extension of
the presentation layer
to new UIs without
affecting the business
or data layers

Graphic User Interfaces (GUIs)

 UI Interface

Graphic User Interfaces (GUIs)

Old Text UI does not need to be dramatically changed

Graphic User Interfaces (GUIs)

 New Swing UI needs
to implement the new
interface

Interface methods
implementation

Graphic User Interfaces (GUIs)

 New Swing UI needs
to implement the new
interface

Event handling
methods

Graphic User Interfaces (GUIs)

Swing UI Constructor

Graphic User Interfaces (GUIs)

Some Methods

Graphic User Interfaces (GUIs)

Some Methods

Graphic User Interfaces (GUIs)

Some Methods

Graphic User Interfaces (GUIs)

Some Methods

Graphic User Interfaces (GUIs)

 Changes in Business Layer

Received
arguments
are used for
executing
required UI

Graphic User Interfaces (GUIs)

Executing Swing GUI

Graphic User Interfaces (GUIs)

 Executing Text UI

We send
arguments in
the program
execution

Graphic User Interfaces (GUIs)

 Executing Text UI

We send
arguments in
the program
execution

Graphic User Interfaces (GUIs)

Check the full code and jar here

Graphic User Interfaces (GUIs)

 References

[Barker] J. Barker, Beginning Java Objects: From Concepts To Code, Second Edition,
Apress, 2005.

[Deitel] H.M. Deitel and P.J. Deitel, Java How to Program: Early Objects Version,
Prentice Hall, 2009.

Laying Out Components Within a Container

http://download.oracle.com/javase/tutorial/uiswing/layout/index.html

Modifying the Look and Feel

http://download.oracle.com/javase/tutorial/uiswing/lookandfeel/
index.html

Inner Class Example

http://download.oracle.com/javase/tutorial/java/javaOO/
innerclasses.html

Graphic User Interfaces (GUIs)