CS108 Lecture 27: Graphical User Interface: Introduction Aaron - - PDF document

1

1

Aaron Stevens

6 April 2009

CS108 Lecture 27: Graphical User Interface: Introduction

2

Overview/Questions

– What is a Graphical User Interface? – What does it mean for a program to be event- driven? – What is the architecture/approach to develop a GUI application. – Some Technical Details: Inheritance and Polymorphism

2

3

WIMPy User Interfaces

Windows, Icons, Menus, and Pointing device Developed at Xerox PARC in 1970s:

– bitmapped graphics display – movable/resizable windows – buttons and pop-up menus – computer “desktop” – 3 button mouse.

4

WIMPy User Interfaces

Steve Jobs and team from Apple visited PARC, and soon thereafter… The Apple Lisa was released in 1983.

3

5

WIMPy User Interfaces

…and the Macintosh in 1984

A small company called Microsoft got the contract to develop productivity applications to be bundled with the Macintosh.

6

WIMPy User Interfaces

Microsoft began developing Windows in 1985… but its popularity didn’t really begin until 1990 with the introduction of Windows 3.1.

4

7

Graphical User Interface Basics

GUIs are composed of a collection of windows, also known as widgets.

– Some are top-level windows, like dialogs. – Others are contained in other windows, like buttons.

A window is a tree of graphical components.

8

Event-Driven Programs

GUI applications are event-driven:

– They spend most of their time waiting for something to happen – such as a keystroke or mouse movement. – When the event happens, information about that event is collected, and send to a handler.

Event handler

– A section of code (e.g. a function or method) which is triggered by an event.

5

9

GUI Events

Many events are user-driven:

– Left-click a button – Select a menu item – Window is resized by user

Other events are caused by the system:

– Window is initialized – Window is hidden/exposed by other windows – Window is closed by the user

10

GUI Event Model

The program runs a main loop, which waits for events and in turn calls the appropriate handler for each event.

6

11

Four GUI Programming Tasks

1.

Specify what the GUI looks like

2.

Specify what the GUI will do

3.

Associate the “look” with the “do”

4.

Wait for user input (events)

12

Specify What the GUI Looks Like

This is done by describing:

– the "widgets" that we want it to display – their spatial relationships (e.g. coordinates) Traditionally this has been an arduous process. We will be using a WYSIWYG tool called PythonCard

7

13

Specify What the GUI Does

The functions/methods that actually do the work of the GUI are called “event handlers.” In the event handlers, we will write code to:

– interact with GUI widgets (input, output) – call on non-GUI functions that provide other functionality

14

Associating “Look” with “Do”

We will use inheritance and polymorphism:

– Our GUI classes will inherit from base classes which provide the attributes necessary for drawing. – We will write polymorphic event-handler methods which get invoked in response to events.

8

15

Waiting for Events

PythonCard will provide an event loop:

– A sentinel-controlled loop which will wait for events to come it from the operating system

The event loop will:

– Determine which widget is the target of the event. – Send the event to that object by calling its event-handler method.

16

Inheritance

“Like father, like son.” “A chip off the old block.” “The apple doesn’t fall far from the tree.”

– Common traits passed on from one generation to another.

9

17

Inheritance

Object Oriented Programming: A way to form new classes using classes which have already been defined. How? A new class definition specifies a base class (parent), from which it inherits some existing functionality (data and methods). The new class is called a sub class (child).

18

Inheritance Example

Consider a definition for a simple class Animal. It has only walk and speak methods, but it will serve as a base-class for some inherited classes.

10

19

Inheritance Example

Now consider these class definition for Cow and Sheep, which inherit from class Animal:

They have all of Animal’s methods and data, plus any new methods/data which are defined here.

20

Inheritance Example

Here is some client code which creates a Cow and a Sheep object. Notice the methods used here. Where was the method walk() defined? What are the implications of this?

11

21

Polymorphism

From the Greek:

– poly meaning many – morphos meaning shapes

Polymorphism enables subtly different subclasses to be controlled/manipulated by a shared control/client code.

22

Polymorphism Example

Consider again the class definition for Animal: and this method, defined on class Cow: When the method is invoked, the sub-class version will be executed. We say that __str__ is a polymorphic method.

12

23

Take-Away Points

– Graphical User Interface (GUI) – Event-driven programming – Inheritance – Polymorphism

24

Student To Dos

– Readings for this week:

An overview of PythonCard:

http://www.halfcooked.com/presentations/osdc/pythoncard.html

And browse the PythonCard Dialogs:

http://pythoncard.sourceforge.net/dialogs/index.html

– Install wxPython and PythonCard

** only needed if you want to do hws on your own computer

– HW11 is due TUESDAY 4/7 – Aaron’s Office Hours changed this week only:

• Monday: 4:15-5pm (regular time)
• Wednesday: 8:30-9:30 am (changed from 2-3)
• Friday: Cancelled

– NO LECTURE on FRIDAY 4/10