03/01/2013

1

Graphics User Interface

By Võ Văn Hải

Faculty of Information Technologies

Industrial University of Ho Chi Minh City

Java Programming Course

Java SE 7 Platform at a Glance

2

03/01/2013

2

What is JFC?

• The Java Foundation Classes (JFC) are a comprehensive set of

GUI components and services to simplifythe development and

deployment of commercial-quality desktop applications.

• It’s an effort to provide a complete CLASS LIBRARY to build

modern GUIs out-of-the-box.

• With JFC you’ll get most of what you need when developing any

kind of user interface.

3

JFC

4 SWING IS FOR GUI BUILDING

03/01/2013

3

What about AWT?

• Provides the basic functionality for GUI building.

• Provides a minimum set of components.

• Complex GUI require complex applications.

• Components difficult to customize extend.

• JFC extends AWT

• JFC provides more components and more functionality.

• AWT provides:

o The Event Model.

o The Component/Container conceptualization.

5

AWT

6

03/01/2013

4

AWT & SWING

7

Java GUI History

• Abstract Windowing Toolkit (AWT): Sun's initial effort to create

a set of cross-platform GUI classes. (JDK 1.0 - 1.1)

o Maps general Java code to each operating system's real GUI system.

o Problems: Limited to lowest common denominator; clunky to use.

• Swing: A newer GUI library written from the ground up that allows

much more powerful graphics and GUI construction. (JDK 1.2+)

o Paints GUI controls itself pixel-by-pixel rather than handing off to OS.

o Benefits: Features; compatibility; OO design.

o Problem: Both exist in Java now; easy to get them

mixed up; still have to use both in various places.

03/01/2013

5

Graphical User Interfaces

• A Graphical User Interface (GUI) in Java is

created with at least three kinds of objects:

o Components

o Events

o Listeners

Graphical User Interfaces -Components

• There are two types of Components:

o Components, which are objects that represent screen

elements : labels, buttons, text fields, menus, etc.

o Some components are containers that hold and organize

other components: frames, panels, applets, dialog boxes,…

• top-level container: frames, windows, dialogs, applets

• containers: panel, tabled panes,scroll panes, …

10

03/01/2013

6

Java

Swing

Com

pon

ent

s

11

12

03/01/2013

7

GUI - Events and Listeners (1)

• The Event Model GUI Building is Event Driven.

• Listeners are objects which are notified whenever a certain

event happens.

• Different Listeners can listen to different events (mouse move,

button clicks, list selection, windows closing, etc…)

• Each component has a list of Listeners for each type of events

may happen.

• If you want to do something when a certain event happens:

o Create your listener class/object

o Register it with the component you are interested in

13

GUI - Events and Listeners (2)

Component

A component object may generate an event

Listener

A corresponding listener object is designed to respond to the event

Event

When the event occurs, the component calls the appropriate method of the listener,

passing an object that describes the event

03/01/2013

8

15

GUI - Events and Listeners (3)

• Determining Event Sources

o Recall that interactive GUIs require establishing a relationship

between components and the listeners that respond to

component events

o One listener object can be used to listen to two different

components

o The source of the event can be determined by using the

getSource method of the event passed to the listener

16

03/01/2013

9

GUI Development

• Generally we use components and events that are predefined by

classes in the Java class library

• Therefore, to create a Java program that uses a GUI we must:

o instantiate and set up the necessary components

o implement listener classes for any events we care about

o establish the relationship between listeners and components that

generate the corresponding events

• Let's now explore some new components and see how this all comes

together

GUI components: Top-level container

18

03/01/2013

10

Top-level container: JFrame

19

Top-level container: JDialog

20

03/01/2013

11

Top-level container: Window

21

Top-level container: JApplet

22

03/01/2013

12

Top-level container: Events

23 Registe WindowListener

Top-level container: Events (2)

24

03/01/2013

13

GUI Components - JPanel

• A panel is a container that cannot be displayed on its own but is used to organize other components

• A panel must be added to another container to be displayed

• Nested Panels

o Containers that contain other components make up the containment

hierarchy of an interface

o This hierarchy can be as intricate as needed to create the visual

effect desired

o The following example nests two panels inside a third panel – note the

