Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Tagged as

MvvmCross - v3 - Writing a First App

, 23 Mar 2013 Ms-PL
MvvmCross - A CrossPlatform MVVM Sample
forcodeproject.zip
Images
AnMvvmCross4.png
TipCalc_Android.png
TipCalc_Android_Styled.png
TipCalc_Sketch.png
TipCalc_Store_Designer.png
TipCalc_Store_Emu.png
TipCalc_Summary.png
TipCalc_Touch_Design.png
TipCalc_Touch_Outlet.png
TipCalc_Touch_Sim.png
TipCalc_WP_Designer.png
TipCalc_WP_Emu.png
TipCalc_Wpf_Designer.png
TipCalc_Wpf_Run.png
<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)

Share

About the Author

slodge
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 | :)
Follow on   Twitter

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141220.1 | Last Updated 23 Mar 2013
Article Copyright 2013 by slodge
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid