FreshMvvm n=3: Navigation in FreshMvvm

Here’s the next video in the  FreshMvvm n+1 series. The idea of this series is to get the video’s out to the eager listeners (you) as quickly as possible, therefore these videos are done live with almost no editing.

Episode Title: n=3: Navigation in FreshMvvm

In this episode we discuss:

  • Review FreshMvvm’s built in Navigation Abilities
  • Understand how navigation works in FreshMvvm

I hope you enjoy.

FreshMvvm n=2 – IOC and Constructor Injection

Here’s the next video in the  FreshMvvm n+1 series. The idea of this series is to get the video’s out to the eager listeners (you) as quickly as possible, therefore these videos are done live with almost no editing.

Episode Title: n=2 – IOC and Constructor Injection

In this episode we discuss:

  • Review FreshMvvm’s built in IOC container
  • Setup a decoupled Data Service with interface
  • Use the PageModel Constructor Injection
  • Use a 3rd Party Library in the IOC Container

I hope you enjoy.

 

 

FreshMvvm n=1 : Your first FreshMvvm Application

Here’s the next video in the  FreshMvvm n+1 series. The idea of this series is to get the video’s out to the eager listeners (you) as quickly as possible, therefore these videos are done live with almost no editing.

Episode Title: n=1 Your first FreshMvvm Application

In this episode we discuss:

  • Creating a New Project adding FreshMvvm
  • Automatic wiring of BindingContext
  • PageModel to PageModel Navigation
  • Automatic wiring of Page events (eg. appearing)
  • Basic methods (with values) on PageModel (init, reverseinit)

I hope you enjoy.

 

Also, if you want to know more awesome things about Xamarin.Forms then my eCourse is a must do! ‘Secrets of a Xamarin.Forms Ninja

Thanks

Michael

 

Mixing MvvmCross Native Views and Xamarin.Forms Pages

If you’ve read my blog before you probably already know that I’m a avid Mvvm supporter. You’ll also know that I use FreshMvvm alot in my Xamarin.Forms solutions. While I love FreshMvvm it’s always important to pick the right tool for the job.

In a recent project at XAM Consulting we had a project to enhance a large pre-existing application that was built in MvvmCross and ‘Xamarin Traditional’. There was a few things to consider on this project a) it was a pre-existing app with a large amount of business logic b) there was a large amount of changes required c) there was also a large amount of existing Native Views.

If you’ve been in software long enough you know rewriting is the wrong thing to do in the majority of cases. The original application had nice clean code and good architecture, we wanted to keep this but when building new screens it’s very hard to look past the advantages of Xamarin.Forms.

So essentially we wanted to both keep the Native Views and add in a few pages of Xamarin.Forms. Currently all the solutions for MvvmCross and Xamarin.Forms are related to having a Forms app with MvvmCross backend, not mixing the two.

I’ve included a diagram below to help you understand what’s happening in the app.

MvvmCrossAndXamarinForms

So what’s the secret sauce? 

It’s important to understand this is really a MvvmCross application but with support Xamarin.Forms pages instead of Native View.

Here’s some of the major components done to implement this, not a step by step guide.

1) Implementing custom MvvmCross presenters

This need to be done in both the iOS project and the Android project. In iOS the class we need to inherit is MvxTouchViewPresenter and we need to override the Show method. In Android the class we need to inherit is MvxAndroidViewPresenter. 

In Android

In iOS

2) Setup MvvmCross to use the new presenters

To do this we need to override the CreatePresenter method on the Setup.

In Android

In iOS 

3) The Secret Sauce

Generally the concepts are the same on both platforms, when we come across a ViewModel ending with XFViewModel then we assume it’s Xamarin.Forms View Model. When it’s Xamarin.Forms ViewModel we 1) Find the Xamarin.Forms Views 2) Convert it into a Native View 3) Setup the BindingContext 4) Display/Native the Native view as if it’s a MvvmCross view.

In iOS 

iOS is was much easier, primarily because Xamarin.Forms allows you to easily create a ViewController.

In Android

It turns out this is a bit harder in Android. This is because Xamarin.Forms Navigation and MvvmCross navigation is very different, Xamarin.Forms has a single Activity for a application while MvvmCross has an activity per page, we need to trick the Xamarin.Forms pages into using a single activity.

 

Below is the Xamarin.Forms container activity, normally there would only be a single Activity but in this case we want to create a Activity for every page. You’ll also notice we resolve the MvcAndroidLifetimeMonitor and we pass the Forms activity events, this hooks the Xamarin.Forms page into the MvvmCross Navigation.

 

