N=5: Some first ICommands and multiple page (N+1 days of MvvmCross)

Back in action after some Xamarin Activation gremlins, I've recorded a new N+1 :)

This sample shows:

• some fab new features which make the 3.0.5 nuget packages even easier to use
• how to add ICommand's to ViewModel's
• how to bind ICommand's to Buttons in WinRT, WP, Droid and Touch
• how to add multiple view models
• how to add multiple views in WinRT, WP, Droid and Touch
• how to navigate between views/view models

The finished code is in: https://github.com/slodge/NPlus1DaysOfMvvmCross/tree/master/N-05-MultiPage


The video of the action is:




Wasn't quite up to my normal speed today - sorry, will type quicker but will talk slower again next time :)

Now we're up and running, if you have any other feedback or requests, please put them on comments here or on Xamarin forums.

If you have technical questions, then StackOverflow please :)

It's good to be back!


Previously in N+1:

• N=0 - a first application - http://slodge.blogspot.co.uk/2013/04/n0-first-mvvmcross-application-n1-days.html
• N=1 - tip calc - including the Android Designer and using IoC -http://slodge.blogspot.com/2013/04/n1-tipcalc-second-example-adding-ioc.html
• N=2 - Kittens - lists and tables - N=2: Lists and Kittens (N+1 days of MvvmCross)
• N=3 - Kitten Cells on iPhone - http://slodge.blogspot.co.uk/2013/04/n3-kitten-cells-on-iphone-n1-days-of.html
• N=4 - ValueConverters - http://slodge.blogspot.co.uk/2013/04/n4-valueconverters-n1-days-of-mvvmcross.html 

Section Binding in MvvmCross's MonoTouch.Dialog - Awesomeness from Alexey

Last month Alexey published some extensions to our MvvmCross vNext Dialog port which allow Dialog Sections to be dynamically bound to collections.

This enables you to load (and bind) your sections direct from ObservableCollections - which is awesome.

The code is on https://github.com/asednev/MvvmCross.AlexeysExtensions - complete with:

• a really good Readme.md showing how to use the new BindableSection generic element.
• a full sample too

This is awesome - and earns Alexey a huge badge of awesomeness! Thanks Alexey!

A guest post in N+1 - totally awesome - thank you TheBearF8 - awesome

As some of you know, my N+1 series on MvvmCross is mainly Visual Studio based so far....

This has left a few of the Mac-based Xamarias lost... sorry

However, into this void stepped a hero called Barry - also known as TheBearF8 - and he recorded his first ever screencast - a one-shot demo showing you to reproduce the n=0 in just Xamarin Studio without NuGet.





This is simply awesome - helping MvvmCross out heaps - thank you Barry the Bear - a badge of awesomeness well earned and truly deserved:

Portable wrappers for Siaqodb - awesome work from RickDuarte!

A couple of weeks back I saw a tweet from @siaqodb about a PCL wrapper for their database.

It seems a @RickDuarte has been busily generating this wrapper and has open sourced it on GitHub for everyone to use.

This is especially fab for any MvvmCross users

wanna use Siaqodb as PCL with MVVMCross, take a look here for a quick setup made by one of our customers:github.com/rickduarte/Sia…
— siaqodb (@siaqodb) April 1, 2013

This is truly awesome - and well deserving for a Badge Of Awesomeness - the first one to go to Brazil!

Obriagdo @RickDuarte!

Strong assembly names - JonStelly - awesome!

I got a request last week for strong assembly names in MvvmCross.

I've got to admit my heart sank a bit...

I wasn't too keen on the idea...

It sounded like boring dull work to do....

But then the requester - Jon Stelly - took the time to explain to me why it was such a good idea - because it enabled MvvmCross to be used in ClickOnce deployed applications.

And then ... even better yet.... he just started doing it - sending me a pull request for the first 2 assemblies.

There's still plenty more that could be done in this area - but at least we're on the road towards being ClickOnce-deployable now

Jon Stelly - thank you for the education and for the pull - awesome:

A pause in N+1

Sorry about the pause in N+1 recordings

The problem is that Xamarin Activation problems have hit my PC.

I've not changed any of my licenses, they haven't expired, but the Xamarin activation code decided it didn't want me to do any more work.

I hope to be back coding again soon. N+1 will continue

Stuart

Auto resource namespace resolution for Android XML

Oh yes! Oh yes! Oh yes!


The mighty @CheeseBaron has just pointed out to me that you can use this syntax in your Android XML in order to automatically include the local namespace:
 

  xmlns:local="http://schemas.android.com/apk/res-auto"

Tried it in Xamarin.Android and it seems to work :)

So, you no longer need to use the old syntax like:

  xmlns:local="http://schemas.android.com/apk/com.my.package.name"

This little hint is going to remove yet another one of those little editing annoyances - thanks, CB :)

Adding Kittens to Blend's design time data

I love Kittens - especially PlaceKitten :)

To support PlaceKitten inside the Blend Visual Studio designer I edited the SampleStrings.csv files in:

