Java - Trang ď SwingGUI

Swing & GUI Design
AWT
Swing
GUI Design Using IDE Tool

What is GUI
‰

Graphic User Interface





‰

Outer Interface of Program
GUI is Built by GUI Components
GUI Component : Visual Object to Interact With
Outside such as Mouse, Keyboard, etc.
Ex) AWT, Swing Components

Interfaces Provided by Java




Graphic : line, rectangle, polygon, arc, ….
Interaction Elements : button, textfield, menu, …
Image : image files

1


GUI and AWT
‰

Abstract Window Toolkit (AWT)
 Java.awt package
9
9
9
9

Component Class : Button, List, Menu, TextArea,
Window, MenuBar, Dialog
Graphics Related Classes : Graphics Context, Font ,
Color
Event Class : For Event Handling
Layout Management Class : Size and Position of
Component

GUI Component Hierarchy

2


GUI Operation Outline
‰

Procedure for Making GUI in Java





Select the Container Component and Arrange the
Basic Components within this container. Select the
Layout Manager Also.
Make the Event Handling Routine and Register it.
8



Event Listener

Insert the Drawing Code to Override the paint()
method in order to draw some figure on component
8

Paint(), repaint(), update()

Make the GUI Component
‰

Procedure to put the GUI components into Frame or
Panel which is container




‰

Make the container object
Declare and create the component object.
Put the objects created into container

Layout Manager






FlowLayout : From Left to Right in Panel, Default Manager
GridLayout : With Grid, Arrange in Lattice Type
GridBagLayout : Arrange Different Size Component on Grid
BorderLayout : Up, Down, Left, Right, Center
CardLayout : Arrange Several Cards

3


Graphics User Interface (I)
‰

Component Class









Abstract Class which provides :
Methods to control size and position on the screen
Methods to setup cursor and return the cursor
position
Methods for drawing such as
paint(),update(),repaint()
Methods to determine keyboard input, visibility
Function for providing event handling registration
Methods related with Font and Color

Graphics User Interface (I)
‰

Label



‰

Button



‰

Not able to change
Describes Text information

When user presses
Occur events to make some action.

Check Box




Has two states of ON and OFF
When user selects one of two
For multiple selection, CheckboxGroup can be used

4


Graphics User Interface (I)
‰

Choice Button




‰

Select List


‰

Used to select one or more item(s)

Text Field



‰

Select one of several items to select
When user clicks arrow button, then the selection list is
displayed.
When user select one, Action event occurred.

A line of text area to input
It is possible to disable/enable input

Text Area


Multi-lines of text area to input

Graphics User Interface (I)
‰

TextComponent Class


‰

Scroll Bar



‰

Super class of TextField and TextArea
To input an integer within some range

Canvas



To create display area for graphic
Building a customized component by user

5


Graphics User Interface (II)
‰

Panel



‰

Frame



‰

Inherited from Container class (Super of Applet)
Components can be added into Panel
Window to have Title Bar and Border
Independent of Window( compare to Dialog)

Dialog Box





Window to have Title Bar
Dependent on Parent Window
Modal Dialog (Can do work only after terminating the Dialog)
Non-Modal Dialog

Graphics User Interface (II)
‰

Scroll Pane




‰

To make an area to be scrolled easily
To display the child component as large as possible

If child component is larger than Scroll Pane, it adds the
horizontal or vertical scroll bar.

Menu






MenuItem : Each Item of Menu
CheckboxMenuItem
Menu
MenuBar
PopupMenu

6


Events
‰

Event




‰

Low Level Event :



‰

Event Listener
Delegation Model
Adaptor
Mouse, MouseMotion, Key, Component, Container,
Focus, Window

High Level (Have Semantics) Event:


Action, Adjustment, Item, Text

Events

7


JFC & Swing
‰

JFC (Java Foundation Class)


Give a group of class to help people build GUI



Things Contains :



Swing Components
8

Pluggable Look and Feel Support

8

Accesibility API

8

Java 2D API

8

Drag and Drop Support

JFC & Swing
‰

Differences between AWT and Swing


