CSC 308 2.0
System Development with Java
Budditha Hettige
Department of Statistics and Computer Science
Introduction to JAVA GUI Programming
Graphical User Interface
• Many Java application use a graphical user interface or GUI
• A GUI is a graphical window or windows that provide interaction with the user.
• GUI‟s accept input from:
– the keyboard
– a mouse.
• A window in a GUI consists of components that:
– present data to the user
– allow interaction with the application.
2 Budditha Hettige
Introduction
• Some common GUI components are:
– buttons, labels, text fields, check boxes, radio buttons, combo boxes, and sliders.
3 Budditha Hettige
GUI Programming
• GUI programs are event-driven
• Basic types of GUI Programs
– Stand-alone applications
– Applets
• Stranded GUI library
– AWT
– SWINIG
4 Budditha Hettige
Abstract Windowing Toolkit(AWT)
• IS a Original Java GUI API
• Very limited in capability
– Few components
– API not well structured, particularly event
handling for user actions
– Not entirely portable (used native widgets)
5 Budditha Hettige
JFC/Swing
• Java Foundation Classes (or “Swing”)
– Replacement for AWT (although does share some classes)
– Also provide basis for developing new GUI features (which are being continually added)
• What does Swing include?
– 100% Java
– Swing components (more, and more sophisticated)
– Pluggable Look and Feel Support
– Accessibility API
– Better graphics support (Java 2D)
– Drag and Drop
6 Budditha Hettige
JFC/Swing cont…
• Disadvantages
– Can be slow (resource hungry)
– Large complex API (big learning curve)
– Many features best suited for GUI builders, IDEs
• Important to use Swing and not AWT
– Swing is the recommended way to build Java GUIs
7 Budditha Hettige
Design Stages of the GUI
1. Design the user interface
– Organising pre-built GUI components to build windows, dialogs
– E.g buttons, tables, menus, etc
2. Writing the application logic
– What does the application do?
3. Writing event-handling code to tie the GUI components to the application logic
8 Budditha Hettige
User interface
• A GUI is built in layers.
• Bottom most layer is the window (Container) – Contains all other components
– Can provide basic features like maximise/minimise buttons, title bar, menu bar, etc
• On top of this are layered (Component) – Components, e.g. buttons, text fields
– or intermediate containers, e.g. panels
• Arrangement of components in a contained is handled by a layout manager – Its job is to instruct components on how to arrange
themselves so the GUI is drawn correctly.
9 Budditha Hettige
The containment hierarchy
• This layered GUI can be viewed as a hierarchy
of components
– NOT an inheritance hierarchy,
– It just describes how components are nested one
within another
10 Budditha Hettige
Swing Top level containers
• JWindow
– Basic no frills window, just a square on the screen
• JFrame
– The basic Swing window. Offers basic window controls, resizable
• JDialog
– For building dialog boxes, e.g. File open/save
• JApplet
– For building applets, embedded into a web page
13 Budditha Hettige
Working with JFrames
• Many different possibilities, but the basics
include:
– Setting window title
– Setting location on screen
– Setting size of window
– Restricting resizes
– Set close operation (exit the program), as by
default it does nothing.
16 Budditha Hettige
Example
public class NewJFrame extends javax.swing.JFrame {
public NewJFrame() {
initComponents();
}
public static void main(String args[]) {
java.awt.EventQueue.invokeLater(new Runnable() {
public void run() {
new NewJFrame().setVisible(true);
}
});
}
}
17 Budditha Hettige
Example
private void initComponents() {
setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
setTitle("Test Window");
setAlwaysOnTop(true);
javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
getContentPane().setLayout(layout);
layout.setHorizontalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGap(0, 251, Short.MAX_VALUE)
);
layout.setVerticalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGap(0, 189, Short.MAX_VALUE)
);
}
18
close operation
Set size of the window
Set title of the window
Budditha Hettige
Adding Components to a Frame
• A JFrame has several areas
– Window decorations
– (Optional) Menu bar
– Content pane
• Content pane is where components are added.
– Content pane is a Container object
– Obtain reference to the content pane, and then add another component to it
JFrame frame = new JFrame(“Example”);
JButton button = new JButton(“Click me!”);
frame.getContentPane().add( button );
19 Budditha Hettige
Adding Components
• Very common to extend the Swing components,
particularly JFrame
– Create your own specialised versions
– May include a fixed set of components
– Provide extra methods for working with those components,
etc.
– Encapsulates how the GUI is constructed
• Slightly different to Visual Basic where one tends to
just use the basic components
20 Budditha Hettige
Layout Managers
• Responsible for layout out (arranging)
components in a Container
• Several different types with different uses
• None of them provide for precise x-y
alignment, unlike VB forms
21 Budditha Hettige
Border Layout
• This is the default layout for JFrame
• Divides the content pane into 5 areas (north, south, east, west, center)
• Areas are expanded/contracted as needed, along with their contents. – Therefore ignores preferred size of the components.
• Center is the default if not specified.
• Adding two components to the same zone means they get added one on top of the other – Instead add the components to a JPanel, and then add that
instead.
22 Budditha Hettige
Grid Layout
• Divides the container into a rectangular grid
– Configurable number rows/columns
• Each grid location is of equal size, one
component assigned to each.
• Automatically assigns components to next
available location
24 Budditha Hettige
Other layout managers
• Flow Layout (default for JPanel)
– Arranges components left-to-right
– Used to arrange buttons on a panel
• Card Layout
– Arranges components like a deck of cards
– Only one card visible at a time
• Box Layout, Grid Bag Layout
– Very sophisticated managers, used by GUI builders for very precise GUI designs.
– Not recommended for hand use!
25 Budditha Hettige
Menus
• A Jframe can have only a single menu bar
– Instance of the Jmenu object
• A menu bar can have several menus on it
– Instances of the Jmenu object
• A menu can have several items on it
– Instances of the JmenuItem object
• Example
26 Budditha Hettige
Swing Controls - Label
• Use to display text
• Codes private javax.swing.JLabel jLabel1;
jLabel1 = new javax.swing.JLabel(); // create object
jLabel1.setFont(new java.awt.Font("Tahoma", 0, 12)); // Set fonts jLabel1.setText("jLabel1"); // Set lables
// place the control in to the pane
layout.setVerticalGroup( .....
.addComponent(jPanel1, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
layout.setHorizontalGroup( .....
.addComponent(jLabel1, javax.swing.GroupLayout.PREFERRED_SIZE, 25, javax.swing.GroupLayout.PREFERRED_SIZE)
28 Budditha Hettige
Text field
• Use to input/output a text
• Sample Codes private javax.swing.JTextField jTextField1;
jTextField1 = new javax.swing.JTextField();
jTextField1.setText("jTextField1");
layout.setVerticalGroup( .....
.addComponent(jTextField1, javax.swing.GroupLayout.PREFERRED_SIZE, 190, javax.swing.GroupLayout.PREFERRED_SIZE)
layout.setHorizontalGroup( .....
.addComponent(jTextField1, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE))
29 Budditha Hettige
Text field data access
• Set text
jTextField1.setText(“text");
• Get text form the text field
String data;
data = jTextField1.getText();
30 Budditha Hettige
Buttons
• Place the button
• Rename the button
• Add action event
• Modify the function private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
}
31 Budditha Hettige
Combo box
• Select a item from a list
• Codes
private javax.swing.JComboBox jComboBox1;
jComboBox1 = new javax.swing.JComboBox();
jComboBox1.setModel(new
javax.swing.DefaultComboBoxModel(new String[]
{ "Item 1", "Item 2", "Item 3", "Item 4" }));
32 Budditha Hettige
Data Access
• Get selected item from the combo box
String ss;
ss = (String)jComboBox1.getSelectedItem();
Type casting
33 Budditha Hettige
Handling Basics
• Swing Events Examples
– Actions
– Mouse Events
– Window Events
35 Budditha Hettige
Event Handling Conventions
• Event object typically extend java.awt.Event
– Some of the „newer‟ ones don‟t
• Events share some common attributes
– a timestamp, source object, etc
36 Budditha Hettige
Action Events
• Very tedious implementation if all activities were dealt with as individual clicks
• Swing provides higher level „action‟ event
• Meaning of event depends on component
– E.g. button click, menu selection, etc
• Basic classes: – ActionEvent – identifies action, key modifiers, etc
– ActionListener – single actionPerformed method
– addActionListener, removeActionListener methods on Component
37 Budditha Hettige
Code
Use
Action Listener java.awt.event.ActionListener
Action Event java.awt.event.ActionEvent
Code
jButton1.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent evt) {
jButton1ActionPerformed(evt);
}
});
private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
}
38 Budditha Hettige
Mouse Events
• Natural for Swing to expose mouse-related events
– It‟s how the user interacts with the GUI
• MouseListener interface describes the basic
events
• Each method accepts a MouseEvent object
parameter
• java.awt.Component has add/remove listener
methods
40 Budditha Hettige
Mouse Events
• So, capturing basic mouse events involves:
– Creating an implementation of MouseListener
– Calling addMouseListener on one or more
Components to register it
42 Budditha Hettige
Window Events
• Swing allows the capturing of window related events
– Activate, deactivate, minimise, open, close etc
• setDefaultCloseOperation is only useful if you don‟t want to do anything complex
• Basic classes/methods
– WindowEvent – identifies Window
– WindowListener – range of methods
– addWindowListener, removeWindowListener methods on JFrame, JWindow, JDialog
43 Budditha Hettige
Other Swing Events
• More Mouse events – Mouse motion, mouse wheels
• Item events – Selecting/deselecting items in lists, checkboxes, etc
• Key Events – Raw keyboard input
• Tree Events – Opening/closing nodes in a tree component
• Drag and drop
• …and many more. See javax.swing.event and java.awt.event packages.
44 Budditha Hettige
Mouse events
Use
Mouse Event java.awt.event.MouseEvent
Mouse Listener java.awt.event.MouseAdapter
Code
jButton2.addMouseListener(new java.awt.event.MouseAdapter() {
public void mouseEntered(java.awt.event.MouseEvent evt) {
jButton2MouseEntered(evt);
}
});
private void jButton2MouseEntered(java.awt.event.MouseEvent evt) {
// TODO add your handling code here:
}
45 Budditha Hettige
Key events
Use
java.awt.event.KeyEvent
Code
jButton2.addKeyListener(new java.awt.event.KeyAdapter() {
public void keyPressed(java.awt.event.KeyEvent evt) {
jButton2KeyPressed(evt);
}
});
private void jButton2KeyPressed(java.awt.event.KeyEvent evt) {
// TODO add your handling code here:
}
46 Budditha Hettige
Dialog Boxes
• A dialog box is a small graphical window that displays a message to the user or requests input.
• A variety of dialog boxes can be displayed using the JOptionPane class. – Message Dialog - a dialog box that displays a
message.
– Input Dialog - a dialog box that prompts the user for input.
– Confirm Dialog This is a dialog box that asks the user a Yes/No question.
47 Budditha Hettige
Dialog Boxes
The JOptionPane class provides static
methods to display each type of dialog box.
Budditha Hettige 48
Message Dialogs
• JOptionPane.showMessageDialog method is used to display a message dialog.
• There are several overloaded versions of this method. showMessageDialog(Component parent,
Object message)
showMessageDialog(Component parent,
Object message,
String title,
int messageType)
Budditha Hettige 49
Message Dialogs
JOptionPane.showMessageDialog(null, "Hello World");
• The first argument can be a reference to a graphical
component.
– The dialog box is displayed inside that component.
– If null is passed as the first argument, which causes the dialog
box to be displayed in the center of the screen.
• The second argument is the message that is to be
displayed.
Budditha Hettige 50
Message Dialogs
• By default the dialog box has:
– the string “Message” displayed in its title bar, and
– an information icon (showing the letter “i) is displayed. JOptionPane.showMessageDialog(null,
"Invalid Data",
"My Message Box",
JOptionPane.ERROR_MESSAGE);
• The third option is the title bar text.
Budditha Hettige 51
Message Dialogs
• These constants can be use to control the icon
that is displayed.
– JOptionPane.ERROR_MESSAGE
– JOptionPane.INFORMATION_MESSAGE
– JOptionPane.WARNING_MESSAGE
– JOptionPane.QUESTION_MESSAGE
– JOptionPane.PLAIN_MESSAGE
Budditha Hettige 52
Input Dialogs
• An input dialog is a quick and simple way to
ask the user to enter data.
• The dialog displays a text field, an Ok button
and a Cancel button.
• If Ok is pressed, the dialog returns the user‟s
input.
• If Cancel is pressed, the dialog returns null.
Budditha Hettige 54
Input Dialogs
• The JOptionPane has several overloaded versions of the static showInputDialog method.
• Here are two of them: showInputDialog(Object message)
showInputDialog(Component parent,
Object message,
String title,
int messageType)
Budditha Hettige 55
Input Dialogs
String name;
name = JOptionPane.showInputDialog("Enter your
name.");
• The argument passed to the method is the message to display.
• If the user clicks on the OK button, name references the string entered by the user.
• If the user clicks on the Cancel button, name references null.
Budditha Hettige 56
Input Dialogs
• By default the input dialog box: – has the string “Input” in its title bar, and
– displays a question icon. String value;
value = JOptionPane.showInputDialog(null,
"Enter the value again.",
"Enter Carefully!",
JOptionPane.WARNING_MESSAGE);
Budditha Hettige 57
Confirm Dialog
• A confirm dialog box typically asks the user a yes or no
question.
• By default Yes, No, and Cancel buttons are displayed.
• The showConfirmDialog method is used to
display a confirm dialog box.
• There are several overloaded versions of this method. int showConfirmDialog(Component parent,
Object message)
int showConfirmDialog(Component parent,
Object message,
String title,
int optionType)
Budditha Hettige 58
Confirm Dialog
int value;
value = JOptionPane.showConfirmDialog(null, "Are you sure?");
• By default the confirm dialog box displays: – “Select an Option” in its title bar,
– Yes, No, and Cancel buttons.
Budditha Hettige 59
Confirm Dialog
• The showConfirmDialog method returns
an integer that represents the button clicked
by the user.
• The button that was clicked is determined by
comparing the method‟s return value to one of
the following constants:
– JOptionPane.YES_OPTION
– JOptionPane.NO_OPTION
– JOptionPane.CANCEL_OPTION
Budditha Hettige 60
Confirm Dialog
int value;
value = JOptionPane.showConfirmDialog(null,
"Are you sure?");
if (value == JOptionPane.YES_OPTION){
//If the user clicked Yes, this code is executed.
}
else if (value == JOptionPane.NO_OPTION){
//If the user clicked no, this code is executed.
}
else if (value == JOptionPane.CANCEL_OPTION){
//If the user clicked Cancel, this code is executed.
}
Budditha Hettige 61
Confirm Dialog
int value;
value = JOptionPane.showConfirmDialog(null,
"Are you sure?",
"Please Confirm", JOptionPane.YES_NO_OPTION);
• One of the following constants can be used for the fourth parameter: – JOptionPane.YES_NO_OPTION
– JOptionPane.YES_NO_CANCEL_OPTION
Example:
TestAverageDialog.java
Budditha Hettige 62