GUI Programming in Java

1
GUI Programming in Java

• Prepared by Dr. Tony K. C. Chan.

2
Learning Objectives

• Basic skill of GUI (Graphical user interface)
  programming in Java
• Concept of even-driven programming
• Design the GUI of the phone system

3
1. Java API for GUI Programming

• API Application Programming Interface
• Three groups
• Container classes Contain other
  components.e.g., JFrame JPanel
• Component classes Basic elements.e.g., JButton,
  JLabel, JTextField
• Helper classes Draw place objects.e.g.,
  Dimension LayoutManager.

4
1. Java API for GUI Programming

• Example

5
2. Using the GUI components

• Five steps in using the GUI components.
• CreateJButton jbtExit new JButton(Exit)
• ConfigurejbtExit.setPreferredSize( new
  Dimension(120, 20))
• Addcontainer.add(jbtExit)
• Listen
• Visualizeframe.setVisible(true)

6
2. Using the GUI components

• Example

/ File name FirstGUI.java / import
java.awt. import java.awt.event. import
javax.swing. public class FirstGUI public
static void main(String args) ...
For accessing various GUI classes
7
2. Using the GUI components

• Example The main() method

Create a window object
Get the container of the window
Please fill in the missing statements.
Configure the window
Visible the window
// Create application frame JFrame frame new
JFrame() // Get the content pane from the
frame Container container frame.getContentPane()
... // Create a button object ... // Add the
button into the frame // Configure the
frame frame.setTitle("My First GUI") frame.setSiz
e(350, 115) frame.setDefaultCloseOperation(JFrame
.EXIT_ON_CLOSE) // Show the frame frame.setVisibl
e(true)
8
2. Using the GUI components

• Example The two missing statements

// Create a button object JButton jbtExit new
JButton(Exit) // Add the button into the
frame container.add(jbtExit)
9
3. Layout Managers

• Automatically map the interfaces on the window
• Set on the containercontainer.setLayout( new
  SpecificLayout())
• Several layout managers
• FlowLayout
• GridLayout,
• BorderLayout, etc.

10
3. Layout Managers

• FlowLayout

Get the Container
Set FlowLayout on the Container
Create a FlowLayout
// Create and set FlowLayout manager getContentPan
e().setLayout(new FlowLayout()) // Create and
add five buttons getContentPane().add(new
JButton(Button 1) getContentPane().add(new
JButton(Button 2) getContentPane().add(new
JButton(Button 3) getContentPane().add(new
JButton(Button 4) getContentPane().add(new
JButton(Button 5)
Add buttons
11
3. Layout Managers

• GridLayout

Create a GridLayout with 2 rows and 3 cols
// Create and set GridLayout manager getContentPan
e().setLayout(new GridLayout(2, 3)) // Create
and add five buttons getContentPane().add(new
JButton(Button 1) getContentPane().add(new
JButton(Button 2) getContentPane().add(new
JButton(Button 3) getContentPane().add(new
JButton(Button 4) getContentPane().add(new
JButton(Button 5)
12
3. Layout Managers

• BorderLayout

// Create and set BorderLayout manager getContentP
ane().setLayout(new BorderLayout()) // Create
and add five buttons getContentPane().add(new
JButton("Button 1 (NORTH)"), BorderLayout.NORTH)
getContentPane().add(new JButton("Button 2
(CENTER)"), BorderLayout.CENTER) getContentPane
().add(new JButton("Button 3 (WEST)"),
BorderLayout.WEST) getContentPane().add(new
JButton("Button 4 (EAST)"), BorderLayout.EAST)
getContentPane().add(new JButton("Button 5
(SOUTH)"), BorderLayout.SOUTH)
13
3. Layout Managers

• Common pattern for GUI programming

public class MyApplication public static void
main(String args) MainFrame frame new
MainFrame() frame.setVisible(true) //
In general, dont do any more GUI work hear.
public class MainFrame extends JFrame ... //
Declare and/or create GUI components public
MainFrame () ... // Configure add
components
14
4. Event-Driven Programming

• Code is executed when an event occurs (e.g., a
  button click).
• Some important objects
• Event object The event itself (e.g.,
  ActionEvent).
• Source object It generates event (e.g., a
  JButton object generates ActionEvent).
• Listener object- It receives the event.- It
  contains event handler to process the event.

15
4. Event-Driven Programming

• Model of Event Handling

Event Object(e.g., ActionEvent)
User Action(e.g., a button click)
Notify listener
Trigger an event
Generate an event
Listener Object (e.g., ActionListener)
Event handler pubic void ActionPerformed(
ActionEvent e) ...
Source Object (e.g., a button)
Register a Listener Object e.g.,
jbtExit.addActionListener(...)
16
4. Event-Driven Programming

• Steps to implement an Event Handler
• Declare
• public class MainFrame extends JFrameimplements
  ActionListener
• ...
• Register
• jbtExit.addActionListener(this)
• Implement
• public void actionPerformed(ActionEvent e)
• ...

17
4. Event-Driven Programming

• Example Exit button

public class MainFrame extends JFrame
implements ActionListener JButton jbtExit
new JButton(Exit) public MainFrame ()
... jbtExit.addActionListener(this) ...
public void ActionPerformed(ActionEvent e)
if (e.getSource() jbtExit)
System.exit(0)
Declare
Register
Implement
Obtain the source object that generates the Event.
18
THE END