Abstract Interface to Prototype Implementation

Part 1: Introduction

An abstract interface is useful for roughing out the basic capabilities of what an interaction space should do. This can easily be done using paper and post-it notes (different colors might be used to represent different types of interaction). After some more refinement of your ideas, decisions must be made about how the abstract components will actually be implemented. Screen sketches and paper prototypes are often useful at this stage. Visual Interface development tools may also be useful as the system moves towards development.

Here we show how the Netbeans interface builder can be used to construct a prototype implementation. To start with, the abstract interface, as shown in Figure 1 is created. This program, PolygonMaker, is designed to allow users to enter point values which are then converted into different source code for other applications that construct polygons. Different interaction controls are abstractly represented on paper with post-it notes but here using images on JLabels.

Figure 1: A screen shot of the abstract interface for PolygonMaker


1. Create a new Netbeans Project

a. New Project, "Java Application", hit "Next >"
b. Name your project "polyMaker".
    UNCHECK: Create Main Class
    CHECK: Set as Main Project
c. Pick a sensible location/folder to use (not directly on your desktop)
d. Hit "Finish"

* There is a "Rename" action on the right-menu when a project is selected

2. Create a package and JFrame class

a. View your project directories, there are no source files yet.
b. Select and right-menu "Source Packages"
c. Under "New" select "Java Package" and create "polymaker". Hit "Finish".
d. Select and right-menu the new "polymaker" package.
e. Under "New" select "JFrame Form" and create "PolyMaker". Hit "Finish".

* PolyMaker is a Java class that extends JFrame

Netbeans recognizes that this is a visual class and opens the GUI designer. You should see an empty rectangle, your empty JFrame, and a palette of interface widgets.



xyEntryMockup.png



convTrigMockup.png

convDataMockup.png
Figure 2: Images used as indications of abstract interface components.

3. Add abstract components to the JFrame

Using the images above, the abstract interface can be recreated.
a. Select "Label" from the Palette and create a label in the frame
b. While the label is selected, edit its properties by clicking the "..." on its icon properties.
Icons can be used to load images for display on labels.  Check to select that the image
is external and use the url below.

http://www.cs.siu.edu/~wainer/nbMakingGUI/abstract2SimpleImpl/xyEntryMockup.png

Make sure to hit the "Enter key and you should see the image appear at the bottom of the dialog.
Finish by hitting the Okay button. (No need to "Import to Project")

c. Back in the design screen, use the mouse to drag and resize the label so it is positioned well.
You may resize the parent JFrame as needed.

d. Create labels for the conversion action and converted data widgets in a similar manner.
Resize the frame itself if necessary. (URLs for conversion trigger and converted source display)
http://www.cs.siu.edu/~wainer/nbMakingGUI/abstract2SimpleImpl/convTrigMockup.png
http://www.cs.siu.edu/~wainer/nbMakingGUI/abstract2SimpleImpl/convDataMockup.png

4.  Run your code

Netbeans automatically generates java code to implement your design.
a. Save your work
b. At the top of the main window there are some tools.
Use the "Hammer w/Broom" to rebuild a fresh copy of your project.
Then use the "Green Triangle" to run your application. The system may ask you to select the mainclass. Of couse it is polyMaker.PolyMaker.
c.  The application should start running and show the screen design you created. After you've confirmed it runs correctly, quit the application.


In part 2, a more concrete interface is created as labels are replaced with other components.
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