MvvmStack for WinJS Part #2
Following part 1, let’s now see how the code is structured:
Inside mvvm folder there are all the files that provides core functionality, this means that you can reuse this files in different apps without modification.
Inside pages folder there are, as usual, the PageControls representing application pages, as you see in this case there’s a new actor: the associated viewmodel (e.g homeViewModel.js)
Infrastructure bootstrapping
The demo is based around HTML Navigation Application template, if you need to create a new app, just select it and let Visual Studio 2012 create all required files for you, then delete navigator.js file since it is already included inside mvvm folder in a slightly modified version.
Dependencies
Looking at the code you’ll see that I like to explicitly indicate what are each file dependencies passing them to module self-invoking function, that implies that modules must be loaded using a prefixed sequence otherwise dependency would become unresolved.
The sequence is available inside default.html file that represents application master page:
<head>
<meta charset="utf-8" />
<title>MvvmStack</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><link href="default.css" rel="stylesheet" />
<!--MVVM-->
<script src="../../js/mvvm/applicationControllerBase.js"></script>
<script src="../../js/mvvm/viewModelLocatorBase.js"></script>
<script src="../../js/mvvm/viewModelBase.js"></script>
<script src="../../js/mvvm/binding-extensions.js"></script>
<script src="../../js/mvvm/messenger.js"></script>
<script src="../../js/mvvm/navigator.js"></script><script src="default.js"></script>
<script src="../../js/applicationController.js"></script>
<script src="../../js/navigationTargets.js"></script>
<script src="../../converters/converters.js"></script><!--core services-->
<script src="../../js/networkService.js"></script><!--data services-->
<script src="../../js/imageService.js"></script><!--Viewmodels-->
<script src="../home/homeViewModel.js"></script>
<script src="../section/sectionViewModel.js"></script><!--services-->
<script src="../../js/ViewModelLocator.js"></script>
<script src="../../js/mvvm/persistenceService.js"></script>
<script src="../../js/mvvm/navigationService.js"></script></head>As evident mvvm core modules are loaded first, then modules that depends/inherits from core modules then other optional core services like networkService (a service that monitors network connection status) followed by page viewmodels and ending with modules that require all modules accessibility like ViewModelLocator, PersistenceService and NavigationService.Core Mvvm modulesLet’s now see what are the core mvvm modules:
- ApplicationControllerBase.js
- Is the base class for ApplicationController, an object that can be shared among ViewModels that I use as a quick way to pass informations among them, it’s state is normally persisted when app gets suspended. Obvisouly it is an optional part but demo shows how you can use it to share parameters from home page to section page.
- binding-extensions.js
- This is a general binding helper module an not tied to Mvvm, it contains helper functions that add two-way binding, two-way binding triggered by an event and a event to method invoker. If you want to extend WinJS binding this file would help you.
- messenger.js
- This represents a generic message broker allowing you to send messages among loaded modules, app uses it to navigate to a “no connectivity” page when connection drops. (try it running the app then activating flight mode) It includes a couple of predefined messages: networkStatusChanged and navigatedBack.
- navigationservice.js
- This is the modules that handles page navigation, it uses WinJS navigation infratructures but it takes care of instantiating the page viewmodels when required.
- navigator.js
- This is the same navigator objects that you get when you choose a WinJS navigation template as starting Javascript template in Visual Studio 2012, it has been slightly modified to send a navigatedBack message when uses navigates back from a page, the message instruct the infrastructure that associated viewmodel should not be persisted in case of suspension.
- persistenceService.js
- This is the service that, when a suspension request occurs, serializes applicationController and all viewModels implementing serialize method. It also re-instantiate viewmodels and rehydrates them when application resumes.
- viewModelBase.js
- Base class for all viewmodels, it includes a processAll function that marks all viewmodel’s function as ‘safe for processing’ and set ‘this’ context to viewmodel instance.
- viewModelLocatorBase.js
- Base class for ViewModelLocator, a class that takes care of creating/deleting page viewModels.
ClosingThat’s all for now, on next episode we’ll see what you need to customize to use the stack in your app.
