In this section of the tutorial, we want to discuss how to create a window for the Hilo GUI. For this game, we will create a window that has 6 text fields and 1 button:
The actual GUI (applet) for the code that we will produce in this section is
shown below.
This code is only useful to create the layout for the window because
none of the events on the window are handled, so clicking or typing in the
applet will have no effect.
As illustrated in the simple applet GUI example (the "Hi Mom!" applet with button and text fields) that was done previously, we implement the Hilo applet as an instance of a class that extends class Applet. We then override the inherited init() method and provide code to set up the GUI window.
1: import java.awt.*
2: public class hilo_win extends java.applet.Applet {
Line number 1 imports the AWT library to to provide basic windowing in Java. Line number 2 defines a public class called hilo_win that inherits from class Applet (in java.applet). (The class must be public.)
// Instance variables
TextField cash_text, bet_text; // the player's cash and bet windows
TextField first_text, second_text, third_text; // the card display windows
TextField msg_text; // the message window
Label cash_label, bet_label; // the player's cash and bet labels
Label first_label, second_label, third_label; // the card display labels
Label msg_label; // the message label
Panel first_panel, second_panel, third_panel; // panels for card displays
Panel fourth_panel; // panel for bet field
Panel fifth_panel; // panel for message field
Button deal_button; // deal button
The first couple of lines specify the TextField instance variables for the text fields of a hilo_win instance (which is a hilo GUI). The Label variables represent the labels for the text fields in the applet. The Button variable is the button that will be pressed to deal the cards.
This applet uses panels, which were not used in the previous example. Because the Java Flow Layout layout manager puts widgets into a window row by row, left to right and top to bottom, there is no guarantee that a text label will appear next to the text field that it identifies, for example. Thus if we just placed the labels and text fields into a window as independent widgets, the result might not be as desired. For example, for the hilo GUI we might get something like
-----------------------------------------------
| -------- ------ |
| Your cash: | | | DEAL | |
| -------- ------ |
| |
| ------------- |
| First Card: | | Middle Card: |
| ------------- |
| -------------- ------------ |
| | | Second Card: | | |
| -------------- ------------- |
| ------ |
| Your Bet: $ | | Message: |
| ------ |
| ----------------------------- |
| | | |
| ------------------------------ |
| |
-----------------------------------------------
which is, at best, not pleasing.
This problem is not really controllable because the widgets are placed on the window as the window is created, and the space allocated for the window is not controlled from within the program, but from within the <applet> tag of an html document. Furthermore, the space is specified in pixels, which may result in different actual sizes on different platforms. Finally, there can also be differences in the way that web browsers or other html viewers interpret the size specifications. Thus there really is no way to know in advance the actual size of the window.
There is a fairly simple mechanism that can solve this problem: panels. A Panel is a container that can be a component of a window such as an applet. A panel is usually thought of as a group of widgets that are to be kept together. For the hilo GUI we use five panels, each containing a text field and its associated label. There is one panel for each of the three cards, one for the bet amount, and one for the message. Note that we also could have used a panel for the winnings (cash) field, but the size and location (at the beginning) of this field and its label are such that a panel isn't needed for them.
So we view our GUI for the hilo game as
-----------------------------------------------
| -------- ------ |
| Your cash: | | | DEAL | |
| -------- ------ |
| ............................... |
| . ------------- . |
| . First Card: | | . |
| . ------------- . |
| ............................... |
| ................................. |
| . -------------- . |
| . Middle Card: | | . |
| . -------------- . |
| ................................. |
| ................................ |
| . ------------ . |
| . Second Card: | | . |
| . ------------- . |
| ................................ |
| ........................ |
| . ------ . |
| . Your Bet: $ | | . |
| . ------ . |
| ........................ |
|.............................................. |
|. ----------------------------- . |
|. Message: | | . |
|. ------------------------------ . |
|.............................................. |
-----------------------------------------------
where the dotted lines indicate the panels. (The outlines of the panels will
not show when the applet is displayed.) Note that two panels will be placed
on one row if they will both fit on the row.
// (Overridden) init method:
public void init() {
setBackground(Color.blue); // Set background color to blue
setForeground(Color.white); // Set foreground color to white
setLayout(new FlowLayout()); // Set Layout Style
The first two lines in the init() method change the color of the background to blue and the color of the foreground (the pen color) to white. The next line sets up the layout style as a flow layout. A flow layout manager simply adds the components to the screen column by column. If the widgets get to the edge of the applet, then they are wrapped around to the next line. Further information on the flow layout manager and the other layout managers can be found in the Java Layout Manager section of Sun's Java Tutorial© 1995 by Sun Microsystems, Inc.
Next, for each text field we create a label and the actual text field. We also create the button for dealing the cards. We add each of the label-field pairs to a panel. We then add the first three widgets and the five panels to the GUI window by sending them to the layout manager:
// Add the label and the text field for the winnings balance.
cash_label = new Label("Your cash:");
cash_text = new TextField(8);
add (cash_label);
add(cash_text);
// Add the Deal button.
deal_button = new Button("DEAL");
add(deal_button);
// Add the text fields and labels for the cards.
// Create the labels and text fields.
first_label = new Label("First Card:");
first_text = new TextField(25);
third_label = new Label("Middle Card:");
third_text = new TextField(25);
second_label = new Label("Second Card:");
second_text = new TextField(25);
// Create a panel for each label-text field pair.
first_panel = new Panel();
first_panel.setLayout(new FlowLayout());
second_panel = new Panel();
second_panel.setLayout(new FlowLayout());
third_panel = new Panel();
third_panel.setLayout(new FlowLayout());
// Put a label and text field into each of the three panels.
first_panel.add(first_label);
first_panel.add(first_text);
second_panel.add(third_label);
second_panel.add(third_text);
third_panel.add(second_label);
third_panel.add(second_text);
// Add the panels to the applet.
add(first_panel);
add(second_panel);
add(third_panel);
// Add the bet field and label.
bet_label = new Label("Your Bet: $");
bet_text = new TextField(5);
fourth_panel = new Panel();
fourth_panel.setLayout (new FlowLayout());
fourth_panel.add(bet_label);
fourth_panel.add(bet_text);
add(fourth_panel);
// Add the message field and label.
msg_label = new Label("Message:");
msg_text = new TextField(30);
fifth_panel = new Panel();
fifth_panel.setLayout (new FlowLayout());
fifth_panel.add(msg_label);
fifth_panel.add(msg_text);
add(fifth_panel);
The line cash_label = new Label("Your cash:"); does exactly what you might think it would do: it creates a new label that will display the text "Your cash:", and this label is assigned as the value of the cash_label instance variable. The next line, cash_text = new TextField(8);, creates a text field of length 8 as the value of cash_text. Until this point though, nothing will be displayed; we have only created some widgets. To display the widgets, we can apply the add() method as in the next line of the program: add(cash_label);, which sends the label for the winnings field to the layout manager to display. The add() methods are called in the order in which you want the widgets to appear on the window, left-to-right and top-to-bottom, when using the flow layout. Whenever a widget will not fit on the current row of widgets, the flow layout manager begins a new row of widgets below the current row. The widgets in each row are centered.
(Note: Because the interpretation of the field width (8 for the cash_text field) can vary with different applet viewers, it is a good idea to make the field width slightly larger than the maximum number of characters that will be required.)
Finally, we initialize the text fields and prohibit input where needed on the text fields:
// Initialize the text fields and prohibit input.
cash_text.setText("$0");
cash_text.setEditable(false);
first_text.setEditable(false);
second_text.setEditable(false);
third_text.setEditable(false);
msg_text.setEditable(false);
The line cash_text.setText("$0"); sets the initial text for the cash_text window to show "$0". The next line, cash_text.setEditable(false);, tells the window manager that typing is not allowed in this window. Note that the bet_text text field is not set to prohibit input.