Documentation

The Java™ Tutorials
Hide TOC
Creating the CelsiusConverter GUI创建CelsiusConverter GUI
Trail: Creating a GUI With Swing
Lesson: Learning Swing with the NetBeans IDE使用NetBeans IDE学习Swing

Creating the CelsiusConverter GUI创建CelsiusConverter GUI

This section explains how to use the NetBeans IDE to create the application's GUI. 本节介绍如何使用NetBeans IDE创建应用程序的GUI。As you drag each component from the Palette to the Design Area, the IDE auto-generates the appropriate source code.当您将每个组件从调色板拖动到设计区域时,IDE将自动生成相应的源代码。

Step 1: Set the Title步骤1:设置标题

First, set the title of the application's JFrame to "Celsius Converter", by single-clicking the JFrame in the Inspector:首先,通过在检查器中单击JFrame,将应用程序的JFrame标题设置为“Celsius Converter”:

Selecting the JFrame

Selecting the JFrame选择JFrame

Then, set its title with the Property Editor:然后,使用属性编辑器设置其标题:

Setting the Title

Setting the Title设置标题

You can set the title by either double-clicking the title property and entering the new text directly, or by clicking the Ellipsis button button and entering the title in the provided field. 您可以通过双击标题属性并直接输入新文本,或者通过单击Ellipsis button按钮并在提供的字段中输入标题来设置标题。Or, as a shortcut, you could single-click the JFrame of the inspector and enter its new text directly without using the property editor. 或者,作为快捷方式,您可以单击检查器的JFrame并直接输入其新文本,而无需使用属性编辑器。

Step 2: Add a JTextField步骤2:添加JTextField

Next, drag a JTextField from the Palette to the upper left corner of the Design Area. 接下来,将JTextField从调色板拖动到设计区域的左上角。As you approach the upper left corner, the GUI builder provides visual cues (dashed lines) that suggest the appropriate spacing. 当您接近左上角时,GUI生成器将提供建议适当间距的视觉提示(虚线)。Using these cues as a guide, drop a JTextField into the upper left hand corner of the window as shown below:使用这些提示作为指导,将JTextField放到窗口的左上角,如下所示:

Adding a JTextField

Adding a JTextField添加JTextField

You may be tempted to erase the default text "JTextField1", but just leave it in place for now. 您可能会试图删除默认文本“JTextField1”,但现在就把它留在原处。We will replace it later in this lesson as we make the final adjustments to each component. 我们将在本课稍后对每个组件进行最终调整时替换它。For more information about this component, see How to Use Text Fields. 有关此组件的详细信息,请参阅如何使用文本字段

Step 3: Add a JLabel步骤3:添加JLabel

Next, drag a JLabel onto the Design Area. 接下来,将JLabel拖动到设计区域。Place it to the right of the JTextField, again watching for visual cues that suggest an appropriate amount of spacing. 将其放置在JTextField的右侧,再次观察暗示适当间距的视觉提示。Make sure that text base for this component is aligned with that of the JTextField. 确保此组件的文本库与JTextField的文本库对齐。The visual cues provided by the IDE should make this easy to determine.IDE提供的视觉提示应使其易于确定。

Adding a JLabel

Adding a JLabel添加JLabel

For more information about this component, see How to Use Labels. 有关此组件的详细信息,请参阅如何使用标签

Step 4: Add a JButton步骤4:添加JButton

Next, drag a JButton from the Palette and position it to the left and underneath the JTextField. 接下来,从调色板中拖动JButton,并将其放置在JTextField的左侧和下方。Again, the visual cues help guide it into place.同样,视觉提示有助于将其引导到位。

Adding a JButton

Adding a JButton添加JButton

You may be tempted to manually adjust the width of the JButton and JTextField, but just leave them as they are for now. 您可能想手动调整JButtonJTextField的宽度,但现在就让它们保持原样。You will learn how to correctly adjust these components later in this lesson. 在本课程的后面部分,您将学习如何正确调整这些组件。For more information about this component, see How to Use Buttons. 有关此组件的详细信息,请参阅如何使用按钮

Step 5: Add a Second JLabel步骤5:添加第二个JLabel

Adding a Second JLabel

Adding a Second JLabel添加第二个JLabel

Finally, add a second JLabel, repeating the process in step 2. 最后,添加第二个JLabel,重复步骤2中的过程。Place this second label to the right of the JButton, as shown above.将第二个标签放在JButton的右侧,如上图所示。


Previous page: NetBeans IDE Basics
Next page: Adjusting the CelsiusConverter GUI