effect this has as the frame is resized

25

26

GUI Components - JPanel

03/01/2013

14

GUI Components - JLabel

• A label is a GUI component that displays a line of text

• Labels are usually used to display information or identify other

components in the interface

• It can also be used to display an image. That is, a label can be

composed of text, and image, or both at the same time

• The ImageIcon class is used to represent an image that is stored in

a label

• The position of the text relative to the image can be set explicitly

• The alignment of the text and image within the label can be set as

well

27

28

GUI Components - JLabel

03/01/2013

15

GUI Components - JButton

29

JButton is a clickable region for

causing actions to occur

JB

utto

n dem

o

30

03/01/2013

16

Event code organiszation

• There are 3 ways to organize event code:

o Anonymous class

• Apply when the manipulation code is simple, small

o Make container implements the listeners (or extends

adaptor)

• Apply when the manipulation code is medium

o Make new class for event manipulation

• Apply when the manipulation code is large

31 See demo

GUI Components - JCheckBox

• A check box is a button that can be toggled on or off

• It is represented by the JCheckBox class

• Unlike a push button, which generates an action event, a check box

generates an item event whenever it changes state (is checked on

or off)

• The ItemListener interface is used to define item event listeners

• The check box calls the itemStateChanged method of the listener

when it is toggled

32

03/01/2013

17

GUI Components - JRadioButton

• A group of radio buttons represents a set of mutually exclusive

options – only one can be selected at any given time

• When a radio button from a group is selected, the button that is

currently "on" in the group is automatically toggled off

• To define the group of radio buttons that will work together,

each radio button is added to a ButtonGroup object

• A radio button generates an action event

33

JRadioButton & JCheckBox demo

34

03/01/2013

18

35

GUI Components – JMenu

• A menu offers options to user. • Menus are not generally added to user interface. • Menu usually appears either in a menu bar or as a popup menu. • A JFrame often has a menu bar containing many menus; and each

menu can contain many choices. • Menu bar can be added to a JFrame with the method

setJMenuBar.

36

03/01/2013

19

GUI Components – JPopupMenu

37

GUI Components – JToolBar

• In user interfaces, a toolbar is often used to hold commands

that also appear in the menus.

• Frequently used commands are placed in a toolbar for quick

access. Clicking a command in the toolbar is faster than choosing

it from the menu.

38

03/01/2013

20

Layout Managers

• A layout manager is an object that determines the way that

components are arranged in a container

• There are several predefined layout managers defined in the

Java standard class library:

39

Defined in the AWT

Defined in Swing

Flow Layout

Border Layout

Card Layout

Grid Layout

GridBag Layout

Box Layout

Overlay Layout

Layout Managers

• Every container has a default layout manager, but we can

explicitly set the layout manager as well

• Each layout manager has its own particular rules governing how

the components will be arranged

• Some layout managers pay attention to a component's preferred

size or alignment, while others do not

• A layout manager attempts to adjust the layout as components

are added and as containers are resized

40

03/01/2013

21

Flow Layout

• Flow layout puts as many components as possible on a row, then moves to the next row

• Rows are created as needed to accommodate all of the components

• Components are displayed in the order they are added to the container

• Each row of components is centered horizontally in the window by default, but could also be aligned left or right

• Also, the horizontal and vertical gaps between the components can be explicitly set

41

FLowLayout demo

42

03/01/2013

22

Border Layout

• A border layout defines five areas into which components can be

added

• Each area displays one component (which could be a container such

as a JPanel)

• Each of the four outer areas enlarges as needed to accommodate

the component added to it

• If nothing is added to the outer areas, they take up no space and

other areas expand to fill the void

• The center area expands to fill space as needed

43

Border Layout demo

44

03/01/2013

23

Grid Layout

• A grid layout presents a container’s components in a rectangular

grid of rows and columns

• One component is placed in each cell of the grid, and all cells

have the same size

• As components are added to the container, they fill the grid

from left-to-right and top-to-bottom (by default)

• The size of each cell is determined by the overall size of the

container

45

Grid Layout demo

46

03/01/2013

24

Box Layout

• A box layout organizes components horizontally (in one row) or

vertically (in one column)

