Abstract Interface to Prototype Implementation

Part 3: Making the interface more active by responding to events

In part 2, we began adding actual widgets to the interface. Visually they give the appearance of a working application but pressing the button doesn't seem to make anything happen. A working application uses events generated by user interactions to cause specific functions to be executed in response.

Figure 5: The prototype now generates place holder source text and shows more button features.

These steps continue from where part 2 left off. It is assumed that your project is open in Netbeans. The JFrame class that is being edited (PolyMaker) should be open and visible in the GUI designer.

1: Selecting the POVray button as an event source

a. Click the "Connection" icon at the top of the Design area (it looks like 2 boxes linked by arrows).
This puts you into connection mode.
b. The instructions will tell you to "Select the component that will generate the event". Select the POVray button.
c. Select the object to receive the event (the target object), in this case, the textArea. The Connection Wizard will open to let you specify the source event as shown below in Figure 6.

Figure 6: The Connection Wizard allows selection of the source event. (step 1d)

d. GUI widgets can often generate many different types of events. In this case, the source object is a button and for buttons the most important event is usually the action event. Under the action folder, select the actionPerformed option. The wizard will generate a method name to handle that event (see Figure 6). Click next.

2: Changing the text of the target text area

The target object was already selected as the text area renamed to convertedCode. The wizard allows us to specify what should happen to the target object when the event is received.
a. Check the "Set Property" radio button and select the "text" property as shown in Figure 7. Click next.

Figure 7: Setting the target operation with the Connection Wizard. (step 2a)

b. So far, we have indicated that the text of the text area should change when the button is clicked but we haven't told the system what to change it to. Since we are still prototyping, we choose an easy method. Select the "Value" radio button to define a specific String to set the text to: "// POVray source generated by PolyMaker". (see Figure 8) Click "Finish".

Figure 8: Determining how the text of a text area is set with the Connection Wizard. (step 2b)

c. After hitting "Finish" you may be taken to the source code view showing the java code for the newly generated actionPerformed method. You can return to the visual design view by clicking on "Design". Save your work and run your code. Observe what happens when you click the "POVray Prism" button. The text area should be updated.

3: Creating and hooking up a second button

Hooking up components can also be done without the Connection Wizard.
a. Select the POVray button and use copy-paste to create a new button.
b. Change the variable name of the new button to be "conv2JavaArray".
c. Change its text property to be "Java Array" so it appears with the proper text on the screen.
d. Resize and reposition as needed.
e. Double-click on the button and you will be taken to the source code for its actionPerform method.
    Nearby you should see the code for the POVray button already completed earlier.
    Modify the actionPerform method for the "Java Array" button so that it sets the text of the
    text area to be "// Java array source generated by PolyMaker"
f. Return to the visual design view by clicking on "Design". Save your work and run your code. Observe what happens when you click the "Java Array" button. The text area should be updated.

4: Adding the copy functionality

The source code generated by PolygonMaker is designed to be used by other programs. To do this, it should send the source code it creates into the clipboard so it can be pasted into another application. Actually, this functionality is already in the prototype since it is provided by the textArea. The user must "recall" how to make a selection and copy it into the clipboard with the keyboard. To make this easier for the user - lessen the articulatory distance of this function, we will add a copy button.

a. Create a new button. Set its text to read "Copy Source to Clipboard". Give it a variable name of "copySource".
b. Double-click on the button to jump to the source code for its actionPerformed method.
c. Change the body of that method to be:

        convertedCode.selectAll();
        convertedCode.copy();

Notice that once you type "convertedCode." the system offers suggestions about what the possible methods that apply to this object. It is a textArea and we want to select all of it and send it to the clipboard.

d. Save your work. Run your application. It should look similar to Figure 5. Try out the new functionality.

A Series on Moving from an Abstract Interface to a Prototype Implementation

Part 1: Introduces the Netbeans GUI Builder by mocking up abstract widgets using labels.
Part 2: Converting the abstract components to actual widgets.
Part 3: Making the interface more active by responding to events.

Next try similar steps using Eclipse and WindowBuilder. Follow the Abstract Interface Prototype Implementation with WindowBuilder handout.

Netbeans has a Help Menu where you can learn more about the Netbeans GUI Builder.
Eclipse also has a Help feature where you can learn more about WindowBuilder.
There are also many online sources of information about GUI building with WindowBuilder and also with Netbeans and building Swing interfaces.

CS484 Assignment: Implementing a Prototype to Demo your Scenario

Michael Wainer, Department of Computer Science, SIUC