Lecture 9: Graphical User Interfaces and Events

What You Will Learn Today

1. Use event handlers such as listeners and adapters to process mouse and keyboard input.
2. Compare AWT and Swing user interfaces.
3. Use GUI components such as buttons, text components, lists and menus.
4. Use containers and layout managers to group and organize components.
5. Describe advantages of visual programming.

Events

• An event is a user action that can be processed.
  • key press, mouse move, button press, menu selection, scrolling
• Components that generate events are event sources.
  • button, menu item, scrollbar
• An event class contains detailed information about a kind of event.

Handling Events

• The simplest way to handle keyboard and mouse events (from Java 1.0) is to implement certain applet methods.
  • Implement the keyDown() method to get a key.
    • public boolean keyDown(Event e, int key) { ... char c = (char) key; ... }
  • Implement the mouseUp(), mouseDown() and mouseDrag() methods to get the position of mouse clicks and movements.
  • Each of these should call repaint() at the end to update the graphics screen.

Listeners

• Events that are handled require event listeners (Java 1.1 and later).
  • Create listener objects for each kind of event.
• An event listener interface declares methods for each type of event to listen for.
  • ComponentListener, ContainerListener, FocusListener, KeyListener, MouseListener, MouseMotionListener, WindowListener
• An event listener class implements an event listener interface. It must define all its methods.

MouseListener Interface

• A class that implements MouseListener must define all its methods:
  • mousePressed(), mouseReleased(), mouseClicked() are called when the mouse clicks an item.
  • mouseEntered(), mouseExited() are called when the mouse moves over an item.
  • Each method takes a MouseEvent object as its argument.
• To install the listener, create an applet, create a new listener object, and add the listener object to the applet.
  • An event listener is often installed as an inner class.
• To implement MouseMotionListener, define mouseDragged().
• Use the repaint() method to request the window to repaint itself, since repainting is not automatic.
  • The paint() method should store everything that needs to be redrawn.

KeyListener Interface

• keyPressed() is called when an action key is pressed:
  • Home, End, Page Up, Page Down, arrow keys, function keys, CapsLock, NumLock, ScrollLock, PrintScreen, Pause
• keyTyped() is called when another key is pressed.
• keyReleased() is called when any key is released.
• Each method takes as its argument a KeyEvent object which has these methods:
  • getKeyText(), getKeyChar(), getKeyCode()

Template for Applets with Listeners

class MyClass extends Applet { // an applet (could be an application)
   public MyClass() { // constructor
      class MyListener implements ListenerInterface // an inner class
         { public void eventOccurred(EventClass event) { /* add event action here */ } }
      MyListener listener = new MyListener();
      eventSource.addAListener(listener);
   }
   public void paint(Graphics g) { /* paint something here */ }
}

Adapters

• An adapter is a class defined in java.awt.event which provides default methods of the listener interface.
• You only need to override the method you want.
  • Instead of implementing MouseListener you can extend MouseAdapter.

AWT and Swing

• AWT uses the native user interface elements of the operating system. Swing paints the user interface elements.
  • Swing is slower than AWT but has a more consistent appearance across platforms.
  • We do not use Swing only because it is not installed on our computers.
• Swing classes are defined in the javax.swing package.
  • Swing is part of the Java 2 SDK but was just an extension to earlier versions of Java.
  • Most Swing components begin with the letter J, e.g. JButton, JPanel, JApplet.
• Applets that extend Applet can only contain AWT components.
  • To use Swing components in an applet, extend JApplet instead of Applet.
• Swing provides many additional components and features like tool tips, borders and mnemonics.

Tips

• Do not forget to attach a listener (or the buttons and elements will do nothing).
• Share listener classes, not listener objects.
• Don't use a container as a listener.
  • Attach listeners to individual controls for better management and object-orientation.
• Create helper methods to add several similar items (e.g. a group of buttons).
• When designing a graphical user interface, keep usability and accessibility in mind.
• Events and components can be complicated! Start with example code and modify for your purposes.

Steps to Handle Events

