Click here to Skip to main content
15,897,371 members
Articles / Programming Languages / C#

MvvmCross - v3 - Writing a First App

Rate me:
Please Sign up or sign in to vote.
4.91/5 (8 votes)
23 Mar 2013Ms-PL2 min read 74.2K   34  
MvvmCross - A CrossPlatform MVVM Sample
<h1>
    MvvmCross TipCalc - A Recap</h1>
<h2>
    Introduction</h2>
<p>
    This article is&nbsp;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&#39;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 &#39;Run&#39; :)</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&#39;ll follow for each MvvmCross application you want to make.</p>
                                                                                                <p>
                                                                                                    We&#39;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&nbsp;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.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
Software Developer Cirrious Ltd
United Kingdom United Kingdom
Developing software since 1982. Currently engrossed in both cloud and mobile technologies. Currently spending far too much time on MvvmCross... and loving every second of it Smile | :)

Comments and Discussions