Tutorial 2

GUI Elements and Control Variables

1. Make sure that you're looking at the 'Design' view, in the main NetBeans.org window.
2. In the 'Palette' (in the upper-right corner of the window by default, use Window >> Palette if you don't see it), Left-Mouse-Button click once on the JButton.
3. Move your mouse over the design (picture) of the window.  You should see the new button, attached to your mouse pointer.  Move the button to the lower-right-ish corner of the window, and then Left-Mouse-Button click once to place the button there.
4. Change the text that is displayed on the button to 'Quit'.  You can do this in one of two ways
   1. Left-Mouse-Button double-click on button, and then edit the displayed directly
   2. Left-Mouse-Button click on the button, and in the Properties window to the right of the picture, and below the Palette window (Window>>Properties, if you don't see it), scroll down till you find text, and edit it by Left-Mouse-Button clicking once on the word jButton1.
5. In order to add an event handler to the button, you will need to Right-Mouse-Button single click on the picture of the 'Quit' button, then select Events >> Action >> ActionPerformed.
6. NetBeans will automatically generate the basic code to respond to the button being clicked.  You will need to add a single line of code to this
   private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
       System.exit(0);
   }
7. Build and run the Solution.

1. Open the Palette (Window >> Palette)
2. Drag a JLabel to the window, perhaps to the left of the Quit button.
   1. Change the text on the label to be "0".  This is done in the same way that we changed the text of the JButton, above.
   2. Change the name control variable that represents the Label by Right-Mouse-Button single-clicking on the label, and selecting Change Variable Name....  Change the variable name to txtEchoAdd.
   3. Change the size of the label by Left-Mouse-Button single clicking on the label, and then Left-Mouse-Button click-and-dragging on a side, or on the top/bottom, or one of the corners.
   4. Choose a border that appeals to you by Left-Mouse-Button single-clicking on the label, then scrolling the Properties window down till you find border (which is under the 'Other Properties' category).  Left-Mouse-Button single-click on the <None> to the right of it, and when you're presented with a number of choices in the dialog box, pick one that you like.  This tutorial will use the 'LineBorder' style
3. Drag another JLabel to the window, perhaps to the left of the previous one.  Change the text on the label to be "Button Clicks:"  Since our program will never change this element in any way, we don't need to give it a specific name, etc.

1. Drag a JButton above the "Button Clicks" label.
   1. Change the text of the JButton to "Click to Add"
   2. Change the name of the control variable (by Right-Mouse-Button single-clicking on the JButton, then selecting Change Variable Name...) to something like btnAdd.

1. Left-Mouse-Button single click the "Click to Add" button to select it, then Right-Mouse-Button click the button and choose Events >> Action >> ActionPerformed to add the event handler.

1. At this point, NetBeans should have put you into the 'Source' view.  Scroll up to where the 'public class SwingExampleFrame extends javax.swing.JFrame {'line is, and add a private variable private int m_OkCount = 0;
2. Within the btnAddActionPerformed() function, add the following variables
   private void btnAddActionPerformed(java.awt.event.ActionEvent evt) {
        m_OkCount++;
        txtEchoAdd.setText( Integer.toString(m_OkCount ) );
   }

• In the  project window, click
  1. Build >> Build Main Project
  2. Run >> Run Main Project to run
  
  Figure 2.1 - Application Window