Java Tutorial - lesson five


Lesson Five: Variables and Layout.

previous lesson - back to tutorial index - next lesson


The GUI components were defined in the method getWinComponents() (in Lesson Four). That makes them locally available in that method, but not outside of it. If we would like to access these elements outside of this method, we will have to define them outside of the method too. A good place to do this is after the class definition and before the first constructor.

A next issue was the position of the elements in Lesson Four. If we would like to put them on the screen in another way, we would have to change the layout of the panel in the method getWinComponents(). Java offers a number of layout managers. By combining these layouts in separate panels, a lot of variety can be achieved. I will not go into the details of all available layouts, but in this lesson we will see the BorderLayout and the GridLayout. Consult the Java pages at http://java.sun.com/ for more information.

The code below replaces the code in Calculator.java:

import java.awt.*;
import java.awt.event.*;
//---------------------------------------------
// Class
//---------------------------------------------
public class Calculator extends Frame {
    private TextField numberOne;
    private TextField numberTwo;
    private Button buttonAdd;
    private Button buttonSub;
    private Button buttonMul;
    private Button buttonDiv;
    private Label result;
//---------------------------------------------
// Constructor
//---------------------------------------------
    public Calculator() {
        Panel panel= getWinComponents();
        this.add(panel);
        initScreen();
        this.validate();
        System.out.println("Constructing a new Calculator...");
    }
//---------------------------------------------
// Methods
//---------------------------------------------
    private Panel getWinComponents() {
        numberOne= new TextField();
        numberTwo= new TextField();
        buttonAdd= new Button("+");
        buttonSub= new Button("-");
        buttonMul= new Button("*");
        buttonDiv= new Button("/");
        result= new Label("Nothing yet...");
        Panel panel= new Panel(new BorderLayout());
        Panel numberPanel= new Panel(new GridLayout(1,2));
        numberPanel.add(numberOne);
        numberPanel.add(numberTwo);
        panel.add(numberPanel, BorderLayout.NORTH);
        Panel operationsPanel= new Panel(new GridLayout(1,4));
        operationsPanel.add(buttonAdd);
        operationsPanel.add(buttonSub);
        operationsPanel.add(buttonMul);
        operationsPanel.add(buttonDiv);
        panel.add(operationsPanel, BorderLayout.CENTER);
        panel.add(result, BorderLayout.SOUTH);
        return panel;
    }
//---------------------------------------------
    private void initScreen() {
        this.addWindowListener(new WindowAdapter() {
        public void windowClosing(WindowEvent e) {
            System.exit(0); } });
        this.setBounds(100, 100, 300, 200);
        this.show();
        System.out.println("End of the method initScreen...");
    }
}
 

Reviewing the code:
Nothing much has happened. The GUI elements are defined globally in the class Calculator and not locally as in the previous lesson. The private identifier means that the variables are accessible from this class, but not from other classes. We will come back to this soon. The GUI-elements were placed in separate panels to order them in your window. You may not like the new layout, so I would encourage you to experiment with other layouts.

previous lesson - back to tutorial index - next lesson