MVC from 10,000 feet

The MVC (Model-View-Controller) paradigm breaks down a program into three distinct categories of component:

• Models handle the program’s data. There are different definitions of MVC, and in some (e.g. Wikipedia), but not others (e.g. dotnet.microsoft.com), the model includes application logic.
• Views present application state to the user. In addition, user interfaces are often user-configurable, and so the UI has its own state, and its own views and controllers for handle UI configuration.
• Controllers take input from the user and convert it into commands for the model to process.

Example Android App

ESV Bible App. This has a collection of Bible translations, and presents user-chosen chapters to the user (it displays one chapter at a time). This is a relatively straightforward app. The state is essentially which Bible chapter is being displayed, and other parameters of the view state. The view renders the text of the selected chapter to the user. The user may scroll around this chapter. There are then controls to move to adjacent chapters, or to bring up a menu to select a different book/chapter.

More Complicated Example

Blender. This is an example of a desktop app whose UI is heavily configurable.

Blender is a 3D modelling, rendering, and VFX application. The user has a great deal of control over the UI. The screen is divided into a number of panes, each of which offers a view onto an aspect of the scene. Some views offer a 3D view, which can show a wireframe of the scene, a shaded view of the scene, or possibly a rendered view. Other views show graphs of how automated parameters change with time (keyframes in animation parlance). Yet another gives the user access to a Python interpreter which allows the user to programmatically manipulate the contents of the scene.

There are essentially two ‘models’. The obvious model is the scene, which consists of data such as meshes, together with matrices modifying their position, rotation and scale; and other objects such as lights. Along with the objects there are things such as the materials (texture and lighting) applied to the objects.

The other thing which could be considered a ‘model’ is the state of the UI itself: how the screen is divided into panes, and the configuration of each pane. Controls at the edge of a pane allow the pane to be configured (there are also keyboard shortcuts), and its size adjusted. Controls within each pane (or a Python REPL in one case), allow the scene to be modified.

Another Complicated Example

Reaper. Reaper is a Digital Audio Workstation. Like Blender, it is heavily customisable, and indeed its support for ‘themes’ allows its appearance to be heavily altered, possibly to loosely resemble some competitor DAW.

The application presents the user with a view of a project. (In actuality Reaper allows multiple projects to be loaded in separate tabs, much like another DAW called Bitwig.) In a project there are a number of tracks, and a master track. Each track contains a number of regions, and each region can contain either digital audio or MIDI data. Each track has a chain of instruments and effects, and a set of sends and receives which allow audio to be routed between tracks.

The main view presents the tracks and regions to the user, allowing the user to move regions around and access configuration windows to modify the effects chain, and in the case of MIDI data, to edit the notes and other MIDI events in a region.