Monday, April 22, 2013

N=0 : A first MvvmCross Application (N+1 days of MvvmCross)

As the first step in N+1 days of MvvmCross, here's a first video.



In it, we make a core library containing the App and our first ViewModel:
  1. We create a first PCL Core library
  2. We add MvvmCross Hot Tuna StarterPack using NuGet
  3. We change the namespace on the App and ViewModel
  4. We add some more logic to the ViewModel - just a simple FirstName, LastName property pair with a calculated FullName
Then, we add a Windows Store UI:
  1. We create a WindowsStore UI project
  2. We add a reference to the PCL Core
  3. We add MvvmCross Hot Tuna StarterPack using NuGet
  4. We change the namespace on the generated Setup
  5. We make some small changes to the default App.xaml,cs file
  6. We then add a Views folder and a FirstView
  7. This adds a Common/LayoutAwarePage - which we edit a little to turn it into an MvxStorePage
  8. We can then add some Databound TextBlock's and TextBox'es to the XAML
  9. We can then hit F5 to run the app
Then we add a Droid UI:
  1. We create a Xamarin.Android UI project
  2. We add a reference to the PCL Core
  3. We add MvvmCross Hot Tuna StarterPack using NuGet
  4. We change the namespace on the generated Setup, SplashScreen and FirstView classes
  5. We edit the FirstView AXML file to include the correct local XML namespace
  6. We can then add some Databound EditText's and TextView's to the AXML
  7. We can then hit F5 to run the app - this takes a little time because I hadn't set up the emulator beforehand - sorry!
 Then we add a WindowsPhone UI:
  1. We create a WindowsPhone UI project
  2. We add a reference to the PCL Core
  3. We add MvvmCross Hot Tuna StarterPack using NuGet
  4. We change the namespace on the generated Setup
  5. We make some small changes to the default App.xaml.cs file
  6. We then add a Views folder and a FirstView
  7. We then need to change the inheritance on this FirstView in both the XAML and in the C# - so that the View inherits from MvxPhonePage
  8. We can then add some Databound TextBlock's and TextBox'es to the XAML
  9. We can then hit F5 to run the app

 Then we add an iPhone UI:
  1. We create a Xamarin.iOS iPhone HelloWorld UI project
  2. We add a reference to the PCL Core
  3. We add MvvmCross Hot Tuna StarterPack using NuGet
  4. We change the namespace on the generated Setup file
  5. We make some small changes to the default AppDelegate.cs file
  6. We then add a Views folder and a FirstView - using the iPhone UIViewController template
  7. We then change the inheritance on this FirstView so that the View inherits from MvxViewController instead of UIViewController
  8. To create the UI within Visual Studio, we can then add some Databound UITextField's and UILabel's using some simple code (we will use a designer in a later exercise)
  9. We can then hit F5 to run the app - using TeamViewer to connect to a remote Mac
  10. This causes some problems - which we mainly fix by tweaking the 'set as startup project' settings, and by setting the ApplicationName, Identifier and Version for the iPhone app.
The finished code is in https://github.com/slodge/NPlus1DaysOfMvvmCross/tree/master/N-00-FirstDemo

To get this working, users will need to:

Please feel free to let me know what you think of this type of tutorial - if you like these, then I'll see if I can make one of these every day - and I'm happy for others to add their tutorials too :)

