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.
  1. Create a new project in the workbench called Calculator.
  2. Add a package to the Calculator project called calc.
  3. 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".
  4. Click on the "BeanInfo" tab.
  5. 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".
  6. Set the display name to "startNewValue" and the description "Sets the append mode for the calculator display." Then press "finish".
  7. 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"
  8. Specify the parameter:
    • Parameter name: text
    • Parameter type: java.lang.String
    • Description: text to append to the label
    • Press "next"
  9. Add a display name and description. Call it "append" and have the description say "appends text to the current label text." Press "finish"
  10. 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.
  11. 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);
    
  12. Save the new method (select "save" from the edit window pop-up menu.
  13. We now have a functioning calculator display field!

No help for this section.

Task 2

Create an abstract operation button class.
  1. Go back to the workbench, and add another class to the calc project. Use the following options:
    1. Class name: OperationButton
    2. Superclass: java.awt.Button
    3. Project and package should be Calculator and calc, respectively.
    4. Select "Write source code for the class"
    5. Press "next".
    6. Select "abstract" as a modifier for the class. This prevents anyone from instantiating this class.
    7. Make sure "public", and the first two "stubs" options are checked.
    8. Press "finish".
  2. 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:
    1. Method name: int compute(int left, int right)
    2. Access modifiers: public
    3. Other modifiers: abstract
    4. Press "finish"

No help for this section.

Task 3

Create the operation buttons
  1. 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.
  2. Press "finish".
  3. Press the "BeanInfo" tab.
  4. Select "compute" under features and Definitions.
  5. Modify the method to return the sum of the left and right operands:
    return left + right; // instead of return 0
    
  6. Save the method.
  7. 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.

  1. 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.
  2. 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".
  3. Set the display name to "operation" and the descriptive text to "the operation button that was pressed." Then press "finish."
  4. 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:

  1. The property should be named "button" of type java.awt.Button.
  2. 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.

  1. 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.
  2. 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.

  3. 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.
  4. 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.
    1. 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.)
    2. Choose "class" for the bean type. This means we're instantiating a new bean.
    3. Class name should be calc.CalcDisplay, and you can leave the name blank.
    4. 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.
    5. Bring up the CalcDisplay's property sheet, and change the value of "text" to 0.
  5. 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.
  6. 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."
  7. Next we need to add the number buttons. We will add buttons for 0-9, "clear", and "=" to start.
    1. Click on the "Buttons" component class in the palette (top component class in the first column.)
    2. Click on Button (top component in the second column.)
    3. Because we'll be adding several buttons, check the "Sticky" checkbox at the bottom of the palette.
    4. Move the cursor into the keypad panel's space on the display.
    5. Click the left mouse button twelve times. This will add all the buttons we want for the numbers, "clear", and "equals".
    6. Uncheck the "Sticky" checkbox.
    7. 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  =
      
  8. Now, we need to add the operation buttons.
    1. Choose the "Options->Add Bean..." menu item.
    2. 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.)
    3. Add a calc.SubButton, on the rightmost half of the "6" button.
    4. Add a calc.MultButton, on the rightmost half of the "3" button.
    5. Add a calc.DivButton, in the empty spot in the grid.
    6. 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.

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