Skip to content

Structure and Architecture

Antoine Théate edited this page Feb 14, 2023 · 1 revision

WPF and the MVVM Pattern

WPF

The DEH-MATLAB is a Windows Prensentation Framework (WPF). WPF is a UI framework that creates desktop client applications. The WPF development platform supports a broad set of application development features, including an application model, resources, controls, graphics, layout, data binding, documents, and security. WPF uses the Extensible Application Markup Language (XAML) to provide a declarative model for application programming. Even though WPF supports a programming technique called Code Behind to implement GUI behavior, this is NOT being used for DEH-MATLAB development. Instead the Model-View-VewModel (MVVM) design pattern is used to implement the behavior that is associated to a GUI element, also called a View.

There is little that needs to be done in code-behind. There is little that cannot be solved with Attached Behaviors.

MVVM Pattern

MVVM facilitates a separation of development of the graphical user interface – be it via a markup language or GUI code – from development of the business logic or back-end logic (the data model). There are three core components in the MVVM pattern: the model, the view, and the view model. Each serves a distinct purpose. At a high level, the view "knows about" the view model, and the view model "knows about" the model, but the model is unaware of the view-model, and the view-model is unaware of the view. Therefore, the view-model isolates the view from the model, and allows the model to evolve independently of the view.

View

The view is responsible for defining the structure, layout, and appearance of what the user sees on screen. In the DEH-MATLAB views are defined using XAML. View elements, such as Buttons, Text Fields, TreeViews etc. can be bound to properties of a view-model. Data binding can be used to populate the contents of a GUI element, update an underlying view-model property or handle the click-event of a button. For a good overview of data-banding read the data-binding-overview page.

View-Model

The view model implements properties and commands to which the view can data bind to, and notifies the view of any state changes through change notification events. The properties and commands that the view model provides define the functionality to be offered by the UI, but the view determines how that functionality is to be displayed.

Each view model provides data from a model in a form that the view can easily consume. To accomplish this, the view model sometimes performs data conversion. Placing this data conversion in the view model is a good idea because it provides properties that the view can bind to. For example, the view model might combine the values of two properties to make it easier for display by the view

Model

Model classes are non-visual classes that encapsulate the app's data. Therefore, the model can be thought of as representing the app's domain model, which usually includes a data model along with business and validation logic.

Clone this wiki locally