11 comments:

  1. Hi Slodge,

    Congratulation for your work.I love MvvmCross.

    However, I'm getting errors when trying to add MvvmCross Hot Tuna Starter Pack from Nuget.

    When adding Hot Tuna Starter Pack from Nuget to a Portable Class Library with one or more mobile devices I get the following error: "Could not install package 'MvvmCross.HotTuna.CrossCore 3.0.4'. You are trying to install this package into a project that targets 'portable-win+net45+MonoAndroid16+sl40+net10+wp71', but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author."
    If I unselect mobile devices at the project settings, then I can add the package. Then I add mobile devices target again at project settings and everything seems to work fine.

    When adding the same package to an Android Application oe an Android Library I get the following error:
    "Could not install package 'MvvmCross.HotTuna.CrossCore 3.0.4'. You are trying to install this package into a project that targets 'MonoAndroid,Version=v2.2', but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author."

    I haven't tried to add the package to any other device

    ReplyDelete
    Replies
    1. Thanks Dani. I *think* the problems will either be that you have a different nuget version (pre-2.5) or that you have got a different setup in terms of XML files and Xamarin assemblies. I'll try to get my friendly MS-expert to answer :) Failing that, it might be better to transfer your question/problem over to StackOverflow - people will help :)

      Delete
    2. As a first guess, please make sure you have 2.5 VSIX for nuget installed - https://nuget.codeplex.com/releases/view/104451

      Delete
    3. I've encountered a similar error and after an hour of struggling, I've found Slodge's "To get this working, users will need to:" section..

      Lesson of the Day: Make sure you read the article till the end before jumping into action..

      Delete
    4. Avinash is right! I couldn't wait and tried to add the packages.

      Now, with nuget 2.5 I can add MvvmCross packages to Android libraires. However, first proble is not solved yet. I need to remove mobile targets in PCL in order to being able to add MvvmCross packages (I can add mobile targets again once MvvmCross packages are added).

      About MvvmCross current version, are packages ready to be used in "production" apps?

      Delete
    5. Dani I have no idea what you are talking about when you say 'mobile targets' - perhaps move your problem to StackOverflow - ask a full question, include a full explanation of your problem and include screenshots and details of your current setup

      As for 'production', I think that question means very little as is. What are your metrics? How are your defining 'production ready'? Again, please move this question over to StackOverflow where you will be encouraged to ask a much more full question

      Thanks

      Delete
    6. To being able to add MvvmCroos through Nuget in Portable Class Libraries I have to edit project properties, navigate to "Library" tab (the first one) and press the "Change" button to modify the target frameworks. If I uncheck all mobile platforms (Windows Phone, VS Mono Touch and Mono for Android) then I can add MvvmCross via Nuget.

      With "ready to production" I wanted to ask if current version is a released version or a beta.

      Thanks

      Delete
    7. StackOverflow - full questions - thanks

      Delete
  2. Hi Stuart,

    I am trying to install MVVMCross NuGet package using NuGet 2.5 version. I have added the mono android and touch file to Profile104 folder. Still I am getting following exception:

    Attempting to resolve dependency 'MvvmCross.HotTuna.StarterPack (≥ 3.0.6)'.
    Attempting to resolve dependency 'MvvmCross.HotTuna.CrossCore (≥ 3.0.6)'.
    Attempting to resolve dependency 'MvvmCross.PortableSupport (≥ 3.0.6)'.
    Installing 'MvvmCross.PortableSupport 3.0.6'.
    Successfully installed 'MvvmCross.PortableSupport 3.0.6'.
    Installing 'MvvmCross.HotTuna.CrossCore 3.0.6'.
    Successfully installed 'MvvmCross.HotTuna.CrossCore 3.0.6'.
    Installing 'MvvmCross.HotTuna.StarterPack 3.0.6'.
    Successfully installed 'MvvmCross.HotTuna.StarterPack 3.0.6'.
    Installing 'MvvmCross 3.0.6'.
    Successfully installed 'MvvmCross 3.0.6'.
    Adding 'MvvmCross.PortableSupport 3.0.6' to PortableClassLibrary1.
    Uninstalling 'MvvmCross.PortableSupport 3.0.6'.
    Successfully uninstalled 'MvvmCross.PortableSupport 3.0.6'.
    Install failed. Rolling back...
    Could not install package 'MvvmCross.PortableSupport 3.0.6'. You are trying to install this package into a project that targets 'portable-win+net45+MonoAndroid16+MonoTouch40+sl40+wp', but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author.

    ReplyDelete
  3. I don't have Visual Studio 2012 - Pro, could you have some word for how to migrate this tutorial to Xamarin Studio please?

    ReplyDelete
    Replies
    1. http://mvvmcross.wordpress.com - several videos there will help. If not, stackoverflow or xam forums

      Delete