Swing components are implemented with
absolutely no native code => can be present on
every platform.



Swing component which their names start with J
can be identified



Have capabilities beyond what the AWT
components offer

8


JFC & Swing
‰ Capabilities beyond AWT


Swing buttons and labels can display images instead of, or in
addition to, text.



You can easily add or change borders drawn around most Swing
components.



You can easily change the behavior or appearance of a Swing
component by either invoking methods on it or creating a

subclass of it



Swing components need not be rectangular.



Assistive technologies such as screen readers can easily get
information from Swing components.

Swing Components
‰

Content URL :
/>onents/components.html

‰

Top Level Containers


‰

The components at the top of any Swing
containment hierarchy

General Purpose Containers


Intermediate containers that can be used under
many different circumstances

9


Swing Components
‰

Special Purpose Containers


‰

Basic Controls


‰

Atomic components that exist primarily to get input from the
user; they generally also show simple state

Uneditable Information Displays


‰

Intermediate containers that play specific roles in the UI.

Atomic components that exist solely to give the user

information

Editable Displays for Formatted Information


Atomic components that display highly formatted information
that (if you choose) can be edited by the user

Swing Application Code
‰

Importing Swing Packages ( and AWT packages)
<SwingApplication.java>
Import javax.swing.*;
Import java.awt.*;

‰

Import java.awt.event.*;

Choosing the Look and Feel


Java Look and Feel, Windows Look and Feel, CDE/Motif Look and
Feel
public static void main(String[] args) { try
{ UIManager.setLookAndFeel(
UIManager.getCrossPlatformLookAndFeelClassName()); }
catch (Exception e) { }
...//Create and show the GUI... }

10


Swing Application Code
‰

Setting Up a Top-Level Container


Instances of JFrame, JDialog, JApplet



JFrame : implements a single main window



JDialog : implements a secondary window



JApplet : implements an applet’s display area within
a browser windows

Ex)
JFrame frame = new JFrame(“SwingApplication”);

Swing Application Code
‰

Setting Up Buttons and Labels


Make component objects and set up attribute

Ex)
JButton button = new JButton("I'm a Swing button!");
button.setMnemonic(KeyEvent.VK_I); //use Alt-i
button.addActionListener(...create an action listener...);
final JLabel label = new JLabel(labelPrefix + "0 "); ...
label.setLabelFor(button); ...//in the event handler for button
clicks: label.setText(labelPrefix + numClicks);

11


Swing Application Code
‰

Adding Components to Containers


To group a label and button in a container (a
JPanel) before adding components to the frame

Ex)
JPanel pane = new JPanel();
pane.setBorder(BorderFactory.createEmptyBorder(30, 30, 10,
30));

pane.setLayout(new GridLayout(0, 1)); pane.add(button);
pane.add(label);

Swing Application Code
‰

Adding Borders Around Components


Provides some empty space around the panel’s contents



Ex)

pane.setBorder(BorderFactory.createEmptyBorder(
30, //top
30, //left
10, //bottom
30) //right );

12


Swing Application Code
‰

Handling Events


Make Event Handler

Ex)
button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) { numClicks++;
label.setText(labelPrefix + numClicks); }
}); ...
frame.addWindowListener(new WindowAdapter() { public void
windowClosing(WindowEvent e) { System.exit(0); }
});

Swing Application Code
‰

Dealing with Thread Issues


Because the event handler runs in the same thread
that performs all event handling and painting for the
application, there's no possibility that two threads
will try to manipulate the GUI at once



All manipulation of the GUI such as setText,
getText, etc, is performed in event handlers such as
actionPerformed()

13

Swing Application Code
‰

Supporting Assistive Technologies


Support for assistive technologies -- devices such
as screen readers that provide alternate ways of
accessing information in a GUI -- is already
included in every Swing component.



The only code in SwingApplication that exists solely
to support assistive technologies is this:
label.setLabelFor(button);

GUI Design Using IDE TOOL
‰

There are several Integrated Development
Environment (IDE) Tools





‰

Eclipse
Jbuilder of Borland
Visual Age of IBM
Visual J++ of Microsoft

Demonstration

14