CS101: Introduction to Computer Science I

Step 0: Read

1. Java GUI Application Learning Trail @ http://www.netbeans.org/kb/trails/matisse.html.
2. Swing Tutorial's "Learning Swing with the NetBeans IDE" @ http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html.

Step 1: Create a New "Java Application" Project

1. Launch NetBeans ⇒ File ⇒ New Project...
2. Under "Categories", choose "Java" ⇒ Under "Projects", choose "Java Application" ⇒ Next.
3. In "Project Name", enter "FirstNetBeansGUI" ⇒ Choose a suitable directory for your "Project Location" ⇒ Uncheck the "Create Main class" box ⇒ Finish.

Step 2: Write a Java File "JFrame Form"

1. Right-click on the project "FirstNetBeansGUI" ⇒ "New" ⇒ "JFrame Form..." (or "Others" ⇒ "Swing GUI Forms" ⇒ "JFrame Form").
2. In "Class Name", enter "NetBeansSwingCounter" ⇒ Finish.
3. Create the GUI Components visually:
   1. From the "Platte" panel ⇒ "Swing Controls" ⇒ Drag and drop a "Label", "TextField", and "Button" into the design panel.
   2. Click on the "jLabel1" ⇒ In the "Properties" panel, enter "Count" in "text" (You can also single-click on the jLabel1 to change the text). Right-click on the jLable1 ⇒ Change Variable Name ⇒ In "New Name", enter "lblCount".
   3. Similarly, for "jTextField1" ⇒ Change the "text" to 0, and change the "Variable Name" to "tfCount" ⇒ Resize the text field if necessary.
   4. For "jButton1" ⇒ Change the "text" to "Count", and change the "Variable Name" to "btnCount".
4. Write the event handler for the button by double-clicking the button and enter the following codes

private void btnCountActionPerformed(java.awt.event.ActionEvent evt) {
   count++;
   tfCount.setText(count + "");
}

5. Create an instance variable count (just below the class declaration) as follows:

public class Counter extends javax.swing.JFrame {
   int count = 0;

Step 3: Compile & Execute

Right-click the source and select "Run File".

Step 4: Study the Generated Source Code

Expand the "Generated Code" and study how the GUI builder declare, allocate and initialize the GUI Components in the initComponents(). Note how the JButton registers an ActionEvent listener and how an inner class is used as the listener and provide the event handler actionPerformed(). Also notice that the main() method uses a Swing's worker to run the GUI on the Event-Dispatcher thread, instead of the main thread, for thread-safe operations.

public class NetBeansSwingCounter extends javax.swing.JFrame {
   int count = 0;
 
   // Constructor to setup the UI via initComponents()
   public NetBeansSwingCounter() {
      initComponents();
   }
 
   private void initComponents() {
      lblCount = new javax.swing.JLabel();
      tfCount = new javax.swing.JTextField();
      btnCount = new javax.swing.JButton();
 
      setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
 
      lblCount.setText("Counter");
      tfCount.setText("0");
 
      btnCount.setText("Count");
      // Create an anonymous inner as the listener for the ActionEvent fired by btnCount
      btnCount.addActionListener(new java.awt.event.ActionListener() {
         public void actionPerformed(java.awt.event.ActionEvent evt) {
            btnCountActionPerformed(evt);
         }
      });
 
      // Laying out the components
      // ......
  
      pack();
   }
 
   // ActionEvent handler for btnCount
   private void btnCountActionPerformed(java.awt.event.ActionEvent evt) {
      count++;
      tfCount.setText(count + "");
   }
 
   public static void main(String args[]) {
      // Setup the Look and Feel
      // .....
 
      // Run the constructor on the Event-Dispatcher Thread for thread-safe
      java.awt.EventQueue.invokeLater(new Runnable() {
         public void run() {
            new NetBeansSwingCounter().setVisible(true);
         }
      });
   }
 
   // private variables
   private javax.swing.JButton btnCount;
   private javax.swing.JLabel lblCount;
   private javax.swing.JTextField tfCount;
}