 




|
|
Help: A Four Function Calculator, part one
Help is available for each task, or you can go straight to
the solution source code.
Task 1
Create the CalcDisplay.
- Create a new project in the workbench called Calculator.
- Add a package to the Calculator project called calc.
- Select "New Class/Interface" from calc's pop-up
menu. Use the following options:
- Class name: CalcDisplay
- Superclass: java.awt.Label
- (should already have project Calculator,
package calc...)
- Select "design the class visually".
- Press "finish".
- Click on the "BeanInfo" tab.
- Add a new property feature to the features tab
(from its pop-up menu.) This property will
tell the label whether it should start a new
text with the next number button press.
- Property name: startNewValue
- Property type: boolean
- Make it readable and writeable, but
not bound nor constrained.
- Press "next".
- Set the display name to "startNewValue" and
the description "Sets the append mode for the
calculator display." Then press "finish".
- Add a new method feature to the features tab
(from its pop-up menu). This method will
allow us to append text to the end of the
label.
- Method name: append
- Return type: void
- Number of parameters: 1
- Press "next"
- Specify the parameter:
- Parameter name: text
- Parameter type: java.lang.String
- Description: text to append to the label
- Press "next"
- Add a display name and description. Call it
"append" and have the description say "appends
text to the current label text." Press "finish"
- Next we need to fill in the details of the
append method. Click on "append" under Features,
then on the append method
in the Definitions box. That brings up the code
for the method. Doesn't do anything interesting
yet.
- Add the following code to the body of the method before the
return statement:
String currentValue = getText();
if (fieldStartNewValue || currentValue.equals("0"))
currentValue = "";
setText(currentValue + text);
- Save the new method (select "save" from the edit
window pop-up menu.
- We now have a functioning calculator display field!
No help for this section.
Task 2
Create an abstract operation button class.
- Go back to the workbench, and add another
class to the calc project. Use the following
options:
- Class name: OperationButton
- Superclass: java.awt.Button
- Project and package should be
Calculator and calc, respectively.
- Select "Write source code for the class"
- Press "next".
- Select "abstract" as a modifier for the
class. This prevents anyone from
instantiating this class.
- Make sure "public", and the first two
"stubs" options are checked.
- Press "finish".
- Add an abstract "compute" method to the Operation
button by selecting OperationButton and choosing
"New method" from its pop-up menu.
Use the following options:
- Method name: int compute(int left, int right)
- Access modifiers: public
- Other modifiers: abstract
- Press "finish"
No help for this section.
Task 3
Create the operation buttons
- From the workbench, select OperationButton, and
choose "New Class/Interface" from its popup
menu. Name the class AddButton. All other
options should be correct, including
Design the class visually.
- Press "finish".
- Press the "BeanInfo" tab.
- Select "compute" under features and Definitions.
- Modify the method to return the sum of the left
and right operands:
return left + right; // instead of return 0
- Save the method.
- Repeat the above steps for a SubButton, MultButton and
DivButton class. Modify their compute methods
according to the type of operation. Don't
worry about checking for divide by zero -- let
the Java runtime handle that.
No help for this section.
Task 4
Create an operation trigger.
This is a dummy class that will make life much easier
for us when we start making connections later on.
This class is a non-visual component that
contains a reference to an OperationButton.
When the operation buttons are pressed, their
only task is to set the trigger's operationButton
property. Setting this property will cause
a PropertyChangeEvent will be fired.
We can then use that event to perform the
real actions. Thus the real action connections
only need to be set up once, for the trigger,
instead of several times, once for each operation
button.
- Add a new class to the calc project from the
Workbench. Name the class OperationTrigger
and make its superclass java.lang.Object.
Even though this is a non-visual component,
we will select "Design the class visually"
so we have an easy way to set up bean properties.
- Go to BeanInfo and add a new property feature.
This feature should be named "operation" and
be of type calc.OperationButton. It should be
readable, writeable, and bound (so we can
catch the "change" event.) Press "next".
- Set the display name to "operation" and
the descriptive text to "the operation button
that was pressed." Then press "finish."
- Uh oh -- an error was reported. Select the
getOperation method and have a look at it. The
problem is that the generated code is trying to
return a new instance of OperationButton, which
is abstract, and therefore cannot be instantiated.
We need to modify the generated code to fix this.
The easiest thing to do is remove the entire
"if (fieldOperation == null)" block so all we have
left is return fieldOperation. Just remember --
we could be returning a null from getOperation()!
(But this is ok...) Save the method and we're
done with OperationTrigger.
No help for this section.
Task 5
Create a number trigger
Let's set up a similar trigger for the
number keys. Each number key will end up needing
a couple of events associated with them, so we can
factor out the amout of work by creating a trigger
for them as well. This time, though, let's just
make it a generic ButtonTrigger that keeps track
of which button was pressed. (The reason the
OperationTrigger needed an OperationButton is that
later on we will need to access the compute
method of OperationButton.)
Add a new class to the calc project named
ButtonTrigger. Everything about this class
will be identical to OperationTrigger, with two
exceptions:
- The property should be named "button" of type
java.awt.Button.
- The getButton() method will not
require any modification.
No help for this section.
Task 6
Creating the GUI
Had enough setup yet? Good! It's finally time to move
on to setting up the GUI.
- Create a new class called "Calculator" (in project Calculator's
package calc), which should be a subclass of java.awt.Frame,
and visually design it.
- Now the fun begins. Let's think about the
design of the interface. The visual interface
for the calculator has two main parts: a
numerical display, and a keypad.
The numerical display has a certain "ideal"
size associated with it, based on the
current font. The grid of buttons can
really be any size. We'd like the display
to be the top portion of the frame, with the
buttons underneath.
Sounds like a good job for BorderLayout! The
numerical display will be the "North" element, and
the keypad will be the "Center" element.
(Remember that the "Center" element will
expand/collapse to take up the remaining
space after the "North", "South", "East" and
"West" components have been laid out.
The keypad is a sub-layout of its own. The
buttons will be laid out in a 4x4 grid. Hmmm.
Did someone mention grid? Sounds like a good
time to use a GridLayout.
So the keypad portion of the display will be a GridLayout
Panel, containing all the number and operation
buttons.
- Now we start the work. First we tell the Frame
that it should use a BorderLayout. Bring up the
Frame's properties and click on "layout", then
click the "..." button that appears. Select
BorderLayout from the "Layout Manager" choice
and close the property sheets.
- The easiest way to set up components in a
BorderLayout in the VCE is to start with
the North, South, East and West components first.
So let's start with the display.
- Select the "Options->Add Bean..." menu item.
(If the CalcDisplay were a more general-purpose
bean, you could have added it to the Bean palette
for easy access. Because this is a specialized bean,
it would probably just be clutter.)
- Choose "class" for the bean type.
This means we're instantiating a new bean.
- Class name should be calc.CalcDisplay, and
you can leave the name blank.
- Click and hold the left mouse button
over the center area of the frame. Move
it around until the dotted lines show
that the component will occupy the top
section of the frame. Then release
the mouse button. This adds a new
CalcDisplay as the "North" component
of the Frame's BorderLayout.
- Bring up the CalcDisplay's property
sheet, and change the value of "text"
to 0.
- Next we need to add a panel for the keypad.
Click on "Containers" (which should be the
fifth component class in the palette's first
column). Then click on Panel (which should
be the third component in the second column).
Move the cursor to the center of the panel and
click and hold the left mouse button. If the
dotted line does not show the component as
being added to the center of the frame, drag
until it does. Then release the mouse button.
- Tell the new panel that it should use a GridLayout
by bringing up its properties and setting
its layout to "GridLayout." When you select
the Gridlayout, set its "rows" property to
4, and its "columns" property to "0." The "0" means
"any number of columns."
- Next we need to add the number buttons. We
will add buttons for 0-9, "clear", and "=" to start.
- Click on the "Buttons" component class
in the palette (top component class in
the first column.)
- Click on Button (top component in the
second column.)
- Because we'll be adding several buttons,
check the "Sticky" checkbox at the bottom
of the palette.
- Move the cursor into the keypad panel's
space on the display.
- Click the left mouse button twelve times.
This will add all the buttons we want for
the numbers, "clear", and "equals".
- Uncheck the "Sticky" checkbox.
- Change the label on each button by holding
the "Alt" key and left clicking on a button
and typing the new name. The button names
should be laid out as follows:
7 8 9
4 5 6
1 2 3
0 C =
- Now, we need to add the operation buttons.
- Choose the "Options->Add Bean..." menu item.
- Add a class-type bean of class calc.AddButton.
To get it in the right place, click on
the rightmost half of the current "9" button.
(Note - in general, you can see where a button
will be added to a GridLayout by clicking the
left button and holding it, then dragging
the mouse. A highlighted line will appear
showing where the new button will be added relative to
an existing button under the cursor.)
- Add a calc.SubButton, on the rightmost half of the "6" button.
- Add a calc.MultButton, on the rightmost half of the "3" button.
- Add a calc.DivButton, in the empty spot in the grid.
- Use the "alt-click" method to change the
labels of the operation buttons to "+", "-", "*", "/"
so the final labels look like:
7 8 9 +
4 5 6 -
1 2 3 *
0 C = /
Congratulations! The interface is complete and the
support classes are all in place. The second part
of the calculator exercise will lead you through
connecting all the parts through events.
Click on the "test bean" button (first button on the
toolbar) which will save and execute your calculator
so far...
No help for this section.
|