Now that we have the container for the Xamarin.Forms Page we can override the show method and handle the Xamarin.Forms ViewModel requests.

 

Android also requires some extra work when Pages/Views are closed, this is because MvvmCross ignores close events if it’s not a MvvmCross view, which in this case it isn’t. So we need to handle the close ourselves and skip the ignore clauses.

4) The helper methods

You might have noticed both the iOS project and the Android project referenced some helper function, here’s the code from the helper classes. The functions are used to help create the View Models and Pages.

The End

So that’s the core pieces of the puzzles, this blog is not a step by step guide so if you want a easy way to see this code work I recommend looking at it on github.

Github Sample Repository

Need an App built or Xamarin.Forms training? – You can hire me!

Want to be a Awesome Xamarin.Forms developer? I’m building a eCourse that’ll teach you all that you everything you need to know.

SecretsOfAXamarinFormsNinja

Creating a Native View from a Xamarin.Forms View

WARNING: this is a expert level technique and isn’t officially supported by Xamarin.

Personally I feel like this is the holy grail of Xamarin.Forms development, having the ability to jump between both Xamarin.Forms Views and Native Views. I’ve used this technique multiple times in Xamarin.Forms apps.

It’s primarily used when you’ve created a custom renderer and you’re working against Native UI APIs, this could be in the native maps API or a 3rd party native component. Now once you’re in the Native area of the application there’s cases where you need to show a view for the user but you still want to have the View shared between the platforms.

To give you an idea the structure might be as follows.

Xamarin.Forms -> Native View

In the diagram above the secret sauce is in orange, taking a Xamarin.Form View and converting that into a native view. This converts to a UIView in iOS and ViewGroup in Android.

Below I’ve written two helper classes that take a Xamarin.Forms view and convert it into the NativeViews. In my experience this code works the best when the Xamarin.Forms view is a Layout.

iOS Converter Class

Android converter class

I’ve created a github sample application, please find it https://github.com/rid00z/LoadingFormsViewFromNative. *** Please note this iOS project uses UIPopover which is only available on iPad so you must use the iPad for this demo.

If you want to know more awesome Xamarin.Forms techniques then my eCourse is a must do! ‘Secrets of a Xamarin.Forms Ninja

Thanks

Michael

 

New Xamarin.Forms eCourse

I’ve been blessed in my career, having the opportunity to join the Xamarin world over 4 years ago. In my 4 years of Xamarin I’ve been able to publish over 8 Xamarin Applications into the App Stores and work on million dollar Xamarin projects. I’ve been a Xamarin.Forms fan since its first release and released many Xamarin.Forms applications into production. I know that there’s been many developers that haven’t had the same success with Xamarin.Forms. In some cases this could be an issue with Xamarin.Forms or an incorrect application of Xamarin.Forms but the truth is ‘anything that can be done in a Native application can be done in a Xamarin.Forms application’ and faster.

After seeing the potential of Xamarin.Forms and diving in head first I now have an amazing amount of knowledge about developing real world applications with Xamarin.Forms. Considering this I’ve decided to share this knowledge with the world.

Without further ado I’m now announcing my first ever eCourse – ‘The Secrets of a Xamarin.Forms Ninja’.

If you haven’t picked it up the Ninja part is inspired from a book named ‘Secrets of the Javascript Ninja’. I felt this naming was very appropriate as the book and my course have the same goal… to teach the secrets that can only be learnt from years developing production applications.

At the moment this course is in a planning stage, so if you would like to be notified on it’s release please sign up below.

 

Subscribe to michaelridland.com for eCourse release info


 

 

 

 

Links and Code from 10 Awesome Xamarin.Forms Tips and Tricks

This blog post contains the links from my Xamarin talk on Xamarin.Forms tips and tricks. The original slides can be found here. Many of these tips and tricks require full blog posts and I’ll be writing them over the next few weeks. For now it’s just the links to the code.

Here are the links

3rd Party FastCell Solution

This is a 3rd party FastCell implementation, I used it before and found it to work quite well.

https://github.com/twintechs/TwinTechsFormsLib

TaskCompletionSource Blog Post

http://www.michaelridland.com/xamarin/taskcompletionsource-xamarin-beautiful-async/ 

Bindable Property Template

https://gist.github.com/rid00z/23b64436dd104f5d810d#file-bindablepropertytemplate-cs

Add some Xamarin.Forms to your MvvmCross app

https://github.com/rid00z/MvvmCrossNavigationDemo

Converting a Xamarin.Forms view into a Native View

https://github.com/rid00z/LoadingFormsViewFromNative

AsyncHelper RunSync

