当前页面: 开发资料首页 → Netbeans 专题 → Creating a wizard console in NetBeans IDE 5.5

Creating a wizard console in NetBeans IDE 5.5

摘要: The following tutorial shows you ways to create a wizard style console using NetBeans IDE 5.5 GUI builder. In this tutorial, we will create a sample task scheduling wizard. After going through the tutorial, you should be able to create simple or complex wizard style UI components with ease

The following tutorial shows you ways to create a wizard style console using NetBeans IDE 5.5 GUI builder. In this tutorial, we will create a sample task scheduling wizard. After going through the tutorial, you should be able to create simple or complex wizard style UI components with ease.

Expected duration: 20-30 minutes

Exercise 1: Creating a Project

The first step is to create the project. We will name this project as SchedulerWizard.

1. Choose File > New Project. Alternately, you can click the New Project icon in the IDE toolbar.
2. In the Categories pane, select the General node. In the Projects pane, select Java Application. Click Next.
3. Enter SchedulerWizard in the Project Name field and specify a path (for example, your home directory) as the project location.
4. Ensure that the Set as Main Project checkbox is selected. Deselect Create Main Class if it is selected.
5. Click Finish.

Exercise 2: Building the Wizard Front End

In this step we will create the wizard front end. We will create a JDialog and place all the necessary GUI components in the dialog.

Creating Base Dialog

1. In the Projects window, right-click the SchedulerWizard node and choose New > JDialog Form. Alternatively, select SchedulerWizard node, choose menu File>New File (Ctrl+N). This will bring New File dialog box. Select Java GUI Forms in the categories list and select JDialog Form in File Types list. Choose Next.
2. In the Name and Location Step, provide SchedulerWizardDialog in the Class Name field.
3. Provide my.forms in the Package field.
4. Click Finish.

(By the way, you just saw a working example of a wizard style component.)

The IDE creates the SchedulerWizardDialog form and the SchedulerWizardDialog class within the SchedulerWizardDialog.java application, and opens the SchedulerWizardDialog form in the GUI Builder. Notice that the my.forms package replaces the default package.

Adding GUI Components: Creating Wizard Base

We are going to populate the JDialog box with one main JPanel (which will host other JPanel), a JSeparator and three JButton that represent Back, Next/Finish and Cancel operations. The dialog box will look like this:

Note: This tutorial assumes you know how to lay out components using the NetBeans GUI Builder. Please see GUI Building in NetBeans IDE 5.5 for more information. One thing to note is that in the example, the JSeparator and three JButtons are below the JPanel, not inside it.

Select Windows > Palette to open the Palette if you don't see it. You use the Palette to drag and drop UI components to the design area.

1. Rename the jPanel1 as mainPanel, jButton1 as backButton with text Back, jButton2 as nextButton with text Next and jButton3 as cancelButton with text Cancel.
2. Make sure you select all three buttons simultaneously, right click and select Same Size>Same Width so that all buttons look like same size.
3. Make backButton disabled by unchecking enabled property in the Properties window. Select Windows > Properties to open the Properties if you don't see it.

Adding GUI Components: Creating Wizard Screens

It is time to add screens to our wizard console. For this tutorial, we want to present the user with three sets of screens:

• The first screen showing various "options"
• One of the "detailed" screens depending upon the choice made in first screen
• The "summary" screen

Each screen will be represented by a JPanel.

Choose Windows > Inspector to open the Inspector if you don't see it. The Inspector window displays a tree hierarchy of all components contained in the currently opened form. Displayed items include visual components and containers, such as buttons, labels, menus, and panels, as well as non-visual components such as timers and data sources.

We need to set the main panel’s layout to CardLayout. In Inspector window, right-click the mainPanel JPanel and choose Set Layout > CardLayout. (Don’t forget to save your project occasionally to avoid losing progress in case of an accidental shutdown etc.)

Now we need to add various JPanels in the main panel. For this tutorial, we want to present user an option/welcome screen to provide a name for the task to be scheduled and to specify if the task should run daily or weekly, then present a daily screen or a weekly screen, and finally present a summary screen. So, we should add four panels to mainPanel.

1. Right-click mainPanel in the Inspector window and choose Add from Palette > Swing Containers > Panel
2. Repeat step 1 to add three more panels in the mainPanel.
3. Rename jPanel1 as optionsPanel, jPanel2 as dailyPanel, jPanel3 as weeklyPanel and jPanel4 as summaryPanel.
4. Select optionsPanel in Inspector Window, then in the Properties Window select Layout, select Card Name and specify 1.
5. Select dailyPanel in Inspector Window, then in the Properties Window select Layout, select Card Name and specify 2_1.
6. Select weeklyPanel in Inspector Window, then in the Properties Window select Layout, select Card Name and specify 2_2.
7. Select summaryPanel in Inspector Window, then in the Properties Window select Layout, select Card Name and specify 3.

This naming scheme will allow us to determine the screen to display dynamically.

Designing the Welcome Screen

This is the first screen. This will present the user with a set of options to choose from.

1. In the Inspector Window, double click on optionsPanel to open the optionsPanel in the UI designer.
2. Add two JLabel, a JTextField, two JRadioButton and a ButtonGroup to group these JRadioButton together in the JPanel.
3. Rename JTextField to tfTask.
4. Change text of first label as Type the name for this task.
5. Change text of second label as Perform this task:.
6. Rename radio buttons as rbDaily with text Daily and rbWeekly with text Weekly respectively.
7. Select both radio buttons simultaneously (or separately), and in the Properties Window, change the buttonGroup Property to buttonGroup1. (This should be the only displayed button group property.)
8. Select the rbDaily radio button, and in the Properties Window, check selected checkbox.

