1 / 671

COP 3503 FALL 2012SHAYAN JAVED

LECTURE 14

Programming Fundamentals using Java

2 / 67

Graphical-User Interfaces

(GUIs)

3 / 67

So far...

Only created text-based programs

No fancy graphics (buttons! menus! text-fields!)

4 / 67

Graphical-User Interfaces (GUI)

Going to look at how to create GUIs in Java

5 / 67

Graphical-User Interfaces (GUI)

Going to look at how to create GUIs in Java

Use the SWING API (for desktop-programs)

6 / 67

Graphical-User Interfaces (GUI)

Going to look at how to create GUIs in Java

Use the SWING API (for desktop-programs)

Use the AWT API (for Java Applets – on the web)

7 / 67

The SWING API

Used to create desktop applications.

8 / 67

The SWING API

Used to create desktop applications.

Uses the Model-View-Controller software engineering design pattern.

9 / 67

Model-View-Controller design

Model: Manages the behavior and data of the application. Changes state.

10 / 67

Model-View-Controller design

Model: Manages the behavior and data of the application. Changes state.

View: Renders the model into a form for interaction.

(Button, textbox, checkbox, etc.)

11 / 67

Model-View-Controller design

Model: Manages the behavior and data of the application. Changes state.

View: Renders the model into a form for interaction.

(Button, textbox, checkbox, etc.) Controller:

Receives user input and initiates a response by interacting with the model.

12 / 67

The SWING API

Example:

Scrabble

13 / 67

The GUI API

Use the NetBeans IDE for easy drag-and-drop creation.

14 / 67

The GUI API

Use the NetBeans IDE for easy drag-and-drop creation.

But we are going to focus on basic code

15 / 67

The GUI API

3 Groups of classes:

Component Classes: Buttons, Labels, TextFields, etc.

16 / 67

The GUI API

3 Groups of classes:

Component Classes: Buttons, Labels, TextFields, etc.

Container Classes: Frames, Panels, Applets, etc.

17 / 67

The GUI API

3 Groups of classes:

Component Classes: Buttons, Labels, TextFields, etc.

Container Classes: Frames, Panels, Applets, etc.

Helper Classes: Graphics, Color, Font, etc.

18 / 67

The SWING API

Simple Window

Represented by the JFrame class

19 / 67

The SWING API

import javax.swing.JFrame;

public static void main(String[] args) {

JFrame frame = new JFrame(“A Title”);

frame.setSize(400, 300);

frame.setLocation(10, 300);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setVisible(true);

}

20 / 67

The SWING API – add components

import javax.swing.*;

public static void main(String[] args) {

JFrame frame = new JFrame(“A Title”);

JButton button = new JButton(“OK”);

frame.add(button);

frame.setSize(400, 300);

...

}

21 / 67

The SWING API – add components

A JFrame containts a content pane.

22 / 67

The SWING API – add components

A JFrame containts a content pane.

Content pane = instance of java.awt.Container;

23 / 67

The SWING API – add components

A JFrame containts a content pane.

Content pane = instance of java.awt.Container;

Objects are added to it frame.add( Component )

24 / 67

The SWING API – add components

A JFrame containts a content pane.

Content pane = instance of java.awt.Container;

Objects are added to it frame.add( Component ) frame.remove( Component )

25 / 67

Layout Managers

Components in content pane are laid out by layout managers.

26 / 67

Layout Managers

Components in content pane are laid out by layout managers.

Multiple types: FlowLayout GridLayout BorderLayout

27 / 67

Layout Managers - FlowLayout

Components arranged left to right in order.

One row fills up, a new row is started

28 / 67

Layout Managers - FlowLayout

java.awt.FlowLayout

Properties: alignment: int (CENTER/LEFT/RIGHT/etc.) hgap, vgap: int (the gaps – default: 5 pixels)

29 / 67

Layout Managers - FlowLayout

java.awt.FlowLayout

Properties: alignment: int (CENTER/LEFT/RIGHT/etc.) hgap, vgap: int (the gaps – default: 5 pixels)

Constructors: FlowLayout() FlowLayout(alignment, hgap, vgap)

30 / 67

Layout Managers - FlowLayout

public class ShowFlowLayout extends JFrame {

public ShowFlowLayout() {

// set the flow layout

setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20);

add(new JButton(“Button”));

add(new JTextField(8));

}

}

31 / 67

Layout Managers - GridLayout

Arrange components in a grid (matrix) formation. Placed left-to-right.

32 / 67

Layout Managers - GridLayout

Arrange components in a grid (matrix) formation. Placed left-to-right.

Properties: rows, columns: int hgap, vgap: int (the gaps – default: 5 pixels)

33 / 67

Layout Managers - GridLayout