• Components are placed top-to-bottom or left-to-right in the

order in which they are added to the container

• By combining multiple containers using box layout, many

different configurations can be created

• Multiple containers with box layouts are often preferred to one

container that uses the more complicated gridbag layout

manager

47

Box Layout

• Invisible components can be added to a box layout container to

take up space between components

o Rigid areas have a fixed size

o Glue specifies where excess space should go

• A rigid area is created using the createRigidArea method of

the Box class

• Glue is created using the createHorizontalGlue or

createVerticalGlue methods

48

03/01/2013

25

Box Layout demo

49

50

03/01/2013

26

GUI Components – Text component

51

GUI Components – Text component

52

03/01/2013

27

Group Description Swing Classes

Text Controls

Also known simply as text fields, text controls can display only one line of editable text. Like buttons, they generate action events. Use them to get a small amount of textual information from the user and perform an action after the text entry is complete.

JTextField and its subclasses JPasswordField and JFormattedTextField

Plain Text Areas

JTextArea can display multiple lines of editable text. Although a text area can display text in any font, all of the text is in the same font. Use a text area to allow the user to enter unformatted text of any length or to display unformatted help information.

JTextArea

GUI Components – Text component

53

Group Description Swing Classes

Styled Text Areas

A styled text component can display editable text using more than one font. Some styled text components allow embedded images and even embedded components. Styled text components are powerful and multi-faceted components suitable for high-end needs, and offer more avenues for customization than the other text components. Because they are so powerful and flexible, styled text components typically require more initial programming to set up and use. One exception is that editor panes can be easily loaded with formatted text from a URL, which makes them useful for displaying uneditable help information.

JEditorPane and its subclass JTextPane

GUI Components – Text component

54

03/01/2013

28

55

Demo JEditorPane as a simple browser

More on Event-Handling

56

03/01/2013

29

GUI Components – others container

• JScrollPane

• JSplitPane

• JTabbedPane

57

Dialog Boxes

• A dialog box is a small window that "pops up" to interact with the

user for a brief, specific purpose

• The JOptionPane class makes it easy to create dialog boxes for

presenting information, confirming an action, or accepting an input

value.

• Dialog types:

o JOptionPane.showConfirmDialog

o JOptionPane.showInputDialog

o JOptionPane.showMessageDialog

o JOptionPane.showOptionDialog

58

03/01/2013

30

Dialog Boxes – Input Dialog

59

Dialog Boxes – Confirm Dialog

60

03/01/2013

31

Dialog Boxes – Message Dialog

JOptionPane.INFORMATION_MESSAGE

JOptionPane.ERROR_MESSAGE

JOptionPane.PLAIN_MESSAGE

JOptionPane.WARNING_MESSAGE

JOptionPane.QUESTION_MESSAGE 61

Dialog Boxes – Option Dialog

62

03/01/2013

32

Dialog Boxes - JColorChooser

63

Dialog Boxes - JFileChooser

64

03/01/2013

33

Dialog Boxes - JFileChooser

65

Dialog Boxes - JFileChooser

66

Choosing multiple file types

03/01/2013

34

GUI Components – others components

• JProgressBar

• JSlider

• JSrollBar

67

GUI Components – JList

• The Swing Jlist class represents a list of items from which the user can choose.

• The contents of a JList object can be specified using an array of objects.

• A JList object generates a list selection event when the current selection changes.

• A JList object can be set so that multiple items can be selected at the same time. It can be one of three options:

o Single selection – only one item can be selected at a time. o Single interval selection – multiple, contiguous items can be

selected at a time. o Multiple interval selection – any combination of items can be

selected.

• The list selection mode is defined by a ListSelectionModel object.

68

03/01/2013

35

69

GUI Components – JTable

• Tables are used to display data in a spreadsheet fashion

• The JFC JTable is oriented toward displaying database records

in which each row displays a row in the database, and each

column displays different record’s values for the same field.

• JTable is a user-interface component that presents data in a

two-dimensional table format

• The JTable has many features that make it possible to

customize its rendering and editing but provides defaults for

these features.

70

03/01/2013

36

GUI Components – JTable

• A JTable consists of: o Rows of data

o Columns of data

o Column headers

