Rice University - Comp 212 - Intermediate Programming

Spring 2004 - Lab 12 - Application of the State Design Pattern to Finite State Machines

In this lab we will complete the construction of a Graphical User Interface ("GUI") "Cheap Calculator" discussed in lecture #33.

State Transition Diagram

Model-View Design

Here is the UML diagram of the complete system that we will be building:

The documentation for the above classes can viewed here.

You may download the code for InFixCalc and the partially completed GUI code here: AFrame.java & InfixGUI.java (put them in a package called "infixView")

Let's get started! Remember to do the following parts in order:

Step 0: Understand the problem

Study the above state transition diagram!

Step 1: Add Operator Classes

• Create stub class files for IBinOp, AddOp and MulOp as shown in the UML class diagram; be sure to put it in the infixModel subdirectory (package).
• Make AddOp and MulOp singletons and write the code for their compute() methods.  This should be trivial.

Step 2: Add Concrete States

• Lecture #33 includes code for AState, StartState and PointState already.  You will need to create concrete classes AccumState and CompState as shown in the javadoc/UML diagram.
• Be sure to make them singletons.
• Add  appropriate System.out.println statements to their public methods.
• Compile and run to see that the delegations are made.
• Use the above state diagram to write the code for all the methods of each of the concrete state classes, one class at a time.  
• Compile and manually test  each of the classes by testing each of the click events.

Step 3: Add More Buttons and Operations

• Modify InFixGUI to add a '1' button and a '2' button.  Add appropriate event listeners for these two buttons.
• Add a subtraction binary operation and  a division binary operation.
• Modify InFixGUI to add a subtraction button and a division button.  Add appropriate event listeners for these two buttons.
• Compile and run and test at each of the above steps.
• You now should have a fully functional "cheap" calculator.

Step 4: Model-View-Controller Design

• The given design is commonly known as the Model-View Design.  Here the view, InfixGUI, references the model, InfixCalc, directly.  This design does not have all the flexibility of the full MVC design, but is adequate for most applications.
• Redesign the above using the full MVC pattern.