Graphical User Interfaces: Displaying a Simple Window

paltryboarpigΛογισμικό & κατασκευή λογ/κού

3 Νοε 2013 (πριν από 3 χρόνια και 8 μήνες)

61 εμφανίσεις

Graphical User Interfaces:

Displaying a Simple Window


Today we will learn how to display a window with 4 simple objects in it: text boxes, 2
types of buttons, and labels. Here are the basic classes we’ll need, and how to use them:



JFrame

-

a frame or
window. It is created by the constructor:


JFrame frame = new JFrame("Hello, World!");


The String parameter to JFrame is the title of the window.


A useful method to call for your frame is setDefaultCloseOperation, with the parameter
JFrame.EXIT_ON_CLOSE
. This tells Java to end the program when the user clicks the
“X” to close the window:



frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);




Container

-

a container to which components can be added. We can't add components
directly to a JFrame;
we must create a container for the frame, then add to the
container.


Container pane = frame.getContentPane();


Now we can add objects to
pane
.




JButton

-

a button object.


JButton myButton = new JButton("Press me");


The String parameter is the tex
t that appears on the button. To add the button to our pane:



pane.add(myButton);



JRadioButton

-

a radio button object.


JRadioButton choice1 = new JRadioButton("First Choice");


JRadioButton choice2 = new JRadioButton("Second Choice");



The Stri
ng parameter is the text that appears next to the radio button. To group radio


buttons together so that only one of the group may be selected, a ButtonGroup must be


created, and the related radio buttons added to the group:



ButtonGroup g = new Butto
nGroup();


g.add(choice1);


g.add(choice2);



The individual radio buttons are then added to the pane:


pane.add(choice1);


pane.add(choice2);


JTextField

-

a text field object which allows user input.


JTextField name = new JTextField(40);


The

int parameter is the length in characters of the field.


Some useful methods for JTextField:


setEditable

takes a boolean as a parameter. Passing
false
changes a text field so that the
user can’t overtype it. The field is NOT grayed out.



name.setEdita
ble(
false
);


If you want to change the field back to allow the user to type in it, pass
true
to
setEditable:



name.setEditable(
true
);


A method similar to setEditable is
setEnabled
. It also takes a boolean value as a
parameter. A text field that is disabl
ed (setEnabled(false)) cannot be typed over, and is
also grayed out. Use this together with setEditable.



name.setEnabled(false);


By default, data is left
-
justified in a text field. To make it right
-
justified, use
setHorizontalAlignment
:



name.setHoriz
ontalAlignment(JTextField.RIGHT);


You may also want to display an initial value in a text field. You do this with the method
setText
:



name.setText(“empty”);


setText’s parameter must be a String. If you want to display a numeric value in a text
field,
here’s a trick to convert it to a String first:



double total = 0;


String displayValue;


displayValue = “” + total; //concatenating any number to a String (even the empty







// String) will convert the number to a String


name.setText(
displayValue);


Once you have the properties of a text field set the way you want them, add the field to
pane:



pane.add(name);




JLabel

-

a read only text field.


JLabel prompt = new JLabel("Enter name: ");


The String parameter is the text to be d
isplayed. To add the field to pane:



pane.add(prompt);




Organizing the Components in the Pane


Objects appear in a pane in the order they are added. How can we control the format?
There are 3 layouts:




GridLayout




FlowLayout




BorderLayout (de
fault)



GridLayout

puts objects in rows and columns. It's good to use when all objects are the
same size.


pane.setLayout(new GridLayout(4,2));


FlowLayout

puts as many objects as can fit in a row. You can align them left, right, top,
or center.


pane
.setLayout(new FlowLayout());


BorderLayout

only handles 5 components, and allows placement top (NORTH), left
(EAST), center (CENTER), right (WEST), or bottom (SOUTH).


//setLayout not needed because BorderLayout is default


pane.add(myButton, BorderLay
out.NORTH);


Once we have a layout, we should size our window:


frame.setSize(300,200);


The parameters are number of pixels; first is horizontal, second is vertical.


Finally, to display the window:


frame.show();


Note that all methods that add objects

or define layout are called for the Container
instance; creating, sizing, and displaying the window use the JFrame instance.


Here's a simple
program

to display a window th
at includes some basic components. But,
it doesn't do anything
-

entering data won't be acted upon. That will be the topic of our
next lesson.



GuiSum.java:


import java.awt.*;

import javax.swing.*;


public class GuiSum {



public static void main(String
[] args) {



JFrame frame = new JFrame("GUISum");


frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);


Container pane = frame.getContentPane();



pane.setLayout(new FlowLayout());



JTextField inputOne = new JTextField(20);


JTex
tField inputTwo = new JTextField(20);


JTextField output = new JTextField(20);


output.setEditable(
false
);


output.setEnabled(
false
);


output.setHorizontalAlignment(JTextField.RIGHT);



double total = 0;


String displayValue;



d
isplayValue = "" + total;


output.setText(displayValue);



pane.add(new JLabel("Enter first number: "));


pane.add(inputOne);


pane.add(new JLabel("Enter second number and hit return: "));


pane.add(inputTwo);


pane.add(new JLabel("
Their sum is: "));


pane.add(output);



frame.setSize(500,150);


frame.show();


}

}


Displays this window:




Assignment:
Design and code a graphical interface for your Math Drill program. It
should have these fields:


a text field into whic
h the user types the number of problems


a radio button for each of the possible operations (addition or subtraction)


a display
-
only text field that shows the current problem


a text field into which the user types the answer

Label your fields and buttons

appropriately. Make your interface look well
-
organized and
easy to read.


For this code, create a new project in eclipse. Give the project a name like
“GUIMathDrill” to distinguish it from your character
-
based program. Copy the
MathDrill.java file into th
e new project. Then create a new MathInterface class with a
main method. The code to create your window goes here.

Test your interface. Your testing will only show the window the way it looks when it first
comes up; the buttons won’t do anything yet. That
will be the next step.