MVVM – Windows 8 Store App using HTML5/JavaScript Primer
Purpose: The purpose of this document is to illustrate how to how to apply MVVM (Model-View-ViewModel) architectural pattern when developing Windows 8 Store Product catalog App using HTML5/JavaScript
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: In this scenario we'll develop Windows 8 Store App using HMTL5/JavaScript
Walkthrough
First off let's create a new project using Other Languages > JavaScript > Windows Store > Blank App template
New Project
Then we'll apply MVVM (Model-View-ViewModel) architectural pattern for development of Product catalog app
Solution Explorer
Now let's review how I implemented Model, View and ViewModel
The model encapsulates business logic and data. Please see below how I define Product object (function) which has 2 attributes: ID and Name as a part of the model
The view model encapsulates presentation logic and state. Please see below how I define ObservableArray of products with respective function(s) (GetProducts) as a part of the view model
Model and ViewModel: JavaScript (JS)
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
}
};
function Product(id, name) {
var self = this;
self.id = ko.observable(id);
self.name = ko.observable(name);
}
function ProductViewModel() {
var self = this;
self.products = ko.observableArray();
self.GetProducts = function () {
self.products.push(new Product("X", "AlexProductX"));
}
}
//Main Execution
function initialize() {
var productViewModel = new ProductViewModel();
productViewModel.GetProducts();
// Activates knockout.js
ko.applyBindings(productViewModel);
}
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
app.start();
//If Document fully loaded than begin processing
document.addEventListener("DOMContentLoaded", initialize, false);
})();
|
Please note that Model and ViewModel definition is done in JavaScript (JS)
MVVM (Model-View-ViewModel) pattern implementation is different in JavaScript (JS) comparing to classic object-oriented languages such as C#.NET. Please note that JavaScript (JS) has objects which can contain data and methods that act upon that data. Objects can contain other objects. JavaScript (JS) does not have classes, but it does have constructors which do what classes do, including acting as containers for class variables and methods. JavaScript (JS) does not have class-oriented inheritance, but it does have prototype-oriented inheritance
Now let's review a view
Important to mention is that in order to link view and view model by means of binding I used the capabilities of knockout.js JavaScript (JS) library
Knockout (ko) is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user's actions or when an external data source changes), Knockout (ko) can help you implement it more simply and maintainably
Please find more info about Knockout (ko) JavaScript (JS) library here: http://knockoutjs.com
The view encapsulates the UI and any UI logic. Please see below how I iterate through the list of products and map view model object properties with elements of UI for display
View: HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App2</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- App2 references -->
<link href="/css/default.css" rel="stylesheet" />
<link href="/css/stylesheet.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/knockout-2.3.0.js"></script>
</head>
<body>
<h1>Product Catalog</h1>
<table>
<tbody data-bind="foreach: products">
<tr>
<td id="id" data-bind="text: id"></td>
<td id="name" data-bind="text: name"></td>
</tr>
</tbody>
</table>
</body>
</html>
|
Please note that I created a CSS file to define a style
Style: CSS (Stylesheet.css)
table {
margin-top: 50px;
margin-left: 50px;
}
td {
border-width:1px;
border-style: solid;
height: 100px;
text-align: center;
}
#id {
width: 100px;
color: white;
background-color: black;
}
#name {
width: 400px;
color: black;
background-color: white;
}
|
Please note that I defined different styles to display product ID and Name
As the result our Product catalog application will look like below
Result
Please review the following article to learn how to quickly connect your application to Microsoft Dynamics AX 2012 Demo VM to test out the integration: http://ax2012aifintegration.blogspot.com/2013/04/microsoft-dynamics-ax-2012-windows-8.html
In case you are developing a mobile application for production please review the best practice guidance on Developing Mobile apps for Microsoft Dynamics AX 2012 here: http://www.microsoft.com/en-us/download/details.aspx?id=38413
Summary: This document describes how to apply MVVM (Model-View-ViewModel) architectural pattern when developing Windows 8 Store Product catalog sample App using HTML5/JavaScript.
Tags: MVVM, Model-View-ViewModel, Windows 8 Store App, HTML5, JavaScript, JS, 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