使用NetBeans IDE 5.5创建向导控制台

本教程将向您展示如何使用NetBeans IDE 5.5 GUI Builder创建一个向导式控制台。在本教程中，我们将创建一个示例任务调度向导。阅读完本文之后，您应该能够很容易地建立简单或复杂的向导式UI组件。需要时间：20－30分钟

先决条件

l      用户应了解基本的Java编程语言。l      用户应能熟练使用NetBeans IDE。l      用户应已经阅读过GUI Building in NetBeans IDE 5.5教程。

教程中需要使用的软件

在开始之前，您需要在计算机上安装下列软件：l      NetBeans IDE 5.5 (下载) l      Java Standard Development Kit (JDKTM) 1.4.2 (下载) or 5.0 (下载) 版本l      Java Standard Development Kit (JDKTM) 1.4.2（下载）或者5.0版本(下载)

教程练习

l      练习1：创建一个项目 l      练习2：建立前端 l      练习3：添加功能 l      练习4：运行程序

练习1：创建一个项目

首先我们要创建一个新项目，将它命名为SchedulerWizard。1.       选择File > New Project，也可以单击IDE 工具栏中的New Project图标。2.       在Categories窗格中选择General节点。在 Projects 窗格中选择 Java Application，单击Next。3.       在 Project Name 字段输入 SchedulerWizard，指定一个路径（例如，主页目录）作为项目路径；4.       确认 Main Project 复选框被选中，取消选中 Create Main Class，如果它被选中的话。5.       单击 Finish。

练习2：构建向导前端

在这一步骤中我们将创建向导前端。我们将创建 JDialog并将所有必要的 GUI 组件添加到该对话框中。

创建基本对话框

1.       在 Project 窗口中，右键单击SchedulerWizard节点，选择 New > JDialog Form。或者选择SchedulerWizard节点，然后选择Menu File>New File(Ctrl+N)。之后将会生成 New File 对话框。在 categories 列表中选择Java GUI Forms，并在 File Types 列表中选择JDialog Form。单击Next。2.       在设置文件名和位置步骤中，在Class Name字段中建入SchedulerWizardDialog。3.       在 Package 字段中建入 my.forms。4.       单击Finish。（顺便说一句，您看到的仅仅是一个向导式组件的工作示例。）IDE在SchedulerWizardDialog.java应用程序中创建了SchedulerWizardDialog 和SchedulerWizardDialog类，并在GUI Builder调用了SchedulerWizardDialog form。请注意my.forms包已经替代了默认的包。

添加GUI组件：建立向导基础

现在我们要将JDialog对话框放入main JPanel（其他JPanel位于其中）中，同时还要放入一个 JSeparator，以及三个JButton，分别代表Back、Next/Finish和Cancel操作。对话框如下图所示：注意：本教程假设您知道如何使用 NetBeans GUI 放置组件，有关更多信息，请参考GUI Building in NetBeans IDE 5.5。在本例中需要提醒的一点是，JSeparator和三个JButtons 控件要放置在JPanel下方，而不是放在JPanel内部。如果您看不见它，请选择Windows>Palette打开 Palette。您可以使用 Palette将UI组件拖出或放回设计区域。1.        将 jPanel1重命名为 mainPanel，jButton1重命名为 backButton并在文本中填入Back，将 jButton2 重命名为 nextButton 并在文本中填入Next，jButton3 重命名为 cancelButton并在文本中填入Cancel。2.       确认您已同时选中这三个按钮，右键单击选择Same Size > Same Width，使得所有按钮大小一致。3.       在 Properties 窗口中禁用backButton并取消勾选 enabled 属性。如果找不到 Properties 窗口，请选择Windows > Properties。

添加GUI组件：建立向导屏幕图像