https://gist.github.com/rid00z/96b875f096cbc7cbcba8

These are just the links so keep an eye on the blog for more blogs and maybe even some training videos.

If you need any help using Xamarin or want to develop a mobile apps please feel free to contact me anytime.

Thanks

Michael

 

Best practices for using Xamarin Plugins

I’m sure by now you’re aware of the great amount of Plugins available for Xamarin. There’s plugins for almost everything, connectivity, localstorage, settings etc etc.

Generally these plugins are very easy to use, you can download from nuget and start using in a few single lines. Most of the documentation/blogs will show the single liners. Which sounds good to begin with but calling a dependency/API directly isn’t good as it tightly couples your business logic and makes unit testing very difficult.

Fortunately most of the plugins are interface based which means they support Inversion of Control, even if they don’t have interfaces you can supply your own interfaces.

Let’s take a look at an example using the Acr UserDialogs plugin.

You’ll notice that even examples call the API directly.

No, no, no, don’t do this. Highly coupled code will end you in bad places.

The correct way, well one of the correct ways, to implement a service like this is to use a IOC container and have the dependencies injected into your PageModels. Any good Mvvm Framework will support this. In this example I’m going to show you how to implement using FreshMvvm.

Below I add the UserDialogs Instance into the IOC container during my application startup.

It’s a single line: FreshIOC.Container.Register<IUserDialogs> (UserDialogs.Instance);

Screen Shot 2015-07-23 at 10.46.14 am

Because I’m using the Mvvm Framework to push between PageModels I can easily have the plugin dependency injected into the object. In the sample below I’m using my QuotePageModel that shows the dialog when a quote is being saved. NB* Those dependencies are injected into the Model automatically.

Screen Shot 2015-07-23 at 10.56.10 am

The dependencies can now be used from within the Commands.

Screen Shot 2015-07-23 at 10.59.22 am

Now that we’ve setup dependencies correctly we can easily unit test our PageModel methods. In the sample below I’m using the Moq framework to Mock out our dependancies and Verify the Update Quote method gets called.

Screen Shot 2015-07-24 at 10.34.39 am

It’s a very small change and it’s very easy to implement, the tradeoff of using Plugins in this manner is well worth the effort.

All this code is taken from a sample app that I’ve uploaded to github.

Thanks

Michael

 

Implementing custom navigation in FreshMvvm for Xamarin.Forms

In past posts I’ve already introduced the FreshMvvm framework for Xamarin.Forms. If you haven’t taken a look I suggest this post to give you an overview of FreshMvvm.

I use FreshMvvm in the majority of my projects. I love it’s simplicity but most of all it’s flexibility. The Framework is Interface based and designed to be flexible. One of the most important areas of an app is the Navigation, while FreshMvvm has some great built in Navigation abilities sometimes we might need to extend this and create our own Navigation Service.

FreshMvvm comes with an interface named IFreshNavigationService which allows any type of custom Navigation. The steps to implement a custom navigation service in FreshMvvm are as follows:

1) Implement the IFreshNavigationService interface

2) Register the implementation in the FreshMvvm IOC container

Let’s start by taking a look at the interface.

Let’s begin with a simple NavigationService using a basic NavigationPage. We can name this class SimpleCustomNavigationService, inherit from NavigationPage and implement the IFreshNavigationService interface.

Now that we have our Navigation service we just need 1) create the navigation service 2) register the navigation service in the IOC container 3) display the navigation service in the main page.

So now that we’ve correctly implemented the Navigation Service, we can achieve the holy grail, with PageModel to PageModel navigation.From any of our PageModels we can now push the PageModel by using the PushPageModel<T>.  As you would expect the ‘CoreMethods’ property is also interface based making it perfect for unit testing.

Some more complex examples

What I find people fail to understand is that using this interface you can implement any type of advanced Navigation you like. There’s a few things to understand.

1) You can use custom logic to register a Navigation Service, an example of this would be to use to different types of Navigation Services per platform or based on screensize. In this example I’m using a MasterDetail for the Phone and a TabbedNavigation for the Tablet. You can do anything you like in this case.

2) The Framework doesn’t care what you put into the Push and Pop methods, you can put any type of UI logic that’s required for your interface. In this example below I’m combining a MasterDetail and a TabbedPage.

The best part about all of these NavigationService’s is that you can swap them out and never have to change your PageModels.

I’ve uploaded a sample app to github here.

If you have any question please feel free to contact me. 

PS, if you find any parts that need improvements or you have a better options please email me, I’m always trying to improve this Framework and all feedback is welcome.

Thanks

Michael