public class ShowGridLayout extends JFrame {

public ShowGridLayout() {

// set the Grid layout – 3 rows, 2 columns

setLayout(new GridLayout(3, 2, 10, 10);

add(new JButton(“Button”));

add(new JTextField(8));

}

}

34 / 67

Layout Managers - BorderLayout

Default Layout for ContentPanes (Jframe)

Divides container into 5 areas: East, West, South, North, Center Components are added into one of these areas

Properties: hgap, vgap: int (the gaps – default: 5 pixels)

35 / 67

Layout Managers - BorderLayout

public class ShowBorderLayout extends JFrame {

public ShowBorderLayout() {

// set the Border Layout

setLayout(new BorderLayout(10, 10);

add(new JButton(“Button”), BorderLayout.EAST);

add(new JTextField(8), BorderLayout.WEST);

}

}

36 / 67

The SWING API

Looked at adding Components to the Window (Frame).

And how to lay them out.

37 / 67

The SWING API

Looked at adding Components to the Window (Frame).

And how to lay them out.

But often need “sub-windows” to create more complex interfaces.

38 / 67

Using JPanels as Subcontainers

Panels are subcontainers.

39 / 67

Using JPanels as Subcontainers

Panels are subcontainers.

Can add components to them

40 / 67

Using JPanels as Subcontainers

Panels are subcontainers.

Can add components to them

Also set layouts (default: FlowLayout)

41 / 67

Using JPanels as Subcontainers

Panels are subcontainers.

Can add components to them

Also set layouts (default: FlowLayout)

JPanel panel = new JPanel();

panel.add(new JButton(“OK”));

42 / 67

Using JPanels

// set the Border Layout of the JFrame

setLayout(new BorderLayout(10, 10);

// add a Panel to the West and East

JPanel p1 = new JPanel();

add(p1, BorderLayout.WEST);

JPanel p2 = new JPanel(); p2.setLayout(new GridLayout(2, 2, 5, 5));

add(p2, BorderLayout.EAST);

// add components to the east panel

p2.add(new JTextField(8)); p2.add(new JButton(“Button1”));

p2.add(new JTextField(8)); p2.add(new JButton(“Button2”));

// one button to the west panel

p1.add(new JButton(“Button3”));

43 / 67

Adding Components

Need to add components for interaction.

44 / 67

Adding Components

Need to add components for interaction.

Some useful ones: JButton JTextField JCheckBox JComboBox JMenuBar etc...

45 / 67

Model-View-Controller design

Model: (ALREADY IMPLEMENTED) Manages the behavior and data of the application. Changes state.

View: DONE Renders the model into a form for interaction.

(Button, textbox, checkbox, etc.) Controller:

Receives user input and initiates a response by interacting with the model.

46 / 67

Interaction and Events

Need to handle events from various GUI components.

47 / 67

Interaction and Events

Need to handle events from various GUI components.

Button clicks, text field changes, menu selection, etc.

48 / 67

Interaction and Events

Need to handle events from various GUI components.

Button clicks, text field changes, menu selection, etc.

Event-driven programming

49 / 67

Interaction and Events

Components generate different kinds of Events

50 / 67

Interaction and Events

Components generate different kinds of Events

ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent

51 / 67

Interaction and Events

Components generate different kinds of Events

ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent

Example: JButton generates ActionEvent

52 / 67

Interaction and Events

Components generate different kinds of Events

ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent

Example: JButton generates ActionEvent Mouse pressed/moved/dragged: MouseEvent

53 / 67

Interaction and Events

Components generate different kinds of Events

ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent

Example: JButton generates ActionEvent Mouse pressed/moved/dragged: MouseEvent JCheckBox: ItemEvent, ActionEvent

54 / 67

Interaction and Events

Need to “listen” for Events.

Source object fires an event, and an object interested in the event handles it. Latter object called a “listener”

55 / 67

Interaction and Events

For an object to be a listener, it needs to implement an interface.

56 / 67

Interaction and Events

For an object to be a listener, it needs to implement an interface.

Interface should correspond to the Event. ActionListener for ActionEvent MouseListener for MouseEvent KeyListener for KeyEvent

57 / 67

Interaction and Events

For an object to be a listener, it needs to implement an interface.

Interface should correspond to the Event. ActionListener for ActionEvent MouseListener for MouseEvent KeyListener for KeyEvent

object.addXListener(...)

58 / 67

ActionListener interface

class AClass implements ActionListener {

public void actionPerformed(ActionEvent e) {

// do whatever you want

}

}

59 / 67

ActionListener interface

class AClass implements ActionListener {

public void actionPerformed(ActionEvent e) {

// do whatever you want

}

}

JButton button = new JButton(“OK”);

button.addActionListener(new AClass());

60 / 67

ActionListener interface

ActionEvent methods:

61 / 67

ActionListener interface

ActionEvent methods: Object getSource(): returns the object on which

the Event initially occurred. (in java.util.EventObject)

62 / 67

ActionListener interface

ActionEvent methods: Object getSource(): returns the object on which

the Event initially occurred. (in java.util.EventObject)

String getActionCommand(): returns the command string

(text of the button for ex.)

63 / 67

ItemListener interface

Used for check boxes, toggle buttons, etc.

class AClass implements ItemListener {

public void itemStatechanged(ItemEvent e) {

// do whatever you want

}

}

64 / 67

ItemListener interface

ItemEvent methods:

Object getItem(): Component-specific object.

int getStateChange(): The new state of the associated object.

65 / 67

Interaction and Events

Look at some other useful Events:

MouseEvent KeyEvent WindowEvent

66 / 67

Interaction and Events

Look at some other useful Events:

MouseEvent KeyEvent WindowEvent

Experiment!

67 / 67

Summary

Windows and Panels Layouts Add Components

Add Listeners Handle Events