The Graphical User Interface GUI and Event Based Programming

1
Lecture 6

• The Graphical User Interface (GUI) and Event
  Based Programming

2
Review
Implement interface class C implements D //
Fulfils promises

• Extend superclass
• class A extends B
• //Gets all public bits

Import other packages classes to use
them. import e.f.g.ClassH class J ClassH name
new ClassH()
3
This week

• You will learn how to build windows programs.
• The GUI (Graphical User Interface).
• The java.awt and javax.swing packages.
• Useful methods and classes.
• Casting and Inheritance revisited.
• Event based programming.
• The Art of Programming Part Six The GUI and the
  user experience.
• Next week.

4
Example WIMP GUI
5
The Graphical User Interface (GUI)

• Nested objects subclassing java.awt.Component
• e.g. a Window object containing a JTree
  containing Label objects.
• All have a Look and Feel
• Two packages
• java.awt
• (Abstract Windows Toolkit standard Look and
  Feel).
• javax.swing
• (Part of the Java Foundation Classes (JFC)
  separates Look and Feel from components so you
  can let the JVM pick).

6
Major starting containers

• Fill these with other Component subclasses.
• Component
• JDesktopPane
• Container
• Canvas
• MenuContainer Window Panel
• Frame Applet

7
Major starting containers

• Component
• Monitors keys/mouse and resizing.
• Container
• Uses LayoutManager objects to position
  contents.
• Panel and Canvas
• A window with no border etc. Panel subclassed by
  Applet.
• Window
• Superclass for windows style objects rarely
  used on own.
• Frame
• Window with border, close buttons and,
  potentially, menus.
• JDesktopPane
• Used for making desktops.

8
Frame example

• import java.awt.
• public class PopUp
• public PopUp()
• Frame win new Frame("My Window")
• win.setSize(300,300)
• win.setVisible(true)
• public static void main (String args)
• new PopUp()
• Youll need Ctl-C to close it, or to shut the
  command window.

9
The life of a Frame

• In your constructor create a Frame with a title.
• Frame frame new Frame (My Window)
• Set the size of the Frame.
• frame.setSize(int width, int height)
• frame.setSize(200,200)
• Show the Frame.
• frame.setVisible(true) Opposite is(false)

10
Adding other components

• In the constructor make the other Components and
  add them to the Frame.
• Label newLabel new Label(My Label)
• frame.add (newLabel)

11
The Alternative

• To extend Frame and add functionality.
• import java.awt.
• class PopUp2 extends Frame
• PopUp2 ()
• super("My Window")
• setSize(300,300)
• Label newLabel new Label(My Label)
• add (newLabel)
• setVisible(true)
• public static void main (String args)
• new PopUp2()

12
Some useful components
JButton Checkbox / JCheckBox JRadioButton Button

List / JList
JTable
Note you can group CheckBoxes with a
CheckboxGroup and Buttons / RadioButtons with a
ButtonGroup so that only one of a group can be
on at once.
JProgressBar
JToolBar
JFileChooser
JTree
Menu / JMenu
13
Layout managers

• Objects that control where components added to a
  container are displayed.
• LayoutManager layout new LayoutManager()
• guiObject.setLayout(layout)
• Default for most is FlowLayout - as each
  component added they fill across the available
  space then wrap to the next line. BorderLayout
  allows you to add things to the
  top/bottom/left/right of components.
• Most of the rest are, frankly, pants.
• The only one the pros use is GridBagLayout - this
  gives absolute positioning control, but allows
  for windows to resize.
• Well use FlowLayout and BorderLayout, but if you
  use GridBag youll be ruler of the geeks. Lucky
  old you.

14
This week

• The GUI (Graphical User Interface).
• The java.awt and javax.swing packages.
• Useful methods and classes.
• Casting and Inheritance revisited.
• Event based programming.
• The Art of Programming Part Six The GUI and the
  user experience.
• Next week.

15
Drawing directly on major components

• All graphics are relative to the upper left
  corner (0, 0).
• All containers have a graphics context which is
  encapsulated in a Graphics class object.
• We can get the Graphics object and use its
  methods to draw
• Frame f new Frame()
• Graphics gc f.getGraphics()
• gc.drawline(0,0, 300,200)
• or, if were in the frame class...
• Graphics gc getGraphics()
• gc.drawline(0,0, 300,200)
• If drawings stray outside the Components size,
  theyre clipped automatically (i.e. theyre
  stopped at the edges).

16
Some useful Graphics drawing methods

• drawLine(int startx, int starty, int endX, int
  endY)
• drawOval(int topLeftX, int topLeftY, width,
  height)
• drawRect(int topLeftX,topLeftY,lowRightX,lowRightY
  )
