159.

235 Graphics & Graphical Programming

Lecture 15 - Introduction to Graphical User Interfaces (GUIs)

159.235

Graphics

GUI Intro - Outline

Concepts Some Useful components Menus FileBrowser/Choosers Listeners Events and Mice Putting it all together in MyProg10
159.235 Graphics 2

GUI Concepts
Over the last 30 years or so, a number of widely used concepts and jargon have evolved for using (and programming) graphical interface programmes
159.235

Windows (in the general sense - not just Microsoft) Icons Mice Pointers (WIMP)

Graphics

 Mouse Clicks Drags DragnDrop They all refer to some sort of software interaction with the mouse (position and button status)

Other Jargon
Widgets: Buttons Browsers/Choosers Menus Menubars Resize Buttons Checkboxes Radio Buttons

A number of common software entities have evolved to help us implement these ideas:
159.235

Graphics

Event handlers
A general software In a simple sense the try concept is that of an catch block structure event handler or a allows you to specify a Listener block of code you want This is a piece of executed if/when a software that you the particular exception event programmer write and occurs register somewhere for the system to call when a The Listener construct in particular event occurs Java lets us write code that listens for mouse events
159.235 Graphics 5

Components or Widgets
Graphical Libraries Usually have a collection of Graphical Components or Widgets that support the common concepts These generally do their own Mouse interaction (ie they hide some low level code )
159.235

A good place to start is the Menu This provides a well known look and feel and lets us write code that does something we want in our program when the user selects a menu option.
6

Graphics

ActionListener
A Java interface (that our class can implement) Prescribes we supply a method called:
public void actionPerformed( ActionEvent ev ){ }

This will be called by the system when one of our widgets is activated We can demonstrate using some Menu item widgets We create a MenuBar object and add that to the Frame Then add the menuitems to the bar Each menuitem can then do something
159.235 Graphics 7

MyProg10 - Outline Architecture

import javax.swing.*; // Java eXtensions "Swing" graphics kit import java.awt.*; // Java Abstract Windowing Toolkit import java.awt.event.*; // AWT Event Mnagement package import java.io.*; // I/O package // Loads an image from JPEG file named in first argument and displays it: public class MyProg10 extends JFrame implements ActionListener{ variables including the menu parts public static void main( String args[] ){ // bootstraps our MyProg Object new MyProg10(); // this will instantiate and call the constructor } public MyProg10(){ } // constructor which sets up the menu stuff // The routine that we will register to be called by the system when an event occurs public void actionPerformed( ActionEvent ev ){ } public void resizeToInternalSize( int internalWidth, int internalHeight ){ } // an inner class to hold our graphical code public class DisplayArea extends JPanel{ public DisplayArea( Rectangle bounds ){ } // constructor public void paintComponent( Graphics g ){ } } }

159.235

Graphics

// the variables in MyProg10 private static final int DISPLAY_WIDTH = 512; private static final int DISPLAY_HEIGHT = 512; private int flag = 0; private Color myColour = Color.white; File myFile = null; DisplayArea da = null;

public MyProg10(){ // abbrieviated constructor da = new DisplayArea( new Rectangle( 0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT ) ); getContentPane().add( da ); menuBar = new JMenuBar(); this.setJMenuBar(menuBar ); JMenu fileMenu = new JMenu("File"); menuBar.add( fileMenu ); itemOne = new JMenuItem("One"); itemOne.addActionListener( this ); fileMenu.add(itemOne); itemTwo = new JMenuItem("Two"); itemTwo.addActionListener( this ); fileMenu.add(itemTwo); itemThree = new JMenuItem("Three"); itemThree.addActionListener( this ); fileMenu.add(itemThree); flagItem = new JMenuItem("Increment"); flagItem.addActionListener( this ); fileMenu.add(flagItem); resizeItem = new JMenuItem("Resize"); resizeItem.addActionListener( this ); fileMenu.add(resizeItem); saveItem = new JMenuItem("Save"); saveItem.addActionListener( this ); fileMenu.add(saveItem); exitItem = new JMenuItem("Exit"); exitItem.addActionListener( this ); fileMenu.add(exitItem); }

public JMenuBar menuBar; public JMenuItem itemOne; public JMenuItem itemTwo; public JMenuItem itemThree; public JMenuItem flagItem; public JMenuItem resizeItem; public JMenuItem saveItem; public JMenuItem exitItem;

159.235

Graphics

// The routine that we will register to be called by the system when an event occurs

public void actionPerformed( ActionEvent ev ){ if( ev.getSource() == itemOne ){ System.out.println("itemOne invoked..."); myColour = Color.white; } else if( ev.getSource() == itemTwo ){ System.out.println("itemTwo invoked..."); myColour = Color.yellow; repaint(); // repaints the MyProg/JFrame } else if( ev.getSource() == itemThree ){ System.out.println("itemThree invoked..."); myColour = Color.cyan; da.repaint(); // force the DisplayArea to repaint itself } else if( ev.getSource() == flagItem ){ System.out.println("incrementing flag"); flag = flag = 1; } else if( ev.getSource() == exitItem ){ System.exit(1); // emergency stop } else if( ev.getSource() == saveItem ){ JFileChooser chooser = new JFileChooser(); int returnVal = chooser.showOpenDialog(this); if(returnVal == JFileChooser.APPROVE_OPTION) { myFile = chooser.getSelectedFile(); System.out.println("Choosing file: " + myFile.getName()); } } else if( ev.getSource() == resizeItem ){ setSize( DISPLAY_WIDTH, DISPLAY_HEIGHT ); } }

// an inner class to hold our graphical code public class DisplayArea extends JPanel{ public DisplayArea( Rectangle bounds ){ // default constructor setLayout(null); setBounds( bounds); setOpaque(false); } public void paintComponent( Graphics g ){ g.setColor( myColour ); g.fillRect( 0, 0, getWidth(), getHeight() ); g.setColor( Color.black ); String text = new String( "Flag variable = " + flag ); g.drawString( text, 20, 20 ); } }

159.235

Graphics

10

MyProg10 Output

159.235

Graphics

11

Menu and Event Behaviour

You may find it useful to look more closely at the event processing code in MyProg10 The repainting is only done if the correct repaint() method is invoked.
159.235

Graphical User Interface code has been one of the drivers behind ObjectOrientation Think how complex this would all look and how many function arguments you would need to use for a procedural library like Swing!
Graphics 12

What Part Does what?

Sometimes we do want low level control of the mouse in our code
eg a drawing program might want to know exact coordinates etc

More usually we want to use high level components that can do their own mouse processing The Java Swing library is one such package - many other proprietary ones Most use the same concepts and jargon
Graphics 13

159.235

Summary - Intro to GUIs

Graphical Interface building looks complex, but it is just a matter of keeping track of all the widgets you want to use and some sort of hierarchical relationship between them all. We looked at :
JMenuBar JMenu JMenuItem JFileChooser

We now have the parts we need to build interactive Image processing programs
Graphics 14

159.235