UI vs Window vs View

Question

What are the differences between these? I would assume UI would be the overarching interface for a specific application composed of multiple windows. A window would then be composed of either 1 or possible multiple views. A view would then be a portion of the Window that a view could draw on? Am I thinking about this correctly?

A UI has 1..n Windows
A Window has 1..n Views
A View represents the portion of a Window where a model can be displayed.

Therefore, should a UI be composed of Windows or inherit from the Window class?

Answer 1

A View is how data is presented or viewed. A Window is the physical artifact or device that is used to instantiate a View for a user. A UI is the combination of Views and Windows and Controls which allows a user to see the data and to modify what material is presented in the Views and how that material is presented.

This is the basic architecture of the Model View Controller architecture.

A Window is a viewport through which a View is visible. A View may be presented through multiple Windows with each Window providing visibility of some part of a View.

As an example lets take a simplified look at a IDE application such as Eclipse or Visual Studio.

The primary data is the source code in one or more files. The IDE provides several Views of the source code body. One View may be the source code in a particular file as lines of text and this View is presented in a Window. You may split the Window into two independently controlled Windows allowing the two Windows to show different parts of the source code file. There is still one View, the source code, however you are able to look at it in a different way, to use two different Windows so as to look at two different parts of the View that are sufficiently separated that if using a single Window both parts could not be made visible at the same time due to the limitations of the display device.

You may open up another View of the source code to show a Window which displays a View of the source code as a series of function declarations without showing the source code that is in each function. The series of functions are presented in a calling graph. Again the same source code and it is being displayed in a Window but now the View is different being an image of a graphical tree rather than lines of source code.

Open up another View, this time showing how the source code files are organized into multiple projects in a tree view with each project being a node which when clicked opens up to show the files that compose that project.

In most Graphical UI frameworks all displayed artifacts are Windows of some kind. A button is a Window, a text box is a Window, an image box is a Window, etc. A Window is the source or sink of most of the events in the UI. A key on the keyboard is pressed and it is wrapped in a message and provide to the Window which currently has the keyboard focus. The Window over which the mouse cursor is located is usually the Window which gets the mouse click event.

A View is not a physical kind of a thing like a Window. A View is a more abstract idea being how data is presented. A View uses one or more Windows to present the data in a particular format. The format may be lines of text or it may be images and icons along with text.

The UI is the total package of how the various Views and Windows are brought together to provide an interface to allow a user to see the data in various ways, to control how the interface presents the data through Views, and possibly to modify the data.

Here is an example of Visual Studio 2013. The total UI is the various windows and controls along with the Views and the dynamic behavior of the application as the user manipulates various controls using the mouse and the keyboard.

This screen shot shows a split Window which shows two parts of the same View of a source code file as text. A split Window is really two Windows with scroll bar controls embedded into a larger Window. And this larger Window is in turn contained with the UI Frame Window which contains other Windows.

Here is a screen shot of the same Visual Studio 2013 project showing multiple Views of the same data using different Windows for each View. This is a XAML source file with the designer tool View in one Window with the XAML source code View in a second Window beneath. There is also a Properties window in the lower right corner of the Visual Studio IDE GUI which provides a different view of the selected XAML object. You can modify the XAML source code by changing the text in the source code View or using the controls in the Property window or by using the controls in the designer tool window.

Answer 2

I am not sure there is a uniform terminology throughout the software world. You might find that usage differs depending on who you hang out with. I can speak a bit to the world of Microsoft Windows and related technology.

A "window" is not at all what you think of as a window. A window is anything that has an hWnd (which is short for "handle to a window"). Every button, field, label, and control on a page is a type of window. Also, form itself is a window. Windows have their own messaging system which can be used to get the windows to do various things in a queued sort of manner, which is very helpful because there are threading restrictions when using windows.

"View" is a specific term from one of a few design patterns, for example Model-View-Controller or MVC, Model-View-Presenter, and the confusingingly-named Model-View-View-Model or MVVM.

A "UI" or User Interface is a very general term which refers to any interaction between a person and a computer system. Alexa, for example, has a UI, even though it is entirely voice controlled.

Links that may interest you:

• SDI and MDI
• Documents, Views, and the Framework
• Microsoft Glossary on UI terms