The welcome screen should look like this.

Designing the Daily Task Screen

This is the second screen that will be presented to the user if he selects the Daily radio button on the welcome screen.

1. Double click on dailyPanel in the Inspector Window to open it in the UI designer.
2. Place various UI components to make it look like a daily task screen. You can add/place components according to your own choice because this tutorial does not depend on the components placed in this screen.
3. The following is a sample figure of how it could look like:

Designing the Weekly Task Screen

This is the second screen that will be presented to the user if he selects Weekly radio button on the welcome screen.

1. Double click on weeklyPanel in the Inspector Window to open it in the UI designer.
2. Place various UI components to make it look like a weekly task screen. You can add/place components according to your own choice because this tutorial does not depend on the components placed in this screen.
3. The following is a sample figure of what it could look like:

Designing the Summary Screen

This is the screen that should summarize the user's choices. We will only show the task name and the type of task, a real wizard console would show complete details of all the options selected.

1. Double click summaryPanel in the Inspector Window to open it in the UI designer.
2. Place a JTextArea on the panel.
3. Rename jTextArea1 as taSummary.
4. Select taSummary in the Inspector Window. In the Properties Window click the ellipsis (...) button for the background property. Choose Form Connection from the Select Mode drop-down at the top of the dialog. Then enter getBackground() in the User Code field and click OK. This will allow the text area to have the same background color as the parent component at runtime.
5. Select taSummary in the Inspector Window, in the Properties Window check lineWrap and wrapStyleWork checkboxes.
6. The following is a sample figure of what it will look like:

Exercise 3: Adding Functionality

In this exercise, we are going to add functionality to the back, next and cancel button. Using a simple state based functionality, we will determine which screen we want to show and which buttons to enable/disable.

Adding Event Handlers

In the Inspector Window, double click backButton. This will add an event handler and the Source view will be enabled. Switch back to Design view using the Design button at the top of the Source Editor and generate event handlers for nextButton and cancelButton as well. We also need to generate event handlers for our radio buttons in optionsPanel - rbDaily and rbWeekly. The following code should automatically be generated and displayed in the Source View mode.

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 Button Functionality

For this tutorial, we simply want to dismiss the dialog box. A real world example would ask the user to really cancel and/or terminate any background working threads, etc. In the cancelButton's event handler, write the following code:

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

Next Button Functionality

In the next button event, we would like to know which screen to display depending upon the currently displayed screen. If this is the first screen, the back button should be disabled (by default it is); for the second screen it should be enabled. If it is the last screen, the next screen button's text should display Finish. There are various coding techniques to achieve this. We will use the card names to determine which screen to show next.

We need to add an instance variable to manage the currently visible card number. Let's name this variable as currentDisplayNum. The possible values for this variable are 1, 2 and 3.

We also need another instance variable to manage the "details" (the second set of) screens. Let's name this variable as currentDetailNum. This will be modified depending upon the choice the user selects on the welcome screen.

public class SchedulerWizardDialog extends javax.swing.JDialog {
  private int currentDisplayNum = 1;
  private int currentDetailNum = 1;

Place the following code in the Next button event handler method.

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 Button Functionality

Following the reverse logic of the Next button, we will determine which screen to display. The following is the code for the Back button event handler method.

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 Radio Buttons Functionality

In the event handlers for these radio buttons, we want to update currentDetailNum accordingly. We are using 1 for the Daily radio button (the default) and 2 for the Weekly radio button. The same pattern can be followed to increase the options available for the user to choose from. The following is the event handling code. It’s so simple.

private void rbDailyActionPerformed(java.awt.event.ActionEvent evt) {
    currentDetailNum = 1;
}

private void rbWeeklyActionPerformed(java.awt.event.ActionEvent evt) {
    currentDetailNum = 2;
}

Summary Screen Functionality

In the next button functionality, we called an updateSummary method. This method’s job is to display the summary in the text area available in summaryPanel. The following sample code displays how to do so.

private void updateSummary() {
    taSummary.setText("You are about to create task with name" + tfTask.getText());
}

Of course, for real world applications, you would want to generate a detailed summary from the various options that the user has selected.

The Main Method

There should be a default main method already written for you by the NetBeans IDE to display the SchedulerWizardDialog in a JFrame. It should match the following code:

/**
 * @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);
        }
    });
}

We have provided all the necessary functionality, and now it's time to build and run the program and feel proud of what we have achieved with so little programming.

Exercise 4: Running the Program

In this exercise we will build and run our program and examine the output.

1. Build main project. (F11)
2. Run main project. (F6)

The following output should be displayed:

Pressing next should bring the following screen:

Or if Weekly was selected, the following screen would be shown:

And the summary screen:

Pressing Finish should dismiss the program. (The program will not terminate though because we haven't coded any System.exit(0) call. To terminate the process, choose Build > Stop Build/Run.

What’s Next

This tutorial just scratches the surface and introduces basic concepts involved in creating wizard-like GUI components using NetBeans. A full blown wizard may provide a more detailed user experience, but essentially it will follow the same pattern as described in this tutorial.

Related Topics

For more information see the following links:

• Java GUIs and Project Matisse Learning Trail   A full list of articles, guides and tutorials for creating Java graphical user interfaces (GUIs) using Project Matisse, the NetBeans GUI builder.
• GUI Building Tutorial  Detailed NetBeans GUI Builder tutorial.
• Matisse GUI Builder FAQ  A collection of useful tips and tricks for using NetBeans GUI Builder.