Graphical User Interfaces 6 May 2020 OSU CSE 1 Programs With GUIs - - PowerPoint PPT Presentation

▶
graphical user interfaces
SMART_READER_LITE
LIVE PREVIEW

Graphical User Interfaces 6 May 2020 OSU CSE 1 Programs With GUIs - - PowerPoint PPT Presentation

Sep 15, 2022 152 likes •631 views

Graphical User Interfaces 6 May 2020 OSU CSE 1 Programs With GUIs A Java program with a GUI , or graphical user interface , is pretty routine in most respects It declares and manipulates the values of some variables of various types,

slide-1
SLIDE 1

Graphical User Interfaces

6 May 2020 OSU CSE 1

slide-2
SLIDE 2

Programs With GUIs

  • A Java program with a GUI, or graphical

user interface, is pretty routine in most respects

– It declares and manipulates the values of some variables of various types, albeit new

  • nes intended for use in developing GUIs

(e.g., buttons, scrollbars, drawing panels, etc.)

  • There is just one (big) issue...

6 May 2020 OSU CSE 2

slide-3
SLIDE 3

The User Interaction Problem

  • Not just your program, but an end-user, can

spontaneously change the “state” of any active user interface widget (e.g., click a button, check a box, move a slider, scroll a document, press a key, etc.)

  • Problem: How does your program know when

the user has attempted to provide input to the program via a widget, and determine which widget has been manipulated?

6 May 2020 OSU CSE 3

slide-4
SLIDE 4

The User Interaction Problem

  • Not just your program, but an end-user, can

spontaneously change the “state” of any active user interface widget (e.g., click a button, check a box, move a slider, scroll a document, press a key, etc.)

  • Problem: How does your program know when

the user has attempted to provide input to the program via a widget, and determine which widget has been manipulated?

User interaction includes the keyboard—and any other input devices, e.g., a Kinect controller; so, it goes well beyond reading characters using a SimpleReader.

6 May 2020 OSU CSE 4

slide-5
SLIDE 5

Terminology

  • The act of a user manipulating a widget is

called an event for that widget

  • The widget the user has manipulated is

called the subject of the interaction

  • The objects in your program that need to

do something in response to the events for a particular subject are called observers (or listeners) for that subject

6 May 2020 OSU CSE 5

slide-6
SLIDE 6

Solution #1: Use Polling

  • The main program (the only observer)

continually polls each possible subject to ask whether any events have occurred

  • This is considered cumbersome...

subject

  • bserver

6 May 2020 OSU CSE 6

slide-7
SLIDE 7

Polling Pseudo-code

while (true) { if (s0 has experienced an event) { if (event is e0) { respond to it } else if (event is e1) { respond to it } else ... } else if (s1 has experienced an event) { ... } }

7 6 May 2020 OSU CSE

slide-8
SLIDE 8

Solution #2: Use Callbacks

  • Each observer (there may be many)

registers its interest in a subject’s events, and then waits until the subject calls it back to tell it that there has been an event

subject

  • bserver

event

6 May 2020 OSU CSE 8

slide-9
SLIDE 9

Solution #2: Use Callbacks

  • Each observer (there may be many)

registers its interest in a subject’s events, and then waits until the subject calls it back to tell it that there has been an event

subject

  • bserver

event

6 May 2020 OSU CSE 9

But how? What does this mean?

slide-10
SLIDE 10

The Observer Pattern

  • Each subject expects each observer

(listener) to register itself with that subject if it is interested in the subject’s events

  • Each subject keeps track of its own set of

interested observers

  • Whenever an event occurs, the subject

invokes a specific callback method for each registered observer, passing an event argument that describes the event

6 May 2020 OSU CSE 10

slide-11
SLIDE 11

The Observer Pattern

  • Each subject expects each observer

(listener) to register itself with that subject if it is interested in the subject’s events

  • Each subject keeps track of its own set of

interested observers

  • Whenever an event occurs, the subject

invokes a specific callback method for each registered observer, passing an event argument that describes the event

6 May 2020 OSU CSE 11

Registering interest is done by calling a method of the subject; usually this is done

  • nce as part of set-up.
slide-12
SLIDE 12

The Observer Pattern

  • Each subject expects each observer

