5.3.2.1.2 Add Other GUI-Related Components
Next let’s finish this GUI by adding some GUI-related components into this GUI container. For this application, we want to add:
1) One JPanel object that can be considered a kind of container.
2) Two JTextField objects to retrieve and hold the user’s first and last name.
3) Four JLabel objects to display the caption for each JTextField and the user’s full name as the Display button is clicked.
4) Three JButton objects, Display, Clear and Exit. The Clear button is used to clean up all content in two JTextField objects (user’s first and last name), and the Exit button is used to exit the application.
Now let’s begin to add those components one by one by dragging them from the Palette window.
If you do not see the Palette window in the upper-right corner of the IDE, choose the Windows >IDE Tools > Palette menu item to open it.
Let’s add the JPanel object first in the following operational sequence:
1) Start by selecting a Panel from the Palette window and drop it onto the JFrame.
2) While the Panel is highlighted, go to the Properties window and click on the ellipsis (. . .) button next to the Border property to choose a border style.
3) In the Border dialog, select TitledBorder from the list, type in Display Full Name in the Title field and click on OK to save the changes and exit the dialog.
4) You should now see an empty titled JFrame that says Display Full Name JPanel object. Now add the rest of GUI-related components, including four JLabels, two JTextFields and three JButtons, into this JPanel object as you see in Figure 5.9.
Next let’s rename all added components and modify JLabel4 by setting the appropriate prop-erty for that label in the Properties window. Perform the following operational sequence:
1) Double-click on jLabel1 and change the text property to First Name.
2) Double-click on jLabel2 and change the text to Last Name.
3) Double-click on jLabel3 and change the text to Full Name.
4) Click on jLabel4 and click on the ellipsis (. . .) button next to the Border property to choose a border style. In the Border dialog, select Line Border, change the border color to dark blue by clicking on the ellipsis (. . .) button next to the Color property and click on the OK to save the changes and exit the dialog. Then go to the Text property to delete the default text JLabel4 to make this an empty label. Set the preferredSize property to [100, 20] if you like.
FIGURE 5.9 A design preview of the GUI Window Form.
5) Delete the sample text from jTextField1. You can make the display text ediTable by clicking on the Text field, pausing and then clicking the Text field again. You may have to resize the jTextField1 to its original size. Repeat this step for jTextField2.
6) Change the name of jTextField1 to FirstTextField. To make that change, right-click on the jTextField1 object and select the Change Variable Name menu item from the popup menu, then enter FirstTextField into the New Name box. Click on OK to complete this rename operation.
7) Perform a similar operation to change the Name property of the jTextField2 to LastTextField and the Name property of the jLabel4 to FullNameLabel.
8) Rename the display text of jButton1 to Display. You can edit a button’s Text property by right-clicking on the button and choosing the Edit Text menu item from the popup menu. Or you can click on the button, pause, and then click again.
9) Rename the display text of jButton2 to Clear.
10) Rename the display text of jButton3 to Exit.
11) Change the Name property of the jButton1 to DisplayButton, jButton2 to ClearButton and jButton3 to ExitButton.
Your finished GUI should now look like the one that is shown in Figure 5.10.
Next let’s develop the code for each component to connect our GUI-related components with our code to process and respond to user input and display the run result.