|
<h1>
MvvmCross TipCalc - A Recap</h1>
<h2>
Introduction</h2>
<p>
This article is a recep at the end of the TipCalc tutorial for MvvmCross v3 - Hot Tuna!</p>
<h2>
The story was...</h2>
<div id="wiki-content">
<div class="wrap">
<div class="gollum-markdown-content instapaper_body" id="wiki-body">
<div class="markdown-body">
<div id="wiki-content">
<div class="wrap">
<div class="gollum-markdown-content instapaper_body" id="wiki-body">
<div class="markdown-body">
<div id="wiki-content">
<div class="wrap">
<div class="gollum-markdown-content instapaper_body" id="wiki-body">
<div class="markdown-body">
<div id="wiki-content">
<div class="wrap">
<div class="gollum-markdown-content instapaper_body" id="wiki-body">
<div class="markdown-body">
<div id="wiki-content">
<div class="wrap">
<div class="gollum-markdown-content instapaper_body" id="wiki-body">
<div class="markdown-body">
<div id="wiki-content">
<div class="wrap">
<div class="gollum-markdown-content instapaper_body" id="wiki-body">
<div class="markdown-body">
<p>
Over the course of these articles, we've covered the complete <font color="#000000"><code>Tip Calc</code> app on 5 platforms from one shared PCL code library using Mvvm.</font></p>
<p>
<img alt="Sketch" src="https://raw.github.com/slodge/MvvmCross/v3/v3Tutorial/Pictures/TipCalc_Summary.png"></p>
<p>
I hope this was simple and easy to follow...</p>
<p>
Just to recap what we did:</p>
<ul>
<li>
For the core PCL library, we:
<ul>
<li>
created a Profile 104 library</li>
<li>
added some <font color="#000000"><code>MvvmCross</code> PCL libraries</font></li>
<li>
added our services - the <font color="#000000"><code>Calculator</code> </font></li>
<li>
added our <font color="#000000"><code>TipViewModel</code> which exposed properties</font></li>
<li>
added our <font color="#000000"><code>App</code> which wired the services together and defined an <code>IMvxAppStart</code> </font></li>
</ul>
</li>
<li>
For each platform, we generally went through a process like:
<ul>
<li>
created a platform specific project</li>
<li>
added some <font color="#000000"><code>MvvmCross</code> PCL libraries</font></li>
<li>
added some <font color="#000000"><code>MvvmCross</code> platform specific libraries</font></li>
<li>
added a <font color="#000000"><code>Setup</code> class which would initialise everything</font></li>
<li>
modified the platform-specific Application to call <font color="#000000"><code>Setup</code> </font></li>
<li>
created a <font color="#000000"><code>Views</code> folder</font></li>
<li>
added a platform specific <font color="#000000"><code>View</code> </font></li>
<li>
changed that <font color="#000000"><code>View</code> base class to something beginning with <code>Mvx</code> </font></li>
<li>
added a <font color="#000000"><code>public new TipViewModel ViewModel</code> to link the <code>View</code> to the <code>ViewModel</code> </font></li>
<li>
modified the XML for that <font color="#000000"><code>View</code> to add the UI fields</font></li>
<li>
modified those UI fields to add databinding to the <font color="#000000"><code>ViewModel</code> properties</font></li>
<li>
pressed 'Run' :)</li>
<li>
considered some ways that the UI could be improved using platform-specific UI techniques</li>
</ul>
</li>
</ul>
<p>
Generally, these same steps are what you'll follow for each MvvmCross application you want to make.</p>
<p>
We'll cover more advanced topics in future articles.</p>
<p>
Thanks for reading</p>
<p>
Stuart</p>
<center>
<img alt="Sketch" src="https://raw.github.com/slodge/MvvmCross/v3/v3Tutorial/Pictures/AnMvvmCross4.png"></center>
</div>
</div>
</div>
</div>
<p>
.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>
History</h2>
<p>
22nd March 2013 - First Submission</p>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.