Creating GUI with NetBeans

1. Mount the required filesystem in NetBeans. Right click on the filesystem to invoke the context menu. In the context menu, select New, Java GUI Forms, JFrame.

step 1

2. In the New Object Name dialog, type the filename and click Finish. The Form Editor shown below will be displayed along with the JFrame (1), component palette (2), component inspector (3) and the selected component's properties (4). Any of the Swing or other components can be dragged on to the Form Editor.
An alternate way of adding components is to select the container in the component inspector and then select Add From Palette and then select the desired component. Follow any of the approaches to add  the components.

Note: By default, JFrame has a BorderLayout and JPanel has a FlowLayout. To change the layout, select Layout tab in the component property or select setLayout from the context menu of the highlighted component.

Step 2

NetBeans will generate the code for the GUI that you have just created. You can view the Source Code below. The code in blue background cannot be modified because NetBeans uses it to generate and maintain the visual interface.

/*
 * DemoGUI.java
 *
 * Created on 1 August 2003, 21:30
 */
/**
 *
 * @author  Zankhana
 */
public class DemoGUI extends javax.swing.JFrame {
   
    /** Creates new form DemoGUI */
    public DemoGUI() {
        initComponents();
    }
   
    /** This method is called from within the constructor to
     * initialize the form.
     * WARNING: Do NOT modify this code. The content of this method is
     * always regenerated by the Form Editor.
     */
      private void initComponents() {
        buttonPanel = new javax.swing.JPanel();
        testButton = new javax.swing.JButton();
        demoLabel = new javax.swing.JLabel();

        addWindowListener(new java.awt.event.WindowAdapter() {
            public void windowClosing(java.awt.event.WindowEvent evt) {
                exitForm(evt);
            }
        });

        testButton.setText(" Click Me !");
        buttonPanel.add(testButton);

        getContentPane().add(buttonPanel, java.awt.BorderLayout.SOUTH);

        demoLabel.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        getContentPane().add(demoLabel, java.awt.BorderLayout.CENTER);

        pack();
    }

    /** Exit the Application */
    private void exitForm(java.awt.event.WindowEvent evt) {
        System.exit(0);
    }
   
    /**
     * @param args the command line arguments
     */
    public static void main(String args[]) {
        new DemoGUI().show();
    }
      // Variables declaration - do not modify
    private javax.swing.JLabel demoLabel;
    private javax.swing.JButton testButton;
    private javax.swing.JPanel buttonPanel;
    // End of variables declaration
}

3. Double click on the component where the event handling has to be added such as testButton. When you click double click on any component, NetBeans adds appropriate event listener in the code. Fro example, NetBeans added the following code for ActionListener in initComponents method because of double clicking on testButton.

Note: The event handling is done as an annonymous internal class. Do not implement the interface(s) in the class signature such as ActionListener.

        testButton.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                testButtonActionPerformed(evt);
            }
        });

The Source Editor will be opened where you can add the handling code.

    private void testButtonActionPerformed(java.awt.event.ActionEvent evt) {
        // Add your handling code here:
        demoLabel.setText ("You clicked on the Test Button.") ;
    }

4. To add a menu, drag JMenuBar on to the Frame. When you add a JMenuBar (1), NetBeans automatically adds a Jmenu object to the menu bar as well. Now you can add JMenuItems (2)  to the JMenu or add other JMenus to the JMenuBar. To add a seperating line in the menu, add JSeperator. To make a nested menu, add a JMenu to the JMenu.

Step 3

JMenus and JMenuItems listen to Action events. JMenuItems cannot be seen on the form editor. Either Select Test Form (3) or execute the code to view them. When you test the form, following image will be displayed.

Step 4

Exercise:

Create EntryDBView that accepts the required fields from the user, has a status label and a menu to perform different actions; Add, Update, Delete and Exit. You should also add a button to allow search by ID. Use DBBroker class to connect and access the database.

Note: Always copy .form file with the .java file to be able to modify the GUI later.

Zankhana (August 2003)