User Input and Variables

back

New Example

      import java.awt.*;
      import java.applet.*;

      public class Greeting extends Applet{
    
           public void paint(Graphics g){
                //Outline
		g.setColor(Color.black);
		g.fillRect(48, 48, 104, 224);

                //Body
                g.setColor(Color.darkGray);
                g.fillRect(50, 50, 100, 200);
        
                //Nameplate
                g.setColor(Color.blue);
                g.fillRect(60, 60, 35, 15);
                g.setColor(Color.black);
                g.fillRect(95, 60, 45, 15);
                g.setColor(Color.white);
                g.drawString("HAL", 70, 73);
                g.drawString("9000", 96, 73);
        
                //The Eye
                g.setColor(Color.lightGray);
                g.fillOval(62, 135, 78, 78);
                g.setColor(Color.red);
                g.fillOval(64, 137, 74, 74);
        
                //Bottom
                g.setColor(Color.lightGray);
                g.fillRect(50, 220, 100, 50);
        
                //Greeting
                g.setColor(Color.black);
		g.drawString("I'm sorry Dave,  I'm afraid I can't let you do that", 0, 285);
           }
      }
    
Link to applet

We could easily change the above code to print our own names instead of "Dave." However, whenever we wanted to change the name, we would have to edit the code, and recompile. This is very inconveinent. There is a way around this, but it requires knowledge of variables.


Variables Introduction

Variables are how programs store information to be recalled at a later time. In other terms, variables are identifiers for stored data. The programmer is required to provide this identifier.

The following behaves the same as the above code (as a matter of fact, the applet link above is this code).

	import java.awt.*;
	import java.applet.*;

	public class Greeting extends Applet{
	     String name = "Dave";
    
	     public void paint(Graphics g){
	          //Outline
		  g.setColor(Color.black);
		  g.fillRect(48, 48, 104, 224);

		  //Body
		  g.setColor(Color.darkGray);
		  g.fillRect(50, 50, 100, 200);
        
		  //Nameplate
		  g.setColor(Color.blue);
		  g.fillRect(60, 60, 35, 15);
		  g.setColor(Color.black);
		  g.fillRect(95, 60, 45, 15);
		  g.setColor(Color.white);
		  g.drawString("HAL", 70, 73);
		  g.drawString("9000", 96, 73);
        
		  //The Eye
		  g.setColor(Color.lightGray);
		  g.fillOval(62, 135, 78, 78);
		  g.setColor(Color.red);
		  g.fillOval(64, 137, 74, 74);
        
		  //Bottom
		  g.setColor(Color.lightGray);
		  g.fillRect(50, 220, 100, 50);
		  
		  //Greeting
		  g.setColor(Color.black);
		  g.drawString("I'm sorry " + name + ", I'm afraid I can't let you do that", 0, 285);
	     }
        }
      
Source

What's Going On

Exercise 15: Add the quote "I'm afraid. I'm afraid, Dave. Dave, my mind is going." below the current quote, using the name variable. You should only add ONE line of code.


User Input

Now that we know how to use variables, it is time to learn how to read information from the user. What we need:


Allowing User Input

As we indicated above, in order to get user input, we need a way for them to input the information to us. In a normal Java program, we just make the user type the information to the program. We cannot do that here. We have to explicitly create areas for the user to type. These are referred to as Text Fields. First, we must add a new method, called init().

	import java.awt.*;
	import java.applet.*;

	public class Greeting extends Applet{
	     String name = "Dave";
	     TextField input;
    
	     public void init(){
                  this.setLayout(new BorderLayout());

                  //This is the panel to hold the user's input
		  Panel inputPanel = new Panel();
        
		  //Label for our text field
		  Label nameLabel = new Label("Enter your name: ");
		  inputPanel.add(nameLabel);

		  //Creates a text field to hold 15 characters
		  input = new TextField(15);
		  inputPanel.add(input);
        
		  //Button for the user to press when they are done
		  Button doneButton = new Button("Done");
		  inputPanel.add(doneButton);
        
		  this.add(inputPanel, BorderLayout.SOUTH);
            }
    
	    public void paint(Graphics g){
		  //Outline
		  g.setColor(Color.black);
		  g.fillRect(48, 48, 104, 224);
        
		  //Body
		  g.setColor(Color.darkGray);
		  g.fillRect(50, 50, 100, 200);
        
		  //Nameplate
		  g.setColor(Color.blue);
		  g.fillRect(60, 60, 35, 15);
		  g.setColor(Color.black);
		  g.fillRect(95, 60, 45, 15);
		  g.setColor(Color.white);
		  g.drawString("HAL", 70, 73);
		  g.drawString("9000", 96, 73);
        
		  //The Eye
		  g.setColor(Color.lightGray);
		  g.fillOval(62, 135, 78, 78);
		  g.setColor(Color.red);
		  g.fillOval(64, 137, 74, 74);
        
		  //Bottom
		  g.setColor(Color.lightGray);
		  g.fillRect(50, 220, 100, 50);
        
		  //Greeting
		  g.setColor(Color.black);
		  g.drawString("I'm sorry " + name + ", I'm afraid I can't let you do that", 0, 285);
		  g.drawString("I'm afraid. I'm afraid, " + name + ". " + name +
                               ", my mind is going.", 0, 295);
	    }
	}
      