现在可以将屏幕图像添加到向导控制台。本教程将呈现给用户三组屏幕图像：l      第一组屏幕图像显示各种“options” l       "detailed" 屏幕图像，它依赖于第一个屏幕图像中所做的选择；l      "summary" 屏幕图像每个屏幕图像都使用一个JPanel显示。如果找不到Inspector 窗口，请选择Windows > Inspector 打开它。Inspector 窗口在当前开放表单内以树型分级的方式显示了所有组件，其中包括可视化组件和容器，例如按钮、标签、菜单、和窗格，还有非可视化组件，例如计时器和源代码。我们需要将主面板的布局设置成卡片式布局。在Inspector窗口，右键单击mainPanel JPanel，并选择 Set Layout > CardLayout。（为了避免意外关闭等情况导致程序丢失，请注意随时保存程序。）现在我们需要在主面板中添加各种JPanel。在本教程中，我们想为用户呈现一个option/welcome 屏幕图像，为要安排的任务提供名称，并指定任务应该每天运行一次还是每周运行一次，然后展示出一个每天运行屏幕图像或者每周运行屏幕图像，最终显示summary 屏幕图像，因此我们需要在mainPanel中添加四个panel 组件。1.       在Inspector窗口中右键单击mainPanel，选择 Add from Palette > Swing Containers > Panel。2.       重复第一步，在mainPanel中另外添加三个panel。3.       将 jPanel1 重命名为optionsPanel，jPanel2为 dailyPanel，jPanel3为weeklyPanel，jPanel4为summaryPanel。4.       在Inspector 窗口中选择optionsPanel，在Properties窗口中选择 Layout，选择Card Name并将名称指定为1。5.       在 Inspector 窗口中选择 dailyPanel，在 Properties 窗口中选择 Layout ，选择Card Name并将名称指定为2_1。6.       在 Inspector 窗口中选择 weeklyPanel，在 Properties窗口中选择 Layout ，选择Card Name并将名称指定为2_2。7.       在 Inspector 窗口中选择summaryPanel，在Properties窗口中选择 Layout，选择Card Name并将名称指定为3。这种命名规则使我们能够确定动态显示的屏幕图像。

设计Welcome 屏幕图像

这是第一个屏幕图像，它将提供给用户一组选项。1.       在Inspector窗口中，双击optionsPanel 开启 UI 设计器中的 optionsPanel。2.       添加两个 JLabel，一个JTextField，两个 JRadioButton，以及一个 ButtonGroup将这些 JRadioButton控件在JPanel中组合一起。3.       将 JTextField 重命名为 tfTask。4.       将第一个 label 的text文本更改为Type the name for this task。5.       将第二个 label 的text 文本更改为Perform this task：6.       分别将两个单选按钮重命名为rbDaily和rbWeekly，文本分别设为 Daily 和Weekly。7.        同时选择两个单选按钮（或分开选择），在Properties 窗口修改buttonGroup属性为 buttonGroup1（这应该是唯一显示的按钮组属性）。8.       选择 rbDaily单选按钮，在 Properties 窗口勾选selected复选框。welcome 屏幕图像显示如下：

设计每日任务屏幕图像

如果用户在welcome 屏幕图像选择了Daily 单选按钮，这将是展示给用户的第二个屏幕图像。1.       在 Inspector 窗口中双击 dailyPanel打开UI 设计器。2.       放置各种UI组件，让它看上去像一个每日任务屏幕图像。因为本教程并不依赖于放置在这个屏幕图像中的组件，所以您可以根据自己的选择添加/放置组件。3.       下面是一个示例模型：

设计每周任务屏幕图像

如果用户在 welcome 屏幕图像选择了 Weekly 单选按钮，这将是展示给用户的第二个屏幕图像。1.       在 Inspector 窗口双击 weeklyPanel 打开UI 设计器。4.       放置各种UI组件，让它看上去像一个每周任务屏幕图像。因为本教程并不依赖于放置在这个屏幕图像中的组件，所以您可以根据自己的选择添加/放置组件。下面是一个示例模型：

设计Summary 屏幕图像

