Java: Example - Kilometers to Miles - User Interface Only

KmToMi user interface

This program produces a user interface, but there is no listener for the button so it doesn't do anything yet.

  1 
  2 
  3 
  4 
  5 
  6 
  7 
  8 
  9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
 43 
 44 
 45 
 46 
// intro-window/KmToMilesNoModel.java - Input field, button, output field
//    This is the user interface for the Km to Mi conversion.
//    The button does nothing in this program.
//    Fred Swartz, 2004-10-28

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;

///////////////////////////////////////////////// class KmToMilesNoModel
class KmToMilesNoModel {
    //====================================================== method main
    public static void main(String[] args) {
        JFrame window = new KmToMilesGUI();
        window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        window.setVisible(true);
    }
}


///////////////////////////////////////////////////// class KmToMilesGUI
class KmToMilesGUI extends JFrame {
    //======================================= instance variables //Note 1
    private JTextField m_milesTf      = new JTextField(10);      //Note 2
    private JTextField m_kilometersTf = new JTextField(10);
    private JButton    m_convertBtn   = new JButton("Convert");  //Note 3


    //====================================================== constructor
    public KmToMilesGUI() {
        //... Create content panel, set layout, add components
        JPanel content = new JPanel();                           //Note 4
        content.setLayout(new FlowLayout());   // use FlowLayout //Note 5
        content.add(new JLabel("Kilometers")); // create, add label //Note 6
        content.add(m_kilometersTf);           // add input field
        content.add(m_convertBtn);             // add button
        content.add(new JLabel("Miles"));      // create, add label
        content.add(m_milesTf);                // add output field
        this.setContentPane(content);                            //Note 7
        this.pack();                                             //Note 8
        
        //... Set window characteristics
        this.setTitle("Kilometers to Miles");
    }//end constructor
}//end class KmToMilesGUI

Notes



Note 1: Instance variables are created when an object is created (instanciated). They can be refereced by any of the constructors or methods in a class. They should be declared private. This program uses the convention of begining instance variable names with "m_". This practice is highly recommended for clarity in reading the code.

Note 2: This declares and initializes a text field to be approximately 10 characters wide.

Note 3: This declares and initializes a button with the text "Convert" showing on it. There is no "listener" attached to this button yet, so it doesn't do anything. That will be added in the next example.

Note 4: Components must be placed on the content pane in the JFrame. There are two ways to do this: (1) Get the existing content pane and work with that, or (2) Create a new content pane (usually a JPanel) and then set the content pane of the JFrame to that. The second approach is used here.

Note 5: A layout manager should be explicitly set for the content pane.

Note 6: Because labels are usually not referred to again, there is no need to put them into a named variable.

Note 7: The content pane of this JFrame is now set to the JPanel that we created earlier, named "content".

Note 8: After the content pane of the JFrame has been set and populated with components, it's necessary to call pack() to do the layout -- that is to set the location and size of each of the components.