Designing a Swing GUI in NetBeans IDE

Posted on by mtoplistChuyên mục:Top List

Now that you have familiarized yourself with the GUI builder’s interface, it’s time to begin developing the UI of our ContactEditor application. In this section we’ll take a look at using the IDE’s Palette to add the various GUI components that we need to our form.

Thanks to the IDE’s Free Design paradigm, you no longer have to struggle with layout managers to control the size and position of the components within your containers. All you need to do is drag and drop the components you need to your GUI form as shown in the illustrations that follow.

Adding Components: The Basics

Though the IDE’s GUI Builder simplifies the process of creating Java GUIs, it is often helpful to sketch out the way you want your interface to look before beginning to lay it out. Many interface designers consider this a “best practice” technique, however, for the purposes of this tutorial you can simply peek at how our completed form should look by jumping ahead to the Previewing your GUI section.

Since we’ve already added a JFrame as our form’s top-level container, the next step is to add a couple of JPanels which will enable us to cluster the components of our UI using titled borders. Refer to the following illustrations and notice the IDE’s “drag and drop” behavior when accomplishing this.

To add a JPanel:

  1. In the Palette window, select the Panel component from the Swing Containers category by clicking and releasing the mouse button.

  2. Move the cursor to the upper left corner of the form in the GUI Builder. When the component is located near the container’s top and left edges, horizontal and vertical alignment guidelines appear indicating the preferred margins. Click in the form to place the JPanel in this location.

The JPanel component appears in the ContactEditorUI form with orange highlighting signifying that it is selected. After releasing the mouse button, small indicators appear to show the component’s anchoring relationships and a corresponding JPanel node is displayed in the Navigator window, as shown in the following illustration.

Next, we need to resize the JPanel to make room for the components we’ll place within it a little later, but let’s take a minute to point out another of the GUI Builder’s visualization features first. In order to do this we need to deselect the JPanel we just added. Because we haven’t added a title border yet, the panel disappears. Notice, however, that when you pass the cursor over the JPanel, its edges change to light gray so that its position can be clearly seen. You need only to click anywhere within the component to reselect it and cause the resize handles and anchoring indicators to reappear.

To resize the JPanel:

  1. Select the JPanel you just added. The small square resize handles reappear around the component’s perimeter.

  2. Click and hold the resize handle on the right edge of the JPanel and drag until the dotted alignment guideline appears near the form’s edge.

  3. Release the resize handle to resize the component.

The JPanel component is extended to span between the container’s left and right margins in accordance with the recommended offset, as shown in the following illustration.

Now that we’ve added a panel to contain our UI’s Name information, we need to repeat the process to add another directly below the first for the E-mail information. Referring to the following illustrations, repeat the previous two tasks, paying attention to the GUI Builder’s suggested positioning. Notice that the suggested vertical spacing between the two JPanels is much narrower than that at the edges. Once you have added the second JPanel, resize it such that it fills the form’s remaining vertical space.

Because we want to visually distinguish the functions in the upper and lower sections of our GUI, we need to add a border and title to each JPanel. First we’ll accomplish this using the Properties window and then we’ll try it using the pop-up menu.

To add title borders to the JPanels:

  1. Select the top JPanel in the GUI Builder.

  2. In the Properties window, click the ellipsis button (…​) next to the Border property.

  3. In the JPanel Border editor that appears, select the TitledBorder node in the Available Borders pane.

  4. In the Properties pane below, enter Name for the Title property.

  5. Click the ellipsis (…​) next to the Font property, select Bold for the Font Style, and enter 12 for the Size. Click OK to exit the dialogs.

  6. Select the bottom JPanel and repeat steps 2 through 5, but this time right-click the JPanel and access the Properties window using the pop-up menu. Enter E-mail for the Title property.

Titled borders are added to both JPanel components.

mtoplist