How to Write a View

Most view components have a small number of distinct states that determine how the view is configured and how it will respond to the next program event. As a result, view component programs typically consist of:

• a constructor than initializes the view,
• a registration method for each program event source (e.g., a button) that takes a callback (command) argument and registers this callback as the listener for this event source, and
• a setter method for each distinct view state that sets the fields of the view to the appropriate values.

The controller uses the registration methods to attach callbacks to program event sources in the view. The callbacks use the setter methods to change the state of the view in response to program events.

For our click counter example, the view will have the following format:

which we decompose into three possible states:

1. the Min state where the DEC and 0 buttons are deactivated because the counter has its minimum value of 0.
2. the Counting state where are three buttons are activated, and
3. the Max state where the INC button is deactivated because the counter has reached its maximum value.

The listener must take into account the state of the model to update view.