MVVM (Model-View-ViewModel)
Purpose: The purpose of this document is to illustrate how to apply MVVM (Model-View-ViewModel) architectural pattern when developing modern applications integrated with Microsoft Dynamics AX 2012.
Challenge: You may need to develop a modern application integrated with Microsoft Dynamics AX 2012 for the purposes of demonstration, POC or to be deployed in production environment. The question is what technology and architectural pattern to use in order to facilitate application development and maintenance efforts.
Solution: The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the presentation model design pattern. Largely based on the Model–View–Controller pattern (MVC), MVVM is targeted at UI development platforms which support event-driven programming.
MVVM facilitates a clear separation of the development of the graphical user interface (either as markup language or GUI code) from the development of the business logic or back end logic known as the model (also known as the data model to distinguish it from the view model). The view model of MVVM is a value converter meaning that the view model is responsible for exposing the data objects from the model in such a way that those objects are easily managed and consumed. In this respect, the view model is more model than view and handles most if not all of the view’s display logic.
MVVM was designed to make use of data binding functions to facilitate the separation of view layer development from the rest of the pattern by removing virtually all GUI code (“code-behind”) from the view layer. Instead of requiring user interface developers to write GUI code, they can use the framework markup language and create bindings to the view model, which is written and maintained by application developers. This separation of roles allows interactive designers to focus on UX needs rather than programming or business logic, allowing for the layers of an application to be developed in multiple work streams for higher productivity. Even when a single developer works on the entire code base a proper separation of the view from the model is more productive as the user interface typically changes frequently and late in the development cycle based on end-user feedback.
Problem domain
In this scenario we’ll be developing a modern application to display Product catalog based on the information about products retrieved from Microsoft Dynamics AX 2012.
For the sake of simplicity Product entity will have only 2 attributes: ID and Name
Product entity
<![if !vml]>
<![endif]>
<![endif]>
Modern application we are going to develop will display the info about products similar to what is displayed on Product catalog page in Enterprise Portal in Microsoft Dynamics AX 2012
Product catalog
Schematically what we want to display looks like on the wire frame below
Product catalog wire frame
<![if !vml]>
<![endif]>
<![endif]>
Our modern application can be developed using different technology, for example, it may be
<![if !supportLists]>- <![endif]>Windows 8 Store App
<![if !supportLists]>- <![endif]>Windows Phone 8 App
<![if !supportLists]>- <![endif]>ASP.NET Web site
When developing Windows 8 Store Apps you can leverage Windows 8 SDK which contains headers, libraries and tools you need in the language of your choice. For example, when developing Windows 8 Store App we’ll have a choice of programming language
<![if !supportLists]>- <![endif]>JavaScript/HTML5
<![if !supportLists]>- <![endif]>C#.NET/XAML
Similarly Windows Phone 8 SDK includes all of the tools that you need to develop apps and games for Windows Phone 8
In case you goal is to develop a cross-platform application you will be looking for cross-platform SDK
For the development of modern applications integrated with Microsoft Dynamics AX 2012 we’ll apply MVVM (Model-View-ViewModel) architectural pattern
MVVM
In the MVVM pattern the view encapsulates the UI and any UI logic, the view model encapsulates presentation logic and state, and the model encapsulates business logic and data. The view interacts with the view model through data binding, commands, and change notification events. The view model queries, observes, and coordinates updates to the model, converting, validating, and aggregating data as necessary for display in the view.
Please find more info about how to implement MVVM pattern here: http://msdn.microsoft.com/en-us/library/gg405484(v=pandp.40).aspx
In walkthroughs in this series we’ll develop different variants of Product catalog modern application integrated with Microsoft Dynamics AX 2012 using technologies mentioned above while focusing on ease of development and code reuse possibilities.
Summary: This series describes how to apply MVVM (Model-View-ViewModel) architectural pattern when developing modern applications integrated with Microsoft Dynamics AX 2012.
The Model-View-ViewModel (MVVM) pattern helps you to cleanly separate the business and presentation logic of your application from its user interface (UI). Maintaining a clean separation between application logic and UI helps to address numerous development and design issues and can make your application much easier to test, maintain, and evolve. It can also greatly improve code re-use opportunities and allows developers and UI designers to more easily collaborate when developing their respective parts of the application.
Using the MVVM pattern, the UI of the application and the underlying presentation and business logic is separated into three separate classes: the view, which encapsulates the UI and UI logic; the view model, which encapsulates presentation logic and state; and the model, which encapsulates the application's business logic and data.
Tags: MVVM, Model-View-ViewModel, UI Logic, Presentation Logic, Business Logic and Data, Data Binding, Windows 8 Store App, Windows Phone 8 App, ASP.NET Web site, Microsoft Dynamics AX 2012.
Note: This document is intended for information purposes only, presented as it is with no warranties from the author. This document may be updated with more content to better outline the concepts and describe the examples.
No comments:
Post a Comment