1. Implement the data that your program manipulates.
2. Implement the visual representation of the data.
3. Design a user interface for manipulating the data.
4. Supply the user interface components.
5. Supply event handler classes.
6. Make listener objects and attach them to the event sources.

Graphical Components

• A component is an object that can be displayed graphically and interact with the user.
• Components are similar to HTML form elements and dialog box controls.
• AWT defines only 17 components; Swing defines many more which inherit from JComponent.

Creating Graphical Components

• Button okButton = new button("OK"); // create an OK button
• Checkbox bold = new Checkbox("Bold"); // create a checkbox with label Bold, unchecked
• Checkbox italics = new Checkbox("Italics", cg, true); // a checkbox with label Italics, CheckboxGroup cg, checked
• List colorList = new List(3, true); // create a multiple-select list with three items visible
• colorList.add("Red"); colorList.add("Green"); colorList.add("Blue"); // add items to the list
• Label myLabel = new Label("Hello");
• TextField username = new TextField("", 14); //  create an empty text field with width 14 characters
• TextArea message = new TextArea("Type your message here.", 60, 10);
  // create a text area with width 60 characters, height 10 rows, and default text.

Handling Events from Graphical Components

• For a Button or TextField, create a handler class which implements ActionListener.
  • Its constructor should point to the applet.
  • Its actionPerformed() method defines the action to perform when the button is clicked.
• For a Checkbox, getState() returns whether the box is currently checked (true or false).
• For a TextField,
  • void setEditable(true) // allows the user to type and change the text; default is not editable
  • String getText() // returns the text in the field
  • void setText(String s) // puts the string s in the text field
• For a List or Choice,
  • void add(String s) // add an item to the list
  • void addItemListener(Applet a) // add an item event handler to the applet
  • String getSelectedItem() // return the text of the selected item
  • int getSelectedIndex() // return the index of the selected item
  • String getItem(int i) // return item with index i

Containers

• A container is a component that can hold and organize the layout of other components.
  • A panel is a simple container. It contains other components, including other panels.
    • A Java applet is a panel within the browser window.
  • A window is a free-standing container with no border or frame.
    • A frame is a window with title and border that can be repositioned anywhere on the screen.
      • Frames can be used to create a Java application with a graphical interface.
      • Frame methods include resize(w,h), pack(), show() and hide().
    • A dialog is a window used for user input, e.g. a FileDialog which is used to get a file name.

Layout Managers

A layout manager is an object which arranges components in a container.

Using Layout Managers

Components are usually set up in the init() method of the applet.

• Create a new layout manager using a constructor method, e.g. one of these:
  • FlowLayout fl = new FlowLayout (FlowLayout.CENTER); // centered flow layout
  • BorderLayout bl = new BorderLayout (10, 20); // horizontal spacing 10 pixels, vertical spacing 20 pixels
  • GridLayout gl = new GridLayout (3, 4); // 3 rows and 4 columns
• Tell the applet or container to use the specified layout manager
  • setLayout(f);
• Create objects for each control; add items to the controls if appropriate.
• Add all the control objects to the layout manager.
  • add(okButton); add(cancelButton);

Steps for Designing Layout Management

1. Make a sketch of your desired component layout.
2. Find groupings of adjacent components within the same layout.
3. Identify layouts for each group.
4. Group the groups together.
5. Write the code to generate the layout.

Visual Programming

• Visual programming tools save a lot of development time when creating graphical interfaces.
  • You can drag and drop and resize components using the mouse.
  • You can click a component to see and change its properties and methods.
• Visual IDEs for Java include Eclipse, JBuilder, Forte, and J++.
  • Visual Basic has a built-in IDE which you can see when creating VBA macros in Microsoft Office.
  • Microsoft Access uses visual tools for creating database forms and reports.

To Do After Class

• Lab 7 and Homework 4 are due Friday. Lab 8 and Project 2 Design Specification are due next Friday.
• Readings/References: Big Java Ch. 10, 12; Lewis & Loftus Ch. 9; Deitel & Deitel Ch. 10, 11
• Electronic Resources: Tutorial: JFC/Swing; SDK demo applets; SwingSet demo; Teach Yourself Java ch. 11, 12, 13