(listener) to register itself with that subject if it is interested in the subject’s events

  • Each subject keeps track of its own set of

interested observers

  • Whenever an event occurs, the subject

invokes a specific callback method for each registered observer, passing an event argument that describes the event

6 May 2020 OSU CSE 12

The set of observers for a given subject can be kept in a Set variable, for example.

slide-13
SLIDE 13

The Observer Pattern

  • Each subject expects each observer

(listener) to register itself with that subject if it is interested in the subject’s events

  • Each subject keeps track of its own set of

interested observers

  • Whenever an event occurs, the subject

invokes a specific callback method for each registered observer, passing an event argument that describes the event

6 May 2020 OSU CSE 13

This method is described in an interface that any potential observer must implement.

slide-14
SLIDE 14

The Observer Pattern

  • Each subject expects each observer

(listener) to register itself with that subject if it is interested in the subject’s events

  • Each subject keeps track of its own set of

interested observers

  • Whenever an event occurs, the subject

invokes a specific callback method for each registered observer, passing an event argument that describes the event

6 May 2020 OSU CSE 14

This is one of many object-oriented design patterns that address common OOP issues (often language deficiencies); most are considered best practices.

slide-15
SLIDE 15

Example: Simple GUI Demo

ActionListener implements JFrame extends DemoGUI

6 May 2020 OSU CSE 15

slide-16
SLIDE 16

Example: Simple GUI Demo

Components from Java’s Swing Framework implements JFrame extends DemoGUI

6 May 2020 OSU CSE 16

ActionListener

slide-17
SLIDE 17

Components from Java’s Swing Framework

Example: Simple GUI Demo

implements JFrame extends DemoGUI

6 May 2020 OSU CSE 17

This class is the type of the main window of a GUI application. ActionListener

slide-18
SLIDE 18

Components from Java’s Swing Framework

Example: Simple GUI Demo

implements JFrame extends DemoGUI

6 May 2020 OSU CSE 18

This interface declares the callback method: actionPerformed. ActionListener

slide-19
SLIDE 19

Components from Java’s Swing Framework

Example: Simple GUI Demo

implements JFrame extends DemoGUI

6 May 2020 OSU CSE 19

ActionListener This class (our code) contains the body of the actionPerformed method, based on the program’s intent, and other code to set up the GUI.

slide-20
SLIDE 20

Important Interfaces/Methods

interface ActionListener { void actionPerformed(ActionEvent e); } interface ActionEvent { Object getSource(); ... }

6 May 2020 OSU CSE 20

slide-21
SLIDE 21

Important Interfaces/Methods

interface ActionListener { void actionPerformed(ActionEvent e); } interface ActionEvent { Object getSource(); ... }

6 May 2020 OSU CSE 21

The class Object is special in Java: every class extends Object! We will return to this later...

slide-22
SLIDE 22

Fundamentals: DemoGUI

JButton JTextArea in JScrollPane JFrame JPanel

6 May 2020 OSU CSE 22

slide-23
SLIDE 23

Fundamentals: DemoGUI

JButton JTextArea in JScrollPane JFrame JPanel

This is the underlying type of the main window of a GUI application using Swing.

6 May 2020 OSU CSE 23

slide-24
SLIDE 24

Fundamentals: DemoGUI

JButton JTextArea in JScrollPane JFrame JPanel

Nested inside a JFrame’s content pane, you can put any number of things …

6 May 2020 OSU CSE 24

slide-25
SLIDE 25

Fundamentals: DemoGUI

JButton JTextArea in JScrollPane JFrame JPanel

… such as a JPanel …

6 May 2020 OSU CSE 25

slide-26
SLIDE 26

Fundamentals: DemoGUI

JButton JTextArea in JScrollPane JFrame JPanel

… and nested inside a JPanel, you can put any number of, e.g., JButtons.

6 May 2020 OSU CSE 26

slide-27
SLIDE 27

Fundamentals: DemoGUI

JButton JTextArea in JScrollPane JFrame JPanel

You can also put in a JFrame a JScrollPane with, e.g., a JTextArea.

6 May 2020 OSU CSE 27

slide-28
SLIDE 28

It’s Demo Time

  • The DemoGUI1 project contains a very

