6. Textareas
The
BankView program has a textfield where the user can enter a deposit in a bank
account or a withdrawal. Positive numbers indicate deposits and negative
numbers indicate checks. It also has a button that the user clicks to see the
last five transactions made. Each user input produces a remark in the large
rectangular output area.
The
BankView frame looks as shown in the accompanying figure after inputs of 100,
-30, and 42, and a button click, except that the bottom part of the output area
has been cut off. Scroll bars will appear when the textarea has too much
material to display at one time. If you would like to see this BankView program
in action, click this execution link.
The
BankView class in Listing 6 has two variables, modelAccount and itsOutput, that
contain objects that have to be accessed in several methods of the
class. This means you have to define them as instance variables, outside
of all methods, as shown in lines 1 and 2. The modelAccount object keeps track
of checks and deposits for a bank account. The itsOutput object keeps track of
a large area where information written by the program is to appear. We
construct it in line 2, we add it to the frame in line 8, and we write
information to it in lines 11 and 18.
An ETextArea object displays a large amount of textual
information. The ETextArea construction in line 2 creates a rectangular area
suitable for writing up to 10 rows of words, each row having room for at least
42 characters. This kind of component is a textarea. You will also have
scroll bars on this area, so the user can scroll up-and-down or left-and-right
to read all the material printed there. You add one line to the information
displayed in an ETextArea by using someETextArea.say(messageString).
An
ETextArea also has the same setText and getText methods that ELabels, EButtons,
and EFields have. In particular, someETextArea.setText("")
clears the area.
Line
7 of this class constructs a new UpdateField (a subclass of EField), then sets
its width to be 5 characters. Since the width method returns the EField object
itself, you can apply the text method to it, setting its text to be a zero.
Since the text method also returns the EField object itself, you can use it as
the parameter for the add method. All you need for an applet that contains the
BankView program is the following:
public class BankViewApplet
extends javax.swing.JApplet
{
public void start()
{ setContentPane
(new BankView());
} //======================
}
The constructor lays out a
button and a textfield for input and a textarea for output (lines 3-8). Then
the runtime system pauses until some event takes place: When the button is
clicked, a record of the last five transactions in the bank account appears in
the textarea (line 11; see the figure above). When the user enters a new
transaction in the textfield (line 15), it is checked to make sure it is not
blank (line 16). If so, the bank account is updated (line 17) and then the
current balance is printed in the textarea (lines 18-19). Line 21 erases the
textfield for the user's convenience.
Listing 6 The BankView program (uses the BankAccount class)
public
class BankView extends EPanel
{
private BankAccount modelAccount = new BankAccount(); // 1
private ETextArea itsOutput = new ETextArea
(10, 42); // 2
/** The View: Lay out the GUI components. */
public BankView() // 3
{ add (new
LastFiveButton().text
// 4
("show last five transactions")); // 5
add (new ELabel ("Enter deposit(+) or
check(-)"), // 6
new UpdateField().width (5).text ("0")); // 7
add (itsOutput); // 8
} //======================
/** Controllers: React to click of button or
ENTER key. */
private class LastFiveButton extends EButton // 9
{ public void onClick() //10
{ itsOutput.say
(modelAccount.lastFiveTransactions());
//11
} //12
} //======================
private class UpdateField extends EField //13
{ public void onEnter() //14
{ String input =
this.getText();
//15
if (input.length() > 0) //16
{ modelAccount.makeChange
(input); //17
itsOutput.say (modelAccount.currentBalance() + //18
" = balance."); //19
} //20
this.setText (""); // clear the entry field
//21
} //22
} //======================
}
This
program follows the standard MVC (model-view-controller) design:
·
The constructor creates the view (what the user sees on the
screen and interacts with) and then suspends the action of the program until
some input event occurs.
·
The last two methods are the controllers of what goes on in the
program, reacting to events.
·
The BankAccount object stores information that is accessed at several
points in the execution of the program. So it is a model of a part of
the real world (a bank account in this case). The controllers act as
intermediaries between the model and the view.
The
BankAccount makeChange method, called in line 17, accepts any string of one or
more characters and makes the change for a check (if less than zero) or a deposit.
The methods in this class have nothing to do with GUIs, so we do not discuss
them here. You should study the discussion of the BankAccount class at this language link if you are not fully familiar with
how to make this kind of class.
Exercise 6.1 Change BankView so that it says "The
last 5 are " before it lists the five.
Exercise
6.2 Change
BankView as follows, on the assumption that BankAccount has another instance
method, numChecks(), to tell the number of checks so far: Clicking a button causes the number of
checks to appear in the textarea.
Exercise
6.3* Revise
BankView to have two textfields, one for checks only and one for deposits only.
Both will be entered as positive numbers. Delete any leading '$' character from
input sent to the makeChange method. Hint: Use the substring method.
Exercise
6.4**
Write a program that has one textfield and one textarea. The user is to enter
numbers in the textfield. After each number is entered, write a line that says
"INPUT: " followed by the user's input, then a line that gives the
average of all numbers entered so far. Hint: The statement n =
Integer.parseInt(this.getText()) produces the numeric equivalent of the string of
characters that the user enters. Have a variable that tracks the total entered
and another variable that counts how many entries are made.
7.
Timers
A
subclass of ETimer is generally defined inside the EPanel subclass. It must
have an onBeep() instance method. You use the instance method delay(m)
to tell the timer to wait for a period of m milliseconds before
executing its onBeep method. 1000 milliseconds is 1 second. The delay method returns the ETimer object
itself, so it can be used in e.g. add (new XTimer().delay(1200)). You can stop the beeping
with the ETimer stop() method. ETimer is a subclass of ELabel, since an
ETimer is often used to display a picture that changes frequently, once each
time onBeep is called. So you have available the setPicture, getPicture,
setText, and getText methods.
Example:
You could add the following three statements in the constructor of any of the
example classes we have had. They will display a picture of Rome for just 1.2
seconds, then replace the picture of Rome by the picture of Ireland, if you
have defined the RomeTimer class shown:
ETimer flash = new RomeTimer(); flash.setPicture ("Rome.jpg"); add (flash);
private
class RomeTimer extends ETimer
{ public void onBeep()
{ this.setPicture ("Ireland.jpg");
}
}
Each EButton
and EField has a setEnabled method: x.setEnabled(false) keeps the user
from clicking the button or typing in the textfield. x.setEnabled(true)
re-activates the component. When a component is first created, it is of course
already enabled.
The GuessNumberGame is a subclass of EPanel you can
put in an EFrame (for an application) or a JApplet (for an applet in a
webpage). The design is to have a button the user clicks to start a new game.
When that happens, the program chooses a secret number from 1 to 100 and
invites the user to guess it. Each time the user types a guess into the
textfield, the response is "Too high" or "Too low",
whichever is appropriate. When the user gets it right, the response is
"Right. Congratulations!" and the game stops; the user clicks the
button to play again. The GuessNumberGame frame looks as shown in the
accompanying figure, after a guess of 40 which was too high. If you would like to see
this GuessNumberGame program in action, click this execution
link.
The GuessNumberGame class in Listing 7 has four
instance variables, since they have to be accessed in several methods of the
class:
·
The
textfield named itsInput is declared in line 1 to allow room for 3 or
more characters. It is added to the panel in line 8. It is disabled initially
in lines 10, and again disabled at the end of each game in line 35. It is
enabled at the start of a game in line 19, when the user clicks the button that
says "Click to play the game".
·
The
label named itsAnswer is declared in line 2 to initially have no text
(indicated by the empty string "").
It displays the program's responses in lines 27, 30, and 33.
·
The
integer value named itsSecret is the secret number the program chooses.
The program checks it against the user's guess in lines 26 and 29.
·
The
timer named itsTimer is declared in line 4. Its purpose is to choose a
secret number. It does this by adding 13 to itsSecret number 50 times a second
(i.e., a delay of 20 milliseconds between additions) until the user clicks the
button to start the game. But when it goes over 100, it subtracts 100 to keep
it in the range of 1 through 100 (lines 13-15). In general x += k
changes x to be k more than it was, and x -= k changes x to be k less
than it was.
This is a
workable way to generate a number sort of at random in the range from 1 to 100.
By adding 13 each time, which is a prime number, this method cycles through all
100 possibilities once each two seconds. Since the user will probably take one
or more seconds from the time "Congratulations!" is displayed to the
start of the next game, this is acceptably "random". Of course,
nothing is actually random about the way a computer functions.
Another way to
produce a random number is have an instance variable java.util.Random randy
= new java.util.Random(); then each call of randy.nextInt(n)
produces a "random" non-negative number less than n. Exercise 7.3
illustrates its use. Note that the
ETimer is not added to the display, since there is nothing to show about this
particular ETimer; but usually there is.
Line 25 has to obtain a number from the string of
characters that the user typed in the textfield. It uses the standard Integer.parseInt(someString)
method to
derive the number.
Listing 7 The GuessNumberGame
program
public class GuessNumberGame
extends EPanel
{
private EField itsInput = new PlayOneGame().width (3); // 1
private ELabel itsAnswer = new ELabel (""); // 2
private int itsSecret = 50; // 3
private ETimer itsTimer = new SecretTimer().delay (20); // 4
/** The View: Lay out the
GUI components. */
public GuessNumberGame() // 5
{ add (new StartGame().text ("Click to play the
game")); // 6
add (new ELabel
("Guess 1 to 100")); // 7
add (itsInput); // 8
add (itsAnswer); // 9
itsInput.setEnabled
(false); //10
} //======================
/** Controllers: React to various events. */
private class
SecretTimer extends ETimer
//11
{ public void onBeep() //12
{ itsSecret += 13; //13
if (itsSecret >
100)
//14
itsSecret -=
100;
//15
this.delay
(20);
//16
}
//17
} //======================
private class StartGame
extends EButton //18
{ public void onClick() //19
{ itsTimer.stop(); //20
itsInput.setEnabled
(true); //21
} //22
} //======================
private class
PlayOneGame extends EField
//23
{ public void onEnter() //24
{ int guess = Integer.parseInt
(this.getText()); //25
if (guess
> itsSecret)
//26
{ itsAnswer.setText ("Too high"); //27
}
//28
else if
(guess < itsSecret) //29
{ itsAnswer.setText ("Too low"); //30
}
//31
else // don't continue, this game is over //32
{ itsAnswer.setText ("Right.
Congratulations!"); //33
itsTimer.delay
(20); //34
itsInput.setEnabled
(false); //35
}
//36
} //37
} //======================
}
Exercise 7.1 What is the first secret
number the program chooses, if the user waits exactly 1.00 seconds before
clicking the button? What is the second secret number, if the user waits
exactly 4.04 seconds before clicking the button again?
Exercise 7.2 Change GuessNumberGame to have another instance
variable itsLimit, which is initially 100. The secret number is 1 up through
itsLimit. Provide another button the user can click to change itsLimit to 15
(to make the game easier for small children) or back again to 100. How many
guesses would it take you to get it right if itsLimit is 15?
Exercise 7.3 Change GuessNumberGame to use a java.util.Random
object instead of a timer.
Exercise 7.4* You can get along without the setEnabled method if
you have to. To do this, eliminate all references to it and then declare an
instance variable isEnabled, set to true or false appropriately. Test isEnabled
in the onEnter method to see if the textfield should react in any way.
Exercise 7.5** Write a program that asks three questions of
your choosing. Supply a textfield for each answer, but have the onEnter method
do nothing for each textfield. At the end of 30 seconds, the program
"calls time" and tells how many answers were right.
Exercise 7.6** After you write the program for the
preceding exercise, add a label that counts down to zero starting from 30,
changing once each second.
Link
to next section (Part D)