这个屏幕图像将用户的选择汇总。我们在此只显示了任务名称和种类，而实际的向导控制台将会显示所有被选选项的完整信息。1.       在 Inspector 窗口中双击 summaryPanel，打开UI 设计器。2.       在窗格上放置一个 JTextArea。3.       将 jTextArea1重命名为taSummary。4.       在 Inspector 窗口选择 taSummary，然后在 Properties 窗口单击省略号 (...)按钮设置背景属性，从对话框顶端的Select Mode下拉菜单中选择 Form Connection。之后在 User Code字段输入 getBackground()，单击OK。这使运行时文本框和父组件的背景颜色保持一致。5.       在 Inspector 窗口中选择taSummary，在 Properties 窗口中勾选 lineWrap和 wrapStyleWork复选框。6.       下面是示例图形：

练习3：添加功能

在本练习中，我们将要为 back、next 和cancel 按钮添加功能。使用一个基于简单状态的功能，我们可以决定要显示的屏幕图像以及要启用/禁用的按钮。

添加事件处理器

在 Inspector 窗口中，双击 backButton。这可以添加事件处理器并启用Source 视图模式。使用 Source Editor 顶端的 Design 按钮可以切换到Design视图，并为 nextButton 和cancelButton 生成事件处理器。我们还需要为optionsPanel 中的 rbDaily 和rbWeekly 单选按钮生成事件处理器。下列代码将在Source视图模式自动生成和显示：

private void nextButtonActionPerformed(java.awt.event.ActionEvent evt) {

    // TODO add your handling code here:

}

private void backButtonActionPerformed(java.awt.event.ActionEvent evt) {

    // TODO add your handling code here:

}

private void cancelButtonActionPerformed(java.awt.event.ActionEvent evt) {

    // TODO add your handling code here:

}

private void rbDailyActionPerformed(java.awt.event.ActionEvent evt) {

    // TODO add your handling code here:

}

private void rbWeeklyActionPerformed(java.awt.event.ActionEvent evt) {

    // TODO add your handling code here:

}

Cancel 按钮功能

在本教程中我们只是想关闭对话框。而实际示例会询问用户是真正要取消和/或终止所有后台工作线程。在cancelButton的事件处理器中，编写下列代码：

private void cancelButtonActionPerformed(java.awt.event.ActionEvent evt) {

    dispose();

}

Next 按钮功能

在next按钮事件中，我们想知道当前屏幕图像的下一个被显示屏幕图像。 如果这已经是第一个屏幕图像， back按钮将不可用（默认设置）；如果是第二个屏幕图像，它应该可用。如果这是最后一个屏幕图像，那么 next 屏幕图像按钮的文本应该显示为 Finish。实际上有很多编码方法都可以达到这个要求。我们使用card name确定下一个显示的屏幕图像。我们需要添加一个实例变量来控制当前可见的card 编号。将这个变量命名为 currentDisplayNum，可用数字有1、2、3。我们还需要添加另一个实例变量控制“details”（第二组）屏幕图像，将这个变量命名为 currentDetailNum。它将按照用户在welcome 屏幕图像所做的选择而改变。

public class SchedulerWizardDialog extends javax.swing.JDialog {

  private int currentDisplayNum = 1;

