INFM 718B
Building the Human - Computer Interface
Fall 2006


Course Description
Syllabus
Reading List
Team Project

Exercise 5

Updated: Oct 13, 5:20 pm

In this exercise, you will be working with Java Swing. This should be your first step into writing a graphical application. As such, we suggest you do some background reading on the topic. The following is a link to Sun's Java tutorial:

http://java.sun.com/docs/books/tutorial/uiswing/index.html

Try to spend some time reading through it, if you can. We found these sections of the tutorial to be most helpful:

  • Getting Started with Swing
  • Using Layout Managers
  • Using Swing Components
The problem set for this exercise involves modifying a pre-existing application. You can grab the source code for that application here:

http://www.takomasoftware.com/UMD/INFM718B/practice/E5/E5.java

Some browsers may change the filename when you download this file. Make sure the file is called E5.java before you compile it. If all is well, the program should compile and run without modification. Then, a window should appear that looks like this. Make the following changes to the code:

  1. Swap the positions of the Check Boxes below the text area. In other words, "I Agree" should end up on the left and "I Don't Disagree" should end up on the right. Here is a picture of the solution.

  2. Change the Check Boxes into regular buttons. Here is a picture of the solution.

  3. Move the two buttons so that they appear above the text area. Here is a picture of the solution.

  4. Create a third button (JButton) and add it to the button panel. Add the following two statements where the JCheckBoxes are being added to the pane:
         JButton doSomething = new JButton("Do Something");
         buttons.add(doSomething);
        

  5. Add an event handler so your program prints a message when the Do Something button is clicked:
    • Create the inner class to handle the events. This class must implement the ActionListener interface:
          class ClickHandler implements ActionListener {
              public void actionPerformed(ActionEvent e) {
      	    System.out.println("I've been clicked!");
      	}
          }
          
    • Create an instance of ClickHandler and register it as an event handler for your button:
      	doSomething.addActionListener(new ClickHandler());
          
      I like to place this code just before the statement, buttons.add(doSomething). When you click on the Do Something, your application should print "I've been clicked!" on the Eclipse console.

  6. Create and register a second event handler to capture button click events in the text component:
    	class MouseHandler implements MouseListener {
    		public void mouseClicked(MouseEvent evt) {
    			System.out.println("mouseClicked in text pane");
    		}
    		public void mousePressed(MouseEvent evt) {
    		}
    		public void mouseReleased(MouseEvent evt) {
    		}
    		public void mouseEntered(MouseEvent evt) {
    		}
    		public void mouseExited(MouseEvent evt) {
    		}
    	}
    	text.addMouseListener(new MouseHandler());
        

  7. Notice that the mouseClicked method receives a MouseEvent object as a parameter. Use the MouseEvent's getX() and getY() methods to print the location of the pointer (X and Y coordinates) when the click occured. Add the following line your mouseClicked method:
    	System.out.println ("X: " + evt.getX() + ", Y: " + evt.getY());
        
  8. Additional things you can try if you want:
    • Use the getButton() for MouseEvent to print out which button was clicked.
    • Add more event handlers to the text component to capture mouse motion (implementing the MouseMotionListener interface) and key clicks (KeyListener).

Bill Kules