simple GUI application using Swing

  • You can get it at:

http://cse.osu.edu/software/common/DemoGUI1.zip

6 May 2020 OSU CSE 28

slide-29
SLIDE 29

Instance Variables

  • Variables can be declared:

– in method bodies: local variables – in method headers: formal parameters – in classes: fields or instance variables

  • Examples of instance variables:

– resetButton, copyButton, inputText, outputText, input, output

  • Instance variables are essentially global

variables that are shared by and can be accessed from all instance methods in the class

6 May 2020 OSU CSE 29

slide-30
SLIDE 30

Set Up by DemoGUI Constructor

6 May 2020 OSU CSE 30

slide-31
SLIDE 31

Set Up by DemoGUI Constructor

6 May 2020 OSU CSE 31

Before registration

  • f this as an
  • bserver of the

buttons.

slide-32
SLIDE 32

Set Up by DemoGUI Constructor

6 May 2020 OSU CSE 32

After registration

  • f this as an
  • bserver of the

buttons.

slide-33
SLIDE 33

Now, Who’s In Charge?

  • Note: when DemoGUI is executed:

– DemoGUI.main starts execution

  • Constructor for DemoGUI is called by main
  • Constructor for DemoGUI returns to main

– DemoGUI.main finishes execution

  • After that, what code is executing?

6 May 2020 OSU CSE 33

slide-34
SLIDE 34

Threads

  • A standard Java program executes in a

thread, i.e., a single path of sequential code executing one step at a time

  • A GUI program with Swing uses at least

two threads rather than one:

– The initial thread executes main (until it completes) – An event dispatch thread executes everything else, including actionPerformed

6 May 2020 OSU CSE 34

slide-35
SLIDE 35

Timeline of Thread Execution

6 May 2020 OSU CSE 35

main time

slide-36
SLIDE 36

Timeline of Thread Execution

6 May 2020 OSU CSE 36

main This is the initial thread; main executes... time

slide-37
SLIDE 37

Timeline of Thread Execution

6 May 2020 OSU CSE 37

DemoGUI ... until it calls the DemoGUI constructor, which executes... time

slide-38
SLIDE 38

Timeline of Thread Execution

6 May 2020 OSU CSE 38

DemoGUI Swing code ... until it calls the JFrame constructor (super), which starts Swing code executing in the event dispatch thread... time

slide-39
SLIDE 39

Timeline of Thread Execution

6 May 2020 OSU CSE 39

DemoGUI ... and the DemoGUI constructor continues until it returns to main... time Swing code

slide-40
SLIDE 40

Timeline of Thread Execution

6 May 2020 OSU CSE 40

main ... and main continues until it completes; end of initial thread. time Swing code

slide-41
SLIDE 41

Timeline of Thread Execution

6 May 2020 OSU CSE 41

The event dispatch thread is now the only executing thread. time Swing code

slide-42
SLIDE 42

Timeline of Thread Execution

6 May 2020 OSU CSE 42

An event results in a call to actionPerformed... actionPerf time

slide-43
SLIDE 43

Timeline of Thread Execution

6 May 2020 OSU CSE 43

... and when it returns, the Swing code resumes; and so on. time Swing code

slide-44
SLIDE 44

Layout Managers

  • A layout manager allows you to arrange

widgets without providing specific location coordinates

– GridLayout (simplest?; used in DemoGUI) – FlowLayout (default for JPanel) – BorderLayout (default for JFrame) – ...

6 May 2020 OSU CSE 44

slide-45
SLIDE 45

Java GUI Packages

  • Some important packages in the Java

libraries for GUI components:

– java.awt – java.awt.event – javax.swing – ...

6 May 2020 OSU CSE 45

slide-46
SLIDE 46

Java Swing Widgets

  • Some important classes in javax.swing:

– JFrame – JPanel – JButton – JScrollPane – JTextArea – JCheckBox – JComboBox – ...

6 May 2020 OSU CSE 46

slide-47
SLIDE 47

Resources

  • Java Tutorials (and beyond...)

– http://docs.oracle.com/javase/tutorial/uiswing/index.html

  • A Visual Guide to Layout Managers

– http://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html

6 May 2020 OSU CSE 47