• drawPolygon(int xs, int ys, int
  numberOfPoints)
• drawPolygon closes polygons automatically.
• drawString(String str, int x, int y)
• To set the font you need a java.awt.Font class
  object.
• To get the line height etc. so you know where to
  start the next line you need a java.awt.FontMetric
  s class object.

17
Colour

• Note the Graphics object has a set colour
  encapsulated in a java.awt.Color object all
  lines are drawn in this
• Color newColor new Color(red,green,blue)
• gc.setColor(newColor)
• where r/g/b are ints from 0 to 255.
• Background set in Components not their Graphics
  objects
• setBackground(Color colorObject)
• Graphics setXORMode(Color) - swaps present colour
  for Color if the background drawn over is the
  present colour.

18
Repaint

• The JVM calls components repaint() method when it
  feels like it (when maximized, uncovered).
• Repaint calls two methods
• update() paints the background.
• paint(Graphics g) paints the foreground.
• If we dont overwrite paint, each repaint the
  component will loose any graphics weve added as
  it repaints the default look.

19
Example Panel with constant text

• import java.awt.
• public class TitlePanel extends Panel
• public paint (Graphics g)
• g.drawString(This is the title, 10, 10)
• Note that even if we overwrite paint, the
  superclass paint is invisibly called to draw the
  basic component features.

20
Summary

• GUIs are made up of objects that subclass
  Component.
• Some subclass Container, which in turn subclasses
  Component. These are usually the basis of a GUI.
• You can make a Container, or extend it to add
  functionality.
• You can then make and add Components.
• By default, none respond to user actions.

21
This week

• The GUI (Graphical User Interface).
• The java.awt and javax.swing packages.
• Useful methods and classes.
• Casting and Inheritance revisited.
• Event based programming.
• The Art of Programming Part Six The GUI and the
  user experience.
• Next week.

22
Inheritance

• We can extend a Class to give us all its
  functionality.
• class A extends B
• We can implement an Interface, which means we
  promise to supply its methods.
• class A implements C
• We can only extend one Class, but we can
  implement many Interfaces using commas.
• class A extends B implements C, D, E

23
Casting

• You can invisibly cast one primitive variable
  type into another if you dont remove any useful
  information.
• double a 2
• Otherwise you have to be explicit.
• int a (int) 2.3
• This works just the same with Objects, but here
  were talking about adding information.
• superClassVariable subClassObject
• subClassVariable SubClass (superClassObject)
• Once the cast is done, you can only use methods
  appropriate to the new Class.

24
When would this be used?

• If a method calls for a superclass, we know it
  will only call superclass methods, so we can pass
  in our subclass and know it matches the criteria.
• Land myPlot new Land()
• Sea someBuoy new Sea()
• getDistanceBetween(myPlot, someBuoy)
• Also, lots of classes store objects as the
  ultimate superclass of most objects
  java.lang.Object.
• myObject (MyClass) a.getStoredObject()

25
This week

• The GUI (Graphical User Interface)
• The java.awt and javax.swing packages
• Useful methods and classes.
• Casting and Inheritance revisited
• Event based programming.
• The Art of Programming Part Six The GUI and the
  user experience.
• Next week.

26
Event based programming

• Programs dont usually run in a set sequence,
  they wait for something to happen.
• When theyre used or clicked, GUI Components send
  out objects that subclass java.awt.AWTEvent.
• Other classes can register as listeners with
  the Components that send out the event objects.
• Listeners get sent the AWTEvent objects. They can
  then do appropriate actions.

27
Event based programming

• Listeners must implement particular
  sub-interfaces of the EventListener interface.
  The defaults are in java.awt.event.
• By implementing these interfaces the listener
  classes are forced to provide methods that cope
  with the AWTEvent Objects they are sent.

28
Example

• Checkbox in a Frame

29
What sending events is really doing...

• When a class registers with an event producer,
  the producer adds the class to an array of
  EventListeners inside itself.
• When an event is sent the Component producing
  the event calls the appropriate method inside all
  the objects in the array.
• Remember that because the classes in the array
  implement EventListeners, we can guarantee that
  they always have the right methods.
• Our implementing classes are automatically
  treated as the superclass Interface, because we
  never use any other methods.

30
Destroying the Frame

• Frames produce a WindowEvent when theyre opened,
  closed, minimized etc.
• You can register with a Frame if you implement
  WindowListener, and its seven methods.

31
Destroying the Frame

• First we make a new class implementing
  WindowListener that has a constructor that takes
  in a frame.
• class WindList implements WindowListener
• WindList (Frame fm)
• In our main class we then make a new object of
  that WindowListener
• WindList windList new WindList(ourFrame)
• In main class we register our new object with the
  Frame.