What's Going On


Getting the Input

Our goal in the previous example was for the user to press the button, and the name in the two movie quotes to change. Right now, there is nothing that is causing this to happen. We need something that will detect that the button has been pressed, and update the name variable.

	import java.awt.*;
	import java.applet.*;
	import java.awt.event.*;

	public class Greeting extends Applet implements ActionListener{
	     String name = "Dave";
	     TextField input;
    
	     public void init(){
                  this.setLayout(new BorderLayout());

                  //This is the panel to hold the user's input
		  Panel inputPanel = new Panel();
        
		  //Label for our text field
		  Label nameLabel = new Label("Enter your name: ");
		  inputPanel.add(nameLabel);

		  //Creates a text field to hold 15 characters
		  input = new TextField(15);
		  inputPanel.add(input);
        
		  //Button for the user to press when they are done
		  Button doneButton = new Button("Done");
		  inputPanel.add(doneButton);
		  
		  //Add an ACTIONLISTENER to the Button
		  doneButton.addActionListener(this);

		  this.add(inputPanel, BorderLayout.SOUTH);
            }
    
	    //actionPerformed is called when the button is clicked
            public void actionPerformed(ActionEvent click){
	         //Get the string that was typed into the text field
		 name = input.getText();
            }

	    public void paint(Graphics g){
		 //Outline
		 g.setColor(Color.black);
		 g.fillRect(48, 48, 104, 224);
		 
		 //Body
		 g.setColor(Color.darkGray);
		 g.fillRect(50, 50, 100, 200);
		 
		 //Nameplate
		 g.setColor(Color.blue);
		 g.fillRect(60, 60, 35, 15);
		 g.setColor(Color.black);
		 g.fillRect(95, 60, 45, 15);
		 g.setColor(Color.white);
		 g.drawString("HAL", 70, 73);
		 g.drawString("9000", 96, 73);
		 
		 //The Eye
		 g.setColor(Color.lightGray);
		 g.fillOval(62, 135, 78, 78);
		 g.setColor(Color.red);
		 g.fillOval(64, 137, 74, 74);
		 
		 //Bottom
		 g.setColor(Color.lightGray);
		 g.fillRect(50, 220, 100, 50);
		 
		 //Greeting
		 g.setColor(Color.black);
		  g.drawString("I'm sorry " + name + ", I'm afraid I can't let you do that", 0, 285);
		 g.drawString("I'm afraid. I'm afraid, " + name + ". " + name +
                 ", my mind is going.", 0, 295);
	    }
	}
      
Link


Final Step

Right now, we know that the name variable is being updated. We just need some automated way to force the applet to be redrawn. Luckily, there is a method called repaint().

	import java.awt.*;
	import java.applet.*;
	import java.awt.event.*;

	public class Greeting extends Applet implements ActionListener{
	     String name = "Dave";
	     TextField input;
    
	     public void init(){
                  this.setLayout(new BorderLayout());

                  //This is the panel to hold the user's input
		  Panel inputPanel = new Panel();
        
		  //Label for our text field
		  Label nameLabel = new Label("Enter your name: ");
		  inputPanel.add(nameLabel);

		  //Creates a text field to hold 15 characters
		  input = new TextField(15);
		  inputPanel.add(input);
        
		  //Button for the user to press when they are done
		  Button doneButton = new Button("Done");
		  inputPanel.add(doneButton);
		  
		  //Add an ACTIONLISTENER to the Button
		  doneButton.addActionListener(this);

		  this.add(inputPanel, BorderLayout.SOUTH);
            }
    
	    //actionPerformed is called when the button is clicked
            public void actionPerformed(ActionEvent click){
	         //Get the string that was typed into the text field
		 name = input.getText();
		 
		 //Force the applet to be repainted
		 this.repaint();
            }

	    public void paint(Graphics g){
		 //Outline
		 g.setColor(Color.black);
		 g.fillRect(48, 48, 104, 224);
		 
		 //Body
		 g.setColor(Color.darkGray);
		 g.fillRect(50, 50, 100, 200);
		 
		 //Nameplate
		 g.setColor(Color.blue);
		 g.fillRect(60, 60, 35, 15);
		 g.setColor(Color.black);
		 g.fillRect(95, 60, 45, 15);
		 g.setColor(Color.white);
		 g.drawString("HAL", 70, 73);
		 g.drawString("9000", 96, 73);
		 
		 //The Eye
		 g.setColor(Color.lightGray);
		 g.fillOval(62, 135, 78, 78);
		 g.setColor(Color.red);
		 g.fillOval(64, 137, 74, 74);
		 
		 //Bottom
		 g.setColor(Color.lightGray);
		 g.fillRect(50, 220, 100, 50);
		 
		 //Greeting
		 g.setColor(Color.black);
		  g.drawString("I'm sorry " + name + ", I'm afraid I can't let you do that", 0, 285);
		 g.drawString("I'm afraid. I'm afraid, " + name + ". " + name +
                 ", my mind is going.", 0, 295);
	    }
	}
      
Link


More on Variables


Exercise 17: Change the applet above to have the user enter in two names. The first name the user inputs will be for the first quote, and the second name input will go to the second quote. Example.
Challenge: How close can you get yours to look like mine?
Hint: The panel added to the applet is composed of two panels.