• C:\Program Files (x86)\Microsoft Visual Studio 11.0\Blend\SampleDataResources\en\Data
• C:\Program Files (x86)\Microsoft Expression\Blend 4\SampleDataResources\en\Data

To each of these files I added a new column "Kittens" and in that new column I added entries like: http://placekitten.com/301/301


Then, after restarting Blend I can use Kittens in sample data - like:

If you are desparate for kittens, my complete file is:

N=4: ValueConverters (N+1 days of MvvmCross)

This N+1 video is about ValueConverters


This video moves 'quite fast' - I'm assuming now that I don't have to explain how we create basic apps - if you find this too fast, then please return to the earlier videos :)


In this video we:

• Create a simple ViewModel which has one text property, Foo
• Create a number of ValueConverters to convert to/from the Foo string
• Rush through the creation of sample apps on all 4 platforms which use those ValueConverters

The video is:






I like ValueConverters and I use them a lot:

• Partly this is because they really help when it comes when converting from cross-platform data types (like MvxColor and MvxVisibility) to platform specific equivalents
• And partly this is because I use them for validation/control visual effects - e.g for enabling/disabling controls while async network calls are occurring

However, not everyone likes them and I have a lot of respect for the opinions of those who don't like them... If you would like some in-depth background to some of the contentious issues about ValueConverters then check out: http://programmers.stackexchange.com/questions/114090/are-value-converters-more-trouble-than-theyre-worth



I think next on N+1 (tomorrow) I will start to look at some Plugins.


If you've got any feedback on this series - or anything you'd like to see covered, then please get in touch.


Previously in N+1:

• N=0 - a first application - http://slodge.blogspot.co.uk/2013/04/n0-first-mvvmcross-application-n1-days.html
• N=1 - tip calc - including the Android Designer and using IoC -http://slodge.blogspot.com/2013/04/n1-tipcalc-second-example-adding-ioc.html
• N=2 - Kittens - lists and tables - N=2: Lists and Kittens (N+1 days of MvvmCross)
• N=3 - Kitten Cells on iPhone - http://slodge.blogspot.co.uk/2013/04/n3-kitten-cells-on-iphone-n1-days-of.html

N=3: Kitten Cells on iPhone (N+1 days of MvvmCross)

This video recording was a bit of a disaster - sorry!


I think I hit every technical gremlin possible during this recording...


But still I managed to get this done inside 30 minutes - so I hope this video is useful to you :)


I also hope you don't mind me posting this 'as is' - I obviously could have removed the mistakes/problems or I could have re-recorded this session - but I thought seeing the problems would be heplful to you.

----


With that explanation out of the way....


The flow I tried to demonstrate was:

• Switch yesterday's N+2 solution across to the Mac
• Load the solution inside Xamarin Studio
• Change the configuration of the solution so that it correctly worked for the 'iPhone Simulator' configuration
• Use the Add->New wizard to add a new 'iPhone Table Cell'
• Use the xCode XIB editor to change the Table Cell layout
• Use the xCode Assistant editor to link the UI controls in the layout to 'Outlets' 
• Save in xCode and return to Xamarin Studio
• Let the automation in Xamarin Studio create C# properties from the 'Outlets'
• Use the code editor to change the UITableViewCell to an MvxTableViewCell
• Use the code editor to add some Data-Bindings for the cell
• Use a special MvxImageViewLoader to load the image from the Internet
• Run the app

During the demo I hit several gremlins and made a couple of mistakes myself - but I hope you can learn from these. If nothing else, you can learn not to trust everything I say :)

The modified code is on: https://github.com/slodge/NPlus1DaysOfMvvmCross

The video is:

Previously in N+1:

• N=0 - a first application - http://slodge.blogspot.co.uk/2013/04/n0-first-mvvmcross-application-n1-days.html
• N=1 - tip calc - including the Android Designer and using IoC -http://slodge.blogspot.com/2013/04/n1-tipcalc-second-example-adding-ioc.html
• N=2 - Kittens - lists and tables - N=2: Lists and Kittens (N+1 days of MvvmCross)

Next up... maybe some value converters

Please do let me know if these N+1 demos are useful, if you'd like to see these recorded slightly differently, if you'd like a topic covered, if you'd like to record a session or if you have anything at all to say :)

Stuart

N=2: Lists and Kittens (N+1 days of MvvmCross)

A second N+1 today - and now we're looking at extending our viewmodel and view relationship into using Lists


Each native platform has several controls for handling list display and MvvmCross tries to treat them all in the same way - for each and every platform, MvvmCross provides or uses an ItemsSource and an ItemTemplate property for data-binding.


In this sample, we quickly run through the 4 modern platforms:

• we create a shared PCL core with a single ViewModel which contains a List
• we add a UI for each platform
• within each UI we use one or more templates to show the List and the ListItems
• within the Android and iOS platforms, we also add 2 plugins - File and DownloadCache - in order to provide some Internet image download functionality

With iOS, we do leave some ListItem/cell customisation work 'TODO' - we will return to this in the near future.