• ourFrame.addWindowListener(windList)
• In the new WindowListener we now call the Frames
  setVisible(false) method when it signals closure.

32
Relationships

MainClass
ourFrame Frame
windList WindList
WindowListener
Defines window methods
WindList
fm Frame
windowClosing (WindowEvent)
33
Why go through so many hoops?

• Encapsulation
• Again, we remove functions into separate objects.
  In this case the GUI action controls from its
  shape.
• Its quite possible that the GUI is on one
  machine and the controller objects on another.
• We are trying to encourage two forms of software
  architecture
• Model-View-Controller.
• n-tier.

34
Model-View-Controller (MVC) architecture

• Separate Look and Feel from actions and data.
• In Swing each component has an associated Model
  class which contains the data.
• You can provide your own model for a component by
  subclassing the Model class or by implementing
  the appropriate interface.
• For example, you could subclass DefaultListModel
  or implement the ListModel interface, and then
  use the JList setModel method to attach your
  data-model to the component.

35
N-tier architecture

• Usually run over networks.
• Three-tier architecture
• A thin GUI client on the users
• machine (fat clients do more analysis).
• A processing application (usually on a
• machine dedicated to complex processing).
• A data server (usually a database).
• Client talks to Processor which talks to Data
  server.
• Divides resources to most appropriate machines.
• N-tier more middle level apps talking to each
  other.

36
Summary

• The GUI is a set of nested subclasses of
  Component.
• GUI based programs dont run in a set sequence,
  they wait for events.
• Most components when used send out events. We
  make listener objects which we register with
  each component.
• When something happens, the listener is informed
  through an interface defined method and acts.
• This allows us to separate the look from the
  processing and data.

37
This week

• The GUI (Graphical User Interface)
• The java.awt and javax.swing packages
• Useful methods and classes.
• Casting and Inheritance revisited
• Event based programming.
• The Art of Programming Part Six The GUI and the
  user experience.
• Next week.

38
The Art of Programming the user experience

• Many people design for geeks.
• We need to design for the general public, but
  make advanced functions available for those that
  want them.
• Research now is into adaptable user interfaces
• e.g. Windows XP hides menu items you dont use.
• We should also try to help the user by...
• using familiar keys and menus (e.g. Ctrl C for
  copy)
• including help systems and tutorials (MS keen on
  help systems that learn what you have trouble
  with).

39
Designing for users

• At every stage when designing the GUI, think is
  it obvious what this does?
• Make all screens as simple as possible.
• Users learn by trying stuff - they rarely read
  manuals, so think carefully about what the
  default behavior of any function should be.
• Hide complex functionality and the options to
  change defaults in Options menus.
• Most of all consult and test.

40
Users and the design process initial
consultation

• User consultation is a vital part of development.
  
• Users should be consulted first. If the users
  dont like your software, youre sunk.
• Find out what people expect to get from the
  system before adding extras. If it helps draw UML
  User Case diagrams.
• User Cases can be used to break a large project
  up into smaller bits. Do the difficult bits first!

41
Users and the design process usability testing

• When you think you have a bit users are
  interested in up and running, test its
  usability.
• Sit your users down with the software and get
  them to play with it.
• Its useful to set them common tasks to do.
• See how long they take to do stuff, and what they
  do thats unexpected. Some companies use mirrored
  windows.
• Remember, users dont make mistakes - its your
  fault if you lead them the wrong way!

42
Users and the design process release

• If youve been testing enough you shouldnt have
  any usability problems. Most problems will be
  bugs from users doing unusual things.
• Can release alpha and beta versions to a broader
  number of testers or the public to test for bugs
  and at the same time ask for user comments.
• At this point youll need to delimit time for...
• User improvements (should be minimal)
• Refactoring (simplifying the code)
• Fixing bugs.
• If you try and do two at once its bound to get
  confusing.

43
Summary

• The GUI is a set of nested subclasses of
  Component.
• GUI based programs dont run in a set sequence,
  they wait for events.
• Most components when used send out events. We
  make listener objects which we register with
  each component.
• When something happens, the listener is informed
  through an interface defined method and acts.
• This allows us to separate the look from the
  processing and data.

44
Summary

• This allows us to distribute processing to
• objects that deal with it efficiently (MVC
  architecture).
• computers that deal with it effectively (n-tier
  architecture)
• Always design assuming the user
• Will experiment rather than read the manual.
• Will base these experiments on what they expect
  to find.
• Always base the software design around what the
  user wants.
• Always test the users opinions and the usability
  as you develop.

45
Next week

• Applets - making your program work over the web.
• Images drawing maps
• Assessment
• Practical
• Building some simple windows applications.