Comp201: Principles of Object-Oriented Programming I
Spring 2008 -- Finite State Machine and the State Pattern
The Cheap Calculator   


In this lab we will create Graphical User Interface ("GUI") "Cheap Calculator" program which can do the four basic arithmetic operations: addition, subtraction, multiplication and division.

This lab, in all its parts, comprises the homework assignment for this week. You are to start the work during lab and continue it on your own to be handed in next week.

Demo

To see where we are going, download and run the demo  As you can see this is a really cheap calculator:  it misses a couple of digit buttons and does not support subtraction nor division.  Nevertheless, it seems to calculate arithmetic expression in infix notation correctly.  What do we mean by an "infix" expression?  A binary operation is said to be in infix notation if the operator (e.g. +) is in between the two operands.  There are also "postfix" and "prefix" expressions.  The following table shows an example of each form of notation.

Adding two numbers x, y together

Infix Notation x + y
Prefix Notation + x y
Postfix Notation x y +


Note that it is an Honor Code violation to attempt to decompile the demo.

Background Information

I am interested in writing a GUI application that simulates the behavior of a "cheap" infix calculator.  As the user interface, this calculator has on the outside:

·        10 buttons labeled 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, respectively, to enter digit characters

·        one button labeled . to enter the decimal point

·        one button labeled +, to perform addition

·        one button labeled *, to perform multiplication

·        one button labeled =, to compute the result of the input so far

·        one button labeled C, to clear all entries in the calculator and reset the calculator to its pristine initial state.

·        and a display text field for me to view the input and the result of my desired computation.

Inside this calculator is perhaps some kind of electronic circuit board capable of carrying out the actual computations.  The GUI provides the only way for me to interact with the internals of the calculator.  How do I want the calculator to behave like?  For a start, as I click on the digit buttons, I expect the calculator to accumulate the digits by concatenating them together and displaying the result on the display text field.  But wait!  What if I only click the digit '0' button?  The calculator should not concatenate one '0' after another, should it?  Run the demo and check it out yourself!

Now, try this: click '3', then click '+', then click '0' four times.  This time around, clicking '0' results consistently in concatenating '0' to the existing display text.  The calculator has changed its "click '0'" behavior after I click a digit button that is not a '0'.  We say that the calculator has gone through a "state change" and behaves differently in each state.

Here is another of example.  

The behaviors of my calculator can be modeled as what is called a "finite state machine."  What is a state?  How many states are there?  How do we go about describing the behavior of the calculator as it changes from state to state?  

Finite State Machine (an informal discussion)

When you click on a button of the calculator, you are in effect making a request to the calculator to perform certain task.  At any point in time, the internals of the calculator are in some specific conditions with specific values that would cause the calculator to respond in a very specific manner to such a request.  The condition in which the calculator is in at any point in time is called the state of the calculator at that point in time.  A state of a system is defined by the behaviors of the system.  The user can interact with the calculator in only five ways: 

  1. click a digit button,
  2. click an operation button,
  3. click the equal button,
  4. click the clear button,
  5. click the point button.

To specify the behavior of the calculator, we must specify the calculator's response to each of the above five clicking events.

(Reference the "state transition diagram" below for the following discussion.)

Start  State

When you first turn on the calculator, imagine that it is in some initial condition called a start state. Suppose, from the start state, you...

Beginning with one state, the start state, by analyzing and specifying the behavior of the calculator in response to the five distinct click events, we have inferred the existence of four distinct other states: accumulate state, compute state, point state and error state.  We can repeat the same analysis on each of these states for each of the click events.  We will not discussed them in details here.  Instead, we summarize the state behaviors and the state transition in the form of a diagram shown below.

State Diagram

 

State Design Pattern

Traditional procedural programming implements the behavior of finite state machines by using numbers, loops and conditional constructs such as if and switch statements.  In OOP, each state is an object with behaviors.   A finite state machine is an object that has states.  The machine holds a reference to an abstract  state and delegates all state-dependent behaviors to its current state.  This is the gist of what is called the state design pattern.  We will apply the state pattern to model the cheap calculator.  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 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:

Warning! As you progress through the lab, the directions will deliberately get less and less detailed, as you are expected to figure more and more of the process out on your own!

This lab constitutes the homework for this week.

Step 0: Understand the problem

Study the above state transition diagram!

Step 1: Calculator with no Concrete States

Get the downloaded GUI files to compile and run.

Step 2: Add Concrete States

Step 3: Add More Buttons and Operations


Last Revised Thursday, 03-Jun-2010 09:50:28 CDT

©2008 Stephen Wong and Dung Nguyen