  private int currentDetailNum = 1;

将下列代码输入Next 按钮的事件处理方法中。

private void nextButtonActionPerformed(java.awt.event.ActionEvent evt) {

    //determine next card to display

    CardLayout cl = (CardLayout)(mainPanel.getLayout());

    String card = String.valueOf(currentDisplayNum+1);

    if(currentDisplayNum == 1) {

       //need to show second screen

       card = card + "_" +String.valueOf(currentDetailNum);

       //enable back button

       backButton.setEnabled(true);

    }else if(currentDisplayNum == 2) {

       //need to show last screen - update summary

       updateSummary();

       nextButton.setText("Finish");

    }else if(currentDisplayNum == 3) {

       //time to finish the task - perform actual scheduling logic

       //dispose

       dispose();

    }

    //show card

    cl.show(mainPanel, card);

    //update display number

    currentDisplayNum++;

}

Back 按钮功能

我们根据Next按钮的逆向逻辑确定要显示的屏幕图像。下面是Back 按钮事件处理方法的代码。

private void backButtonActionPerformed(java.awt.event.ActionEvent

evt) {

    //determine previous card to display

    CardLayout cl = (CardLayout)(mainPanel.getLayout());

    String card = String.valueOf(currentDisplayNum-1);

    if(currentDisplayNum == 3) {

        //need to show second screen

        card = card + "_" +String.valueOf(currentDetailNum);

        //change next button text

        nextButton.setText("Next");

    }else if(currentDisplayNum == 2) {

        //need to show first screen - disable back button

        backButton.setEnabled(false);

    }else if(currentDisplayNum == 1) {

        //we are on first screen, nothing to do

    }

    //show card

    cl.show(mainPanel, card);

    //update display number for non-1 numbers

    currentDisplayNum = currentDisplayNum ＞ 1?(--currentDisplayNum):1;

}

Daily/Weekly 单选按钮功能

在这些单选按钮的事件处理器中，我们想让 currentDetailNum 的值做相应更新。Daily 单选按钮使用1（默认）， Weekly 单选按钮使用2。这种形式还可用于增加可供用户选择的选项。下面是事件处理代码。它们非常简单。

private void rbDailyActionPerformed(java.awt.event.ActionEvent evt) {

    currentDetailNum = 1;

}

private void rbWeeklyActionPerformed(java.awt.event.ActionEvent evt) {

    currentDetailNum = 2;

}

Summary 屏幕图像功能

在next按钮功能中，我们调用了一个updateSummary 方法。这个方法用来显示 summaryPanel控件中文本内容的汇总信息。下面的示例代码显示它们是如何实现的。

private void updateSummary() {

    taSummary.setText("You are about to create task with name" + tfTask.getText());

}

当然，在实际的应用程序中，您可能还想从用户所选择的各种选项中生成一份详细的汇总信息。

Main方法

NetBeans IDE已经为您写好了默认的main方法代码，用来在 JFrame中显示 SchedulerWizardDialog，它应该和下面的代码一致：

/**

* @param args the command line arguments

*/

public static void main(String args[]) {

    java.awt.EventQueue.invokeLater(new Runnable() {

        public void run() {

             new SchedulerWizardDialog(new javax.swing.JFrame(), true).setVisible(true);

        }

    });

}

我们已经提供了所有必要的功能，现在就可以马上构建并运行这个程序了。看到我们使用如此简单的程序实现了这些功能时，您会感到自豪。

练习4：运行程序

在本练习中将构建并运行我们的程序，同时检查输出1.       构建主项目 (F11) 2.       运行主项目 (F6) 程序运行之后显示如下：单击 next 将会进入下面的屏幕图像：如果选择了 Weekly，将会显示下面的屏幕图像：summary 屏幕图像如下：单击 Finish 终止这个程序。（我们没有编写任何调用 System.exit(0) 的代码，因此程序不会自动终止。选择Build > Stop Build/Run可以终止这个程序）

接下来：

本教程仅仅介绍了如何使用NetBeans创建向导式GUI组件的一些基本概念。完整的向导可以提供更详细的用户经验，但是本质与此教程一致。

相关主题

想了解更多信息请查看下列链接：l      Java GUIs and Project Matisse Learning Trail ，包含了使用NetBeans GUI Builder和Project Matisse建立java 图形化用户接口（GUI）的相关文章、指南和教程。l      GUI Building Tutorial ，详细的NetBeans GUI Builder教程l      Matisse GUI Builder FAQ ，关于使用NetBeans GUI Builder的技巧和方法的汇总  本文国际来源：

http://www.netbeans.org/kb/55/wizard-tutorial-uzi.html