CS108 Lecture 27: Graphical User Interface: Introduction Aaron Stevens 6 April 2009 1 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 1
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. 3 WIMPy User Interfaces Steve Jobs and team from Apple visited PARC, and soon thereafter… The Apple Lisa was released in 1983. 4 2
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. 5 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. 6 3
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. 7 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. 8 4
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 9 GUI Event Model The program runs a main loop, which waits for events and in turn calls the appropriate handler for each event. 10 5
Four GUI Programming Tasks Specify what the GUI looks like 1. Specify what the GUI will do 2. Associate the “look” with the “do” 3. Wait for user input (events) 4. 11 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 12 6
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 13 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. 14 7
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. 15 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. 16 8
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). 17 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. 18 9
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. 19 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? 20 10
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. 21 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. 22 11
Take-Away Points – Graphical User Interface (GUI) – Event-driven programming – Inheritance – Polymorphism 23 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 24 12
Recommend
More recommend
