Unit 3Graphical User Interface (GUI)

Dr. Magdi AMER

Dr. Magdi Amer 2

• Java library has a class JFrame that implements the methods necessary to create a window on any operating system (Windows, Mac and UNIX).

• JFrame is generic. It does not have the features that we need (labels, buttons, etc).

• In real life, when we have a factory and we want to modify it’s product, we do not destroy the factory and build a new one, we simply add the machines that we need.

JFrame

Dr. Magdi Amer 3

• Similarly, in OOP, when we want to modify the behavior of a class, we extend the class. This means that we take all the method of the class into the new one (without having to write the code again) so we can modify a method or add a new method.

Extending JFrame

Dr. Magdi Amer 4

Simple Window

Dr. Magdi Amer 5

• A window must extend the class JFrame.• JFrame handle all the complexity of creating a

window on any OS (remember same java code runs on any operating system.

• setSize ( 400, 140 );– Creates a window width = 400, height = 140

• setVisible( true );– Makes the window visible.

Simple Window

Dr. Magdi Amer 6

Dr. Magdi Amer 7

• To add a title to the window, we use the code– super(title);– This code uses the constructor of the parent class

JFrame.– Calling the constructor of the parent class is a

good programming practice, and it may be sometimes necessary.

Simple Window

Dr. Magdi Amer 8

Dr. Magdi Amer 9

GridLayout layout = new GridLayout(4,1); Creates a layout of 4 rows and 1 column.

Container c = getContentPane();c.setLayout(layout );Gets the main container of the window and

assign to it the grid container

Advanced Window

Dr. Magdi Amer 10

JPanel p1 = new JPanel();JPanel p2 = new JPanel();JPanel p3 = new JPanel();JPanel p4 = new JPanel();c.add(p1);c.add(p2);c.add(p3);c.add(p4);Creates 4 panels (containers) and place them on

the window. Each will be placed on a new row.

Advanced Window

Dr. Magdi Amer 11

p1.add(new JLabel("First"));p2.add(new JLabel("Second"));p3.add(new JLabel("Third"));p4.add(new JLabel("Forth")); Creates 4 labels and put each label on a panel.

Advanced Window

Dr. Magdi Amer 12

Dr. Magdi Amer 13

JPanel p4 = new JPanel();c.add(p4);p4.add(new JButton(“Forth"));When a button is placed on a panel It takes its best fit size

c.add(new JButton(“Third"));When a button is placed directly on the windowIt expands to take all of the area

Advanced Window

Dr. Magdi Amer 14

Event Based System

Dr. Magdi Amer 15

Event Based System

Dr. Magdi Amer 16

this.addWindowListener(new MyWindowAdaptor());Place an event listener to listen to events generated by the window.If we are interested in handling a specific event, we implement the method that handles this event.

Public class MyWindowAdaptor extends WindowAdapter WindowAdapter class responsible for handling all events of a window

public void windowClosing(WindowEvent event) { System.exit(0); }Handles the window closing event and closes the application

Event Based System

Dr. Magdi Amer 17

Handling the events of a button

Dr. Magdi Amer 18

Handling the events of a button

Dr. Magdi Amer 19

TextFieldHandler handler = new TextFieldHandler(this); button.addActionListener(handler);Creates an event handler that is associated with a button

public class TextFieldHandler implements ActionListener{ protected MyFrame myFrame; public TextFieldHandler(MyFrame myFrame) { super(); this.myFrame = myFrame; }Creates an action listener and stores a reference to the window that it controls.

Handling the events of a button

Dr. Magdi Amer 20

public void actionPerformed(ActionEvent e) { String txt = myFrame.text1.getText(); JOptionPane.showMessageDialog(null, txt); } }

Reads the text entered in the text field and displays the text in a popup.

Handling the events of a button

Dr. Magdi Amer 21

Building Rich Interface

Dr. Magdi Amer 22

Handling the events of a text field

Dr. Magdi Amer 23

Handling the events of a text field

Dr. Magdi Amer 24

Using a radio button

Dr. Magdi Amer 25

Handling the events of a Radio Button

Dr. Magdi Amer 26

Using a check box

Dr. Magdi Amer 27

Handling the events of a check box

Dr. Magdi Amer 28

Using a combo box

Dr. Magdi Amer 29

Handling the events of a combo box

Dr. Magdi Amer 30

Using Menus

Dr. Magdi Amer 31

Using CardLayout

Dr. Magdi Amer 32

Creating Panels

Dr. Magdi Amer 33

Handling a menu event

Dr. Magdi Amer 34

Handling a menu event

Dr. Magdi Amer 35

2D Graphics