Warning: this tutorial does move quite quickly - it's designed for people who have already watched one or more of the previous N+1 videos, and for people who have some knowledge of Mvvm already.


The finished source is available on: https://github.com/slodge/NPlus1DaysOfMvvmCross/tree/master/N-02-KittenView


The video:




Previously in N+1:

• N=0 - a first application - http://slodge.blogspot.co.uk/2013/04/n0-first-mvvmcross-application-n1-days.html
• N=1 - tip calc - including the Android Designer and using IoC - http://slodge.blogspot.com/2013/04/n1-tipcalc-second-example-adding-ioc.html

N=1: TipCalc - a second example - adding IoC and the Xamarin Android Designer (N+1 days of MvvmCross)

Following on from yesterday's first app, today we build a Tip Calculation app for WindowsPhone, Xamarin.Android, WindowsStore and Xamarin.iOS


This walkthrough provides a second example of using the MvvmCross Nuget packages to create a new app.


It repeats many of the steps from yesterday, but also adds:

• the use of IoC to create a Service and to automatically inject that Service into the ViewModel constructor
• the use of Slider (Windows), UISlider (iOS), and SeekBar (Android) in databinding
• some simple use of the Android designer to create a UI - you'll quickly see that I'm not a power user of this designer :)

The code is up on:

• https://github.com/slodge/NPlus1DaysOfMvvmCross/tree/master/N-01-TipCalc

To use this code, users will need to:

• install Visual Studio 2012 - Pro - or higher
• install Xamarin.Android and Xamarin.iOS
• install the PCL reference assembly XML files - see notes in http://slodge.blogspot.co.uk/2013/04/my-current-pcl-setup-in-visual-studio.html
• install the Beta of NuGet 2.5 - https://nuget.codeplex.com/

The video is:





Sorry about the indecision between int's and double's at 4 minutes in :) Not feeling very decisive this morning!


For a longer (and slightly-out-of-date) TipCalc tutorial, try http://www.codeproject.com/Articles/566191/MvvmCross-v3-Writing-a-First-App



Previously in N+1:

• N=0 - a first application - http://slodge.blogspot.co.uk/2013/04/n0-first-mvvmcross-application-n1-days.html

My current PCL setup in Visual Studio for the Xamarin twins

To get PCLs working for the Xamarin Twins (MonoTouch and Mono for Android) in Visual Studio - the only current changes I make are these two files which I add to:


C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETPortable\v4.0\Profile\Profile104\SupportedFrameworks




If you have previous files added - especially for VSMonoTouch - then please remove these .xml files as they may cause issues.

Following Evolve, we *hope* that these additional files won't be needed soon - hopefully in the next 4 to 8 weeks. Please bare with us - the best cakes take time to bake :)

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:

• install Visual Studio 2012 - Pro - or higher
• install Xamarin.Android and Xamarin.iOS
• install the PCL reference assembly XML files - see notes in http://slodge.blogspot.co.uk/2013/03/xamarinios-with-mvvmcross-in-vs2012.html and http://slodge.blogspot.co.uk/2012/12/cross-platform-winrt-monodroid.html
• install the Beta of NuGet 2.5 - https://nuget.codeplex.com/

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 :)

My pre-Evolve talk

In the lead up to Evolve, I gave a talk at the London WindowsStore developer group

The camera work is a bit 'zoom happy' and the talk is actually quite different to the one I gave in Texas - but here it is for those of you who are interested:

Evolve - sphero action

Last week at Evolve was awesome - simply awesome

I hope to blog more about that in the coming week (or weeks!)

But in the meantime, here's the video of my 5am jetlag-inspired action with 7 spheros




:)

v3 Beta continues.... with a small breaking change...

I've recently pushed a small change to the source tree which broke a lot of code...

The central "Container" class, Mvx, has moved from `Cirrious.CrossCore.IoC` to `Cirrious.CrossCore`

The reason for this was because I also added some Exception and Trace helpers to that `Mvx` class - it's started to become MvvmCross's `$` helper.

Sorry about breaking code - but you'll be glad to see that the quantity of this type of change is very, very much reduced now - v3 is most definitely in Beta :)

Thanks for reading

Stuart

MvvmCross Technical Day in London

Finally we have a date and a venue:

Modern Jago in East London

Monday May 13th 2013

I've put a sign-up page live on http://mvvmcross.eventbrite.com/

Currently the plan is to have a full day of in-depth talks about MvvmCross, about real-life Mvvm cross-platform projects, and about C# and Mvvm deployed using both Microsoft and Xamarin products, and to then provide a separate room where people can get some hands-on coding time if they want to.

Thanks hugely to Microsoft UK for providing such an excellent venue.

The event is free. But please only sign up if you really intend to come - space is limited.

If anyone wants to talk at the event - whether in a 'expert' role, or about an app you've developed, or about something else - then please contact me - me@slodge.com

This is a free event, but if anyone wants to assist with sponsoring:

- food and drink
- event video recording
- speaker travel costs

then please again get in touch - me@slodge.com