NetBeans Tutorial: Build a Graphical User Interface

Author: Travis Suel

---

If you closed your project from the previous page, it can be opened using several methods:

• File → Open Project
• File → Open Recent Project → [name of project]
• Click on the Open Project toolbar button.
  

Create a new project. In the dialog window that opens, do the following:

1. Select Java in the Categories box (if not already selected).
2. Select Java Desktop Application (instead of Java Application as before) in the Projects box.
3. Click on the Next button at the bottom of the window.

You will then be presented with the following dialog window:

1. Name your project by editing the text in the field labeled Project Name.
2. Click on the Finish button at the bottom of the window.

The dialog window will be dismissed and NetBeans will create an empty project. Unlike the previous project, this one is more complex and has more files. Several files have been opened in the editor with DayOfWeekGUIView.java currently selected. Even though DayOfWeekGUIView.java is a source file, NetBeans is displaying a mock up of a window which can have widgets placed in it from the new pane at the right of the interface called Palette.

You already wrote the core functionality of this program in the previous tutorial. To avoid rewriting that code, copy DayOfWeekCalc.java from the previous project:

1. Right click on DayOfWeekCalc.java under the DayOfWeek project hierarchy in the Projects pane.
   
2. Click on Copy
3. Right click on dayofweekgui package under the DayOfWeekGUI project hierarchy (a package is a group of related source files).
   
4. Paste → Refactor Copy
5. A dialog window will be presented. Click on the Refactor button and the file will be copied into your new project.
   
6. Notice DayOfWeekCalc.java is now under the hierarchy of both projects.
   

To design the GUI, switch to the DayOfWeekGUIView.java tab in the editor and ensure the editor is in design mode by clicking on the Design button:

The palette containing a list of GUI widgets should be visible to the right. To build your GUI:

1. Click on the desired widget in the palette to the right.
2. Hover the mouse over the mock up in the editor (a box representing that widget will hover under the mouse).
3. When the widget is in the desired location in the mock up, left click and widget will be placed in the mock up.
4. Take some time to add and remove widgets to your design. Notice that widgets will "snap" in certain areas such as the corners and close to other widgets.
5. When you are finished, ensure that your GUI design has all the widgets shown below. Your design does not have to match the one below.
   
   Note that jLabel5 only has text in it so that its presence is clear (remove such text in your own mock up).
6. Some tips when designing your GUI:
   • A widget can be deleted by right clicking on the widget and then clicking on Delete (near the bottom of the menu).
   • The text inside of a widget can be edited by right clicking on the widget and clicking on Edit Text.
   • The size of the window can be altered by clicking and dragging the right edge, the bottom edge, or the bottom right corner of the mock up.
   • You can preview how your application will look by clicking on the Preview Design button.
     
   • If you remove all text from a label, it will be difficult to find in the mock up. To select such a label, use the Inspector pane at the bottom left of the NetBeans interface just below the Projects pane.
   • A widget's properties can be modified by using the Properties pane at the bottom right of the NetBeans interface just below the palette of widgets.
   • Organize your widgets into a logical layout.
   • Text fields should be labeled with nouns.
   • Buttons should be labeled with verbs.
   • Fields displaying output should not be editable by the user

Each of the widgets added to the mock up are represented by a variable. When you add them to the mock up, NetBeans assigns these variables a default name, i.e. jTextField1. These names are not meaningful; they do not clearly state what information is being stored in each variable. Rename each text field so their contents can be inferred from their name. For example, the text field next to the Year label should be named yearTextField. Note how the variable name indicates both the contents of the widget and that the widget is a text box. To rename a widget's variable:

1. Right click on the widget (either in the mock up or in the Inspector pane).
2. Click on Change Variable Name....
3. You will be presented with a dialog window. Enter the new name in the New Name text field and click on OK.
   
4. Do this for the following widgets:
   • The text field which solicits the year: yearTextField
   • The text field which solicits the month: monthTextField
   • The text field which solicits the day: dayTextField
   • The label which will display the results: dayResultLabel
   • The button the user will click to get the day of the week: getDayButton

It is not necessary to rename the other widgets as they are not modified while the program is running, but it is good practice to give these meaningful names as well.

Now the Get Day of Week button needs to have functionality added to it:

1. Right click on the button.
2. Events → Action → actionPerformed

This will cause the editor to switch to source mode displaying source code associated with your mock up. The editor will automatically place the cursor at a function called getDayButtonActionPerformed:

This function was generated by NetBeans when you right clicked on the button and clicked on actionPerformed. Now modify the getDayButtonActionPerformed function as follows:

You are now ready to build, run, and test your project. This time, when you run your project, your application's window will be presented.

---