Module 3: String Input


An example with the Face applet

First, what do we mean by input?

Consider this example:

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

public class FaceWithGreeting extends Applet implements ActionListener {

  // A String variable to hold the name when it has been entered.
  String name;
  
  // The text field in which the user enters a string.
  TextField inputField;

  // This method is automatically called for initialization.
  // This is where we build parts of the applet: buttons, textfields etc.

  public void init ()
  {
    //-----------------------------------------------------------
    // Ignore the code between the dashed lines for now.
    setLayout (new BorderLayout());
    Panel bottomPanel = new Panel ();
    Label nameLabel = new Label ("Enter your name: ");
    bottomPanel.add (nameLabel);
    inputField = new TextField (15);
    bottomPanel.add (inputField);
    Button nameEnteredButton = new Button ("Press when done");
    bottomPanel.add (nameEnteredButton);
    nameEnteredButton.addActionListener (this);
    add (bottomPanel, BorderLayout.SOUTH);
    //-----------------------------------------------------------

    // Initially the string that's in the name variable should be
    // blank because that's what we'll print before a name is entered.
    name = "";
  }
   
   
  // The method actionPerformed is called when the button is clicked.

  public void actionPerformed (ActionEvent click)
  {
    // Retrieve the string, if any, that was typed into the textfield:
    name = inputField.getText ();

    // Redraw the applet. This is necessary because it's inside the paint
    // method that we depict the string.
    repaint ();
  }
  
      
  public void paint (Graphics g) 
  {
    // The Face, as before:
    g.drawOval (40,40, 120,150);         // Head
    g.drawOval (57,75, 30,20);           // Left eye
    g.drawOval (110,75, 30,20);          // Right eye
    g.fillOval (68,81, 10,10);           // pupil (left)
    g.fillOval (121,81, 10,10);          // pupil (right)
    g.drawOval (85,100, 30,30);          // Nose
    g.fillArc (60,125,80,40, 180,180);   // Mouth
    g.drawOval (25,92, 15,30);           // Left ear
    g.drawOval (160,92, 15,30);          // Right ear

    // The greeting:
    g.drawOval (160,125, 150,40);        // An oval for the greeting.
    String greeting = "Hello " + name;   // Combine these two strings into one.
    g.drawString (greeting, 190,150);    // Draw the greeting
  }
  
}
Note:


Variables

What's a variable?

Let's look at the program again, this time focusing mainly on the two variables name and greeting:
// ... left out the import's for illustration ...

public class FaceWithGreeting extends Applet implements ActionListener {

  // A String variable to hold the name when it has been entered.
  String name;
  
  public void init ()
  {
    //-----------------------------------------------------------

    // ... left this out for illustration ...

    //-----------------------------------------------------------

    // Initially the string that's in the name variable should be
    // blank because that's what we'll print before a name is entered.
    name = "";
  }
   
   
  // The method actionPerformed is called when the button is clicked.

  public void actionPerformed (ActionEvent click)
  {
    // Retrieve the string, if any, that was typed into the textfield:
    name = inputField.getText ();

    // ...
  }
  
      
  public void paint (Graphics g) 
  {
    // The Face, as before:
    // ...


    String greeting = "Hello " + name;   // Combine these two strings into one.
    g.drawString (greeting, 190,150);    // Draw the greeting
  }
  
}
Note:

Other kinds of variables:

In-Class Exercise: Add some color to the above applet. Make the greeting more interesting.
In-Class Exercise: Make the "Hello" string and the name appear on different lines in the applet.


Assignment

The = symbol is used to assign values to variables:

In-Class Exercise: Examine the compiler error you get if you accidentally remove the = operator in any of its uses above.
In-Class Exercise: Examine the compiler error you get if you accidentally remove the ; (semicolon) at the end of assignment statements.


Multiple inputs

Let's create an applet with two inputs:

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

public class FaceWithGreeting2 extends Applet implements ActionListener {

  // String variables for name and salutation:
  String name;
  String salutation;

  // The text fields in which the user enter strings.
  TextField nameField;
  TextField salutationField;
  

  public void init ()
  {
    // -------------------------------------------------------------
    // GUI stuff
    setLayout (new BorderLayout());
    Panel bottomPanel = new Panel ();

    Label nameLabel = new Label ("Name: ");
    bottomPanel.add (nameLabel);

    nameField = new TextField (15);
    bottomPanel.add (nameField);

    Label salutationLabel = new Label (" Salutation: ");
    bottomPanel.add (salutationLabel);

    salutationField = new TextField (10);
    bottomPanel.add (salutationField);

    Button doneButton = new Button ("Press when done");
    bottomPanel.add (doneButton);

    doneButton.addActionListener (this);

    add (bottomPanel, BorderLayout.SOUTH);
    // -------------------------------------------------------------

    // Initial values:
    name = "";
    salutation = "";
  }
   
   
  // The method actionPerformed is called when the button is clicked.

  public void actionPerformed (ActionEvent click)
  {
    // Retrieve the strings from the two text fields:
    name = nameField.getText ();
    salutation = salutationField.getText ();

    // Redraw the applet:
    repaint ();
  }
  
      
  public void paint (Graphics g) 
  {
    // The Face, as before:
    g.drawOval (40,40, 120,150);         // Head
    g.drawOval (57,75, 30,20);           // Left eye
    g.drawOval (110,75, 30,20);          // Right eye
    g.fillOval (68,81, 10,10);           // pupil (left)
    g.fillOval (121,81, 10,10);          // pupil (right)
    g.drawOval (85,100, 30,30);          // Nose
    g.fillArc (60,125,80,40, 180,180);   // Mouth
    g.drawOval (25,92, 15,30);           // Left ear
    g.drawOval (160,92, 15,30);          // Right ear

    // The greeting oval:
    g.drawOval (160,125, 150,40);     

    // Combine the strings into one:
    String greeting = "Hello " + salutation + " " + name;   

    // Draw the greeting:
    g.drawString (greeting, 190,150); 
  }
  
}
Note:
  • We have used two text fields, one for a salutation and one for the name.

  • Similarly, we used two String variables.

  • The + operator can be used for concatentation multiple times in a single statement.

  • We will need to widen the applet by increasing the "width" parameter in the HTML file:
    <HTML>
    <BODY bgcolor="#FFFFFF">
    
      <p>
      Enter your name and preferred salutation in the two text fields at the bottom below
      and then press the button.
    
      <p>
      <applet code="FaceWithGreeting2.class" width=600 height=300> 
      </applet>
    
    </body>
    </html>
        

  • Link to applet
In-Class Exercise: [Challenging exercise] Can you make the face initially without a smile, and then make it smile when the greeting is displayed? Hint: use int variables to store some of the oval parameters, and set those values in the actionPerformed method. This way, the initial values (set in init) are for no-smile, and the new values set in actionPerformed are for a smile.