-
8/13/2019 MVVMInPOS
1/7
How to: Use the MVVM Pattern in POS
Sample files
Sample project
Further reading
Microsoft Dynamics AX 2012 for Developers [AX 2012] SDK Download
Model-View-ViewModel pattern
Introduction
AX Retail Point of Saleutilizes a form of the
Model-View-ViewModel (MVVM) pattern to separate UI
from business logic. MVVMhas its roots in SmallTalks
Model-View-Controller (MVC) pattern and
became popular in recent years with WPF development. The pattern
has been applied mainly to newer
forms found in the InteractionDefaults project but can be found
in other projects too.
HistoryThe POS code base has gone through several iterations and
one long term goal has been to separate
business logic from UI code. This effort is not complete and the
following summarizes the current state:
Legacy forms exist in core and individual services as well as
the Dialogservice where mostbusiness logic is mixed with UI handler
code
New forms have been added to the InteractionDefaultsproject,
accessed via a new Interactionservice
MVVM in POSThe idea behind MVVM is that data/state is contained
with the model, business logic is spread across
the modeland view-modeland the user interface is the view. The
viewbinds to the view-modeland
the view-modelwraps or controls access to the model.
http://dynamics/ax6/teams/retail/AXMultichannelRetail/AX62Wave1/Miscellaneous%20Documents/How-to%20topics%20additional%20files/MVVMSample.ziphttp://dynamics/ax6/teams/retail/AXMultichannelRetail/AX62Wave1/Miscellaneous%20Documents/How-to%20topics%20additional%20files/MVVMSample.ziphttp://msdn.microsoft.com/en-us/library/hh881815http://msdn.microsoft.com/en-us/library/hh881815https://mbs.microsoft.com/partnersource/deployment/resources/productreleases/MicrosoftDynamicsAX2012.htmhttps://mbs.microsoft.com/partnersource/deployment/resources/productreleases/MicrosoftDynamicsAX2012.htmhttp://msdn.microsoft.com/en-us/library/gg405484(v=PandP.40).aspxhttp://msdn.microsoft.com/en-us/library/gg405484(v=PandP.40).aspxhttp://msdn.microsoft.com/en-us/library/gg405484(v=PandP.40).aspxhttps://mbs.microsoft.com/partnersource/deployment/resources/productreleases/MicrosoftDynamicsAX2012.htmhttp://msdn.microsoft.com/en-us/library/hh881815http://dynamics/ax6/teams/retail/AXMultichannelRetail/AX62Wave1/Miscellaneous%20Documents/How-to%20topics%20additional%20files/MVVMSample.zip
-
8/13/2019 MVVMInPOS
2/7
In POS, the modelis often the existing database entities and the
view-modelis designed to translate
commands in the UI to changes in the underlying data. The
modeldoes not know about the view-model
and the view-modeldoes not know about the view.
Data BindingPOS utilizes Windows Formsobject data binding to
bind UI controls to properties in the view-model. For
data binding to work, objects implement the
System.Component.INotifyPropertyChanged interface
which specifies a PropertyChanged event.
Tutorial
In the tutorial, we are going to implement a simple form that
displays the name of a person. It also has a
button that changes the persons name to Tom Jones.Traditionally
we would have just added this
code directly into the form class but we want to keep the UI
separate from the business logic so we are
not tightly coupled with any particular UI technology.
View
View-Model
Model Model
-
8/13/2019 MVVMInPOS
3/7
1. Start a new Windows Formsproject in Visual Studiocalled
MVVMSample.2. Create a new Person class that represents a person in
the system. To keep it simple, it has two string
properties: FirstNameand LastName.
class Person
{
public string FirstName
{
get;
set;
}
public string LastName
{
get;
set;
}
}
3. Create a new PersonViewModel class which will be our
view-modelclass for the UI to bind to whichwraps the modelpassed in
to the constructor. The view-modelis a form of the Adapterand
Mediatordesign patterns. Our view-modelexposes a single
Nameproperty that aggregates the
underlying FirstNameand LastNameproperties of Person.
using System;
using System.ComponentModel;
class PersonViewModel : INotifyPropertyChanged
{
private Person person;
PersonViewModel(Person p)
{
this.person = p;
}
public string Name
{
get
{
return string.Format({0} {1}, this.person.FirstName,
this.person.LastName);}
}
public void ExecuteNameChangeCommand()
{
this.person.FirstName = Tom;
this.person.LastName = Jones;
-
8/13/2019 MVVMInPOS
4/7
// Trigger the Name property changed
OnPropertyChanged(Name);
}
// Implementation of INotifyPropertyChanged
}
4. Next we data bind our controls to a data source (our
view-model). We do this by opening up theWindows Forms designer and
dragging a BindingSourceto our form.
5. In the properties for the BindingSource, drop down the
DataSourceproperty and choose Addproject data source, this will
display the Data Source Configuration Wizard:
-
8/13/2019 MVVMInPOS
5/7
Choose Objectand then select the PersonViewModel as the data
object:
6. Now we want to bind the Textproperty of our TextBoxto the
Nameproperty of our ViewModel.Select the TextBoxon the form and in
the Propertieswindow, select DataBindings-> Textand in
the drop-down choose the Nameproperty of the
PersonViewModel.
-
8/13/2019 MVVMInPOS
6/7
Now the TextBoxwill reflect the value of PersonViewModel.Name
.
7. Next we override OnLoadfor the form and create the
view-modeland add it to the BindingSource.private PersonViewModel
viewModel;
protected override void OnLoad(EventArgs e)
{
if (!this.DesignMode)
{
// Create some demo data
Person person = new Person() { FirstName = "Bill", LastName =
"Gates" };
// Create view model that wraps Person and add it to the binding
source
viewModel = new PersonViewModel(person);
this.bindingSource.Add(viewModel);
}
base.OnLoad(e);
}
8. Lastly we want to execute commands against the view-model. To
do this we listen to the ButtonsClickevent and call the
ExecuteNameChangeCommand() method on the PersonViewModel . This
updates the underlying Personobject and fires a
PropertyChangedevent that the data binding
system listens for and will automatically update the value of
the TextBoxin the UI.
private void OnButton_Click(object sender, EventArgs e)
{
this.viewModel.ExecuteChangeNameCommand();
}
-
8/13/2019 MVVMInPOS
7/7
SummaryThe UI binds to the view-model and executes commands
against the view-model and any changes are
reflected up from the view-model. The UI does not maintain state
or hold business logic. This keeps the
business logic and state separated from the UI which allows the
UI technology to be more easily
changed in the future without affecting the business logic.
Even though this is a simple example, it demonstrates the
pattern used in POS. POS makes use of some
more advanced data binding features such as converters to
convert from one type in the view-model to
a different type needed by the UI but the MVVM pattern forms the
basis for data binding in POS.