o An editor, if you want cells to be editable

o A TableModel, usually a subclass of AbstractTableModel, which stores the

table’s data

o A TableColumnModel, usually DefaultTableColumnModel, which controls the

behavior of the table’s columns and gives access to the TableColumns

o A ListSelectionModel, usually DefaultListSelectionModel, which keeps

track of the JTable’s currently selected row(s)

o A TableCellRenderer, usually an instance of DefaultCellRenderer

o Multiple TableColumns, which store graphical information about each column

o A JTableHeader which displays column headers

71

Cre

ate

JT

able

72

03/01/2013

37

GUI Components – Jtable

73

JTable: Sort and Filter

74

03/01/2013

38

GUI Components – JTree

JTree is a Swing component that displays data in a treelike hierarchy.

75

Root

Leaf

GUI Components – JTree

• While JTree displays the tree, the data representation of the

tree is handled by TreeModel, TreeNode, and TreePath.

o TreeModel represents the entire tree,

o TreeNode represents a node,

o TreePath represents a path to a node.

• Unlike the ListModel or TableModel, the tree model does not

directly store or manage tree data. Tree data are stored and

managed in TreeNode and TreePath.

• You can create a tree using its no-arg constructor, a tree model,

a tree node, a Hashtable, an array, or a vector

76

03/01/2013

39

GUI Components – JTree

77

javax.swing.JTree

-model: TreeModel

-anchorPath: TreePath

-leadPath: TreePath

-selectionModel: TreeSelectionModel

-cellEditor: TreeCellEditor

-cellRenderer: TreeCellEditor

TreeModel

TreeSelectionModel

TreeCellRenderer

TreeNode

TreeCellEditor

DefaultTreeModel

MutableTreeNode

TreePath

DefaultMutableTreeNode

DefaultTreeCellRenderer

DefaultTreeCellEditor

DefaultTreeSelectionModel

The TreeSelectionModel interface handles tree node selection.

The DefaultTreeCellRenderer class provides a default tree node renderer that can display a label and/or an icon in a node.

The DefaultTreeCellEditor can be used to edit the cells in a text field.

GUI Components – Jtree

• While TreeModel represents the entire tree, TreeNode stores a single

node of the tree.

• MutableTreeNode defines a subinterface of TreeNode with additional

methods for changing the content of the node, for inserting and removing a

child node, for setting a new parent, and for removing the node itself.

• DefaultMutableTreeNode is a concrete implementation of

MutableTreeNode that maintains a list of children in a vector and provides

the operations for creating nodes, for examining and modifying a node’s

parent and children, and also for examining the tree to which the node

belongs.

• Normally, you should use DefaultMutableTreeNode to create a tree node.

78

03/01/2013

40

Demo JTree

79

GUI Components – JTree : events

• JTreecan fire TreeSelectionEvent and TreeExpansionEvent, among

many other events.

• Whenever a new node is selected, JTree fires a TreeSelectionEvent.

• Whenever a node is expanded or collapsed, JTree fires a

TreeExpansionEvent.

• To handle the tree-selection event, a listener must implement the

TreeSelectionListener interface, which contains a single handler

named valueChanged method.

• TreeExpansionListener contains two handlers named treeCollapsed

and treeExpanded for handling node expansion or node closing.

80

03/01/2013

41

JTree event sample 81

GUI Components – JTree Tree Node Rendering and Editing

82

03/01/2013

42

MDI - multiple document interface

• Many applications present information in multiple windows that

are all contained inside a large frame.

• If you minimize the application frame, then all of its windows

are hidden at the same time.

• In the Windows environment, this user interface is sometimes

called the multiple document interface or MDI.

• In the world of Java, where you can't rely on a rich host

windowing system, it makes a lot of sense to have your

application manage its frames.

83

84

03/01/2013

43

Look-and-Feel

85

Somes installed look-n-feel: javax.swing.plaf.metal.MetalLookAndFeel javax.swing.plaf.nimbus.NimbusLookAndFeel com.sun.java.swing.plaf.motif.MotifLookAndFeel com.sun.java.swing.plaf.windows.WindowsLookAndFeel com.sun.java.swing.plaf.windows.WindowsClassicLookAndFeel

86