Help: Creating a GUI the Visual Way


Help is available for each task, or you can go straight to the solution source code.

Task 1

Create a new project by clicking on the "create new project" icon that looks like a little folder (the 7th icon from the left under the VisualAge for Java menu bar):
Type "Creating a GUI the Visual Way" into the text field to the right of the radio button that says "Create a new project named:". Push the "Finish" button in the lower right corner of the dialog box. VisualAge will return you to the workbench after it has completed creating your package. You should see it listed with the other projects.
No help for this task.

Task 2

Create an applet using the visual editor by clicking on the applet icon (an icon with the letter "A"):

Type in "SimpleGUI" for the name of the applet. Notice that the dialog box lists SimpleGUI as the project automatically for you. Click the finish button. Make sure that the radio button "Design the applet visually" is selected. A dialog box will appear telling you that the default package for SimpleGUI does not exist. Answer that it should continue (that is, it should create the default package). VisualAge brings up the visual composition editor in response to your request for a new applet.


No help for this task.

Task 3

Add a Button to the applet. Using the visual composition editor, click on the first icon (which looks like a button) of the second column of the component list (on the left edge of the editor):
This selects buttons to be dropped onto the applet when you click in the applet composition window. Push and hold in the left mouse button, moving the button around until its upper left corner is near the upper left edge of the composition window (inside the dotted rectangle). Double click on the Button after you place it in order to edit its label. A properties window appears with "label" as the last property. Click on the "button1" string in the right column to edit it. Change it to "Self destruct". Close the properties window.
No help for this task.

Task 4

Add a label to the applet. Switch to the data entry components by clicking on the second icon of the first column of the component category list on the left edge of the composition editor window:
This changes the second column of elements to show the data entry elements such as TextField and Label. Select the Label icon (the second icon of the second column):
Click and hold the mouse in the edit area to place the label to the right of previously-added Button. Make sure to leave at least an inch or so between the components.
No help for this task.

Task 5

Make a Button press set the text of the label to "Self-destruct initiated". Connect the actionPerformed event of the Button to the Label by right-clicking on the Button to get the popup menu. Select item "Connect" and then submenu item "actionPerformed". A dotted line will connect the Button to the cursor. Move the cursor over the Label and select it. Another popup menu will appear that asks you to indicate which property to change. Select the "text" item. Your composition editor should look something like:

So far, you have specified that the Button will set the text property of the Label, but you have not specified what the text should be. Right-click on the connecting line between the Button and the Label to bring up the connection popup menu. Select "properties" from the menu (here "properties" refers to the properties of the connection not of the components). A properties dialog box appears. Click on the "Set parameters..." button. A new dialog box appears with the word "value" in the left column and a blank entry in the right column. Click in the right column, which opens a text field. Type "Self-destruct initiated" into the text field and click OK. Click OK in the properties dialog box.


No help for this task.

Task 6

Test the applet. Under the "Tools" menu, select item "Test". VisualAge will bring up a dialog box asking for parameters and so on. Simply click the "Run" button as the defaults are fine. After a few moments, an applet viewer window appears with your Button and Label. Click on the "Self destruct" button and the label should change to "Self-destruct initiated".
No help for this task.

Copyright © 1996-1997 MageLang Institute. All Rights Reserved.