How to Create a Mobile App Using Xamarin Forms: Part 2 - Finishing Project Setup

hello and welcome back to the let's create series where we are working on our xamarin app this is a cross-platform app between Android and iOS we're going to continue where we left off in the last episode and we're going to continue our project setup and we're going to work on the navigation service so let's get into it let's go ahead and create our services so we need a navigation service which is going to give us a way to navigate between the page models so we can add a new folder and we can name this navigation and then we're gonna want to add an interface so you can add class and make this an interface and we will name it I navigation service and then we're going to want to add in a regular class and this is going to be navigation service which is the implementation of the interface so navigation service so now we have a public class we'll go ahead and make a public public class navigation service and it needs to implement eye navigation service and eye navigation service is going to be need to be a public interface and we need a couple methods mainly only two we need a a task which is the return type and that's going to be navigate to async and this will take in a tea page model base and then we will take in an object for navigation data which will be optional so we will set it to default to null and then an optional boolean to set route and will default this to false and this will let us when we when we navigate forward or we do like a you know a push on the navigation stack we may want to clear the navigation stack after we push and so that will set that optional parameter that we can deal with later and we also want a go back a sink so a way to pop the navigation stack so we'll say task as the return type again and we'll just say go back a sink and I don't think this one's gonna need any type of parameter so we can just leave that one empty and let's go ahead and add some summaries to these so the navigate to a sink summary will be basically a navigation method to push onto the view the navigation stack and then our go back is just the opposite so a navigation method to pop off of the navigation stack okay and then we need to provide those implementations for each of those methods so we can go back to the navigation service and we should get like a red line and error and if we just do the quick fix it'll say implement interface and it'll bring in those two methods so navigate navigation services go back a sink is pretty easy all we need to do is grab the navigation from the current page and just pop a sink so we can just return that so we'll say return app current dot main page dot navigation pop async and that's easy enough now the navigate to is gonna be a little more complicated and so we need to check a couple things so the first thing we're gonna want to do is create the page and we created a method inside page model locator that can do that for us and all we need to do is simply provide that tee page model base and so we can do that by saying VAR page equals page model locator dot create page four and all this is looking for is a type of page model and so we could just say type of and tee page model base and that'll create the page for us and it will set the binding context and then we want to check to see if set route is true so if set route then we're just going to set this to the to the main page and so we will just say app dot current dot main page equals new and this can be just a new navigation page and it's root page will be the page we just created and then we can go ahead and bring in xamarin forms otherwise so if not set root we want to make sure we have a navigation page so we can say if app dot current dot main page is a navigation page and we'll just call it an amp age is fine then we will just push on to that nav page so we'll say return nav page dot push async and we'll just push the page otherwise we want to set a navigation page to the main page so we can say else and then we'll say app dot current main page equals new navigation page and we will just set this as root so page and then at the very end we'll just return tasks that completed tasks and that just lets us know hey you know if we set the main page that's not an asynchronous operation so go ahead and just return completed tasks otherwise if we pushed then that that itself is a task and so go ahead and return that so that should take care of the navigate to a sink and the go back a sink so now we want a way to provide some post construction initialization and so we can do that in page model base we'll go back to page model base and we're going to make a virtual method so it doesn't have to be overridden but it could be and we could just say public so I guess we'll put it above our prior protected method so we could say public virtual task as the return type and then we should import threading that task virtual tasks initialize async and this will take in an object for navigation data and this is kind of like the DTO or the data transfer object that we could pass between page models and we could set this to just be a default to know so that it's not required and all we're going to do here is just return tasks completed tasks and in each of the children page models we can optionally do something to this but we don't need to and so now a navigation service will come back and you notice we passed in this navigation data but we're at doing anything with it and so what we can do is you know before the return tests are completed tasks we can check to see if page dot binding context so if page dot binding context is a page model base and we can just give it a variable name here so page model base and then we can just return we can just return pm base dot initialize async and we can pass in navigation data which could be null and that's no big deal so then we end up with a little problem so we'll never make it down to here if we push on to the navigation stack because we're just going to return the task of pushing on to the navigation stack and so instead what we can do is create this method an asynchronous method which then won't take any return but then what we can do is we can await these things so we can just await nav page that push and then we can await PM base initialize async and then we don't have to return anything and so that'll take care of that that gives us post-construction initialization which is outstanding and when we navigate to new page models it will automatically call that so we can pass navigation data as data transfer objects and so that takes care of that so I'm gonna save everything and we can jump over to our login page so our login page all we need to do is provide some kind of way to first of all determine it is the law Paige and another thing we need to do is be able to navigate forward to something and so what we can do is take this label that we already have and we can just rename it to say login page is fine and we can even go up here into the content page attributes section and we can provide a title and this can just be login and so this will show up in that top navigation bar it'll say login and then we have this label that says login page we don't want it to have vertical options Center and expand we'll just leave it the way it is then we're gonna create a button so we can just under that label say button text equals just sign in is fine and command so when they tap it so command is binding and this will go back to the binding context which is the login page model and we can say binding sign in command is fine so sign in command okay and so now that we have that we can jump back to the login page model and we need to create this sign in command to handle the tap so we can jump in here and we could say private I command which is system that windows that input I command and this will just be sign in command and then we'll make a public variant which is something we can bind to so public I command sign in command and then all we're gonna do is is ungettable son in command the private version and then I'm set we're going to use our set property method and we'll reference that sign in command private member and we'll pass in value and so then in the initialization or even better in the in the constructor and we're gonna do this in the constructor because this only needs to be the sign in command only needs to be set one time and so initialization will happen every time while you can call it multiple times but the constructor is only on creation of the page model and so what we'll do is we'll say public login page model and in here we can go ahead and set our sign in command so we'll say sign in command equals new command and this will come from xamarin forms and we'll give it an action and we'll say on sign in action now this method doesn't exist so you can use the quick fix and that will generate the method below our constructor and we can add some kind of functionality here and what we want to do is navigate to the dashboard page model and we don't have a way to do that currently we have our navigation service but we don't we don't have a way to resolve that navigation service well that's where IOC comes in so we have tiny IOC and that handles registering services and then resolving them as dependencies and so we can use that here so we can just simply say I navigation service and just give it a name navigation service is fine and then you get you need to import that actual service and now we can save that at class level so navigation service equals navigation service just make sure there's some kind of difference so I used an underscore and then when we do a quick fix it will bring in this private member of an eye navigation service and our inversion of control will handle the dependency injection here so we don't need to worry about it but we can use it and that's the benefit here so now we can just say navigation service dot navigate to async we just provide the type of the view model that we want to navigate to and so that's dashboard page model and any optional parameters we want to send and we don't need to send anything so we'll just leave it empty and use a semicolon and that should take care of that the very last thing we want to do before we test this is make sure our page model locator has the registrations that we need and we don't so we need to register our pages and page models and we also need to register our services so registering the services is pretty simple we can just go under the regice regice Terr services comment and we can just use our container directly and say container dot register and this will take the interface name and the implementation name so I navigate in service , navigation service and then we need to import navigation and that will register the I navigation service the other thing we need to do is register the pages to their page models and so we can do that by making a private static method we can just do that here at the bottom we can just say static void register and this will take in a page model and a page so we could say tee page model and tee page and then we can just put some restrictions on us so we could say where tee page model extends from page model base and where tee page extends from a xamarin forms page and so that puts restrictions on these type parameters and then we can just register these to our look-up tables so if you look up as well as the container and view lookup we're going to do a page model and then a page and so we can do that here we could say if you look up dot add and so the first thing we'll add is type of tee page model and we'll also register that as the key and then tee page as the value so type of tee page and so that will register it to our lookup table and then we also need to register it to the Container the view model and so this it's actually a page model so this page model is going to have some dependencies in the constructor and we rely on our tiny ioc container to resolve those dependencies and that's why we need to register these page models to the Container so we could just say Container dot Register and all we need to do is provide the type of the tee page model and it doesn't have to be actual type of we can just say tea page model and that'll do it so now we need to go ahead and register these pages and page models so we can head back up to our constructor and we can say register which is the method we just created and then we're gonna pass in the page model type so a login page model for example and the page type so login page and we'll need to bring in pages and that will register log in page model to log in page then we also want to do dashboard because we're gonna use dashboard we might as well do all the rest of them so go ahead and type all of your pages and page models and register them together okay and if you've registered all your pages and page models you should have something that looks like this and then I'm gonna go ahead and just move login page model down because I really like to have these alphabetical so I'm gonna move it down below dashboard page model and all the rest of these are alphabetical and what I kind of use as my key there is just the way they're listed in the folder because those are already by default listed alphabetically and so now we have our pages and page models registered together before we get started on launching the app we need to tell our app and xamarin forms were to actually start the app and so we can do that by going to app dot sam'l CS and we can get rid of the default main page equals new main page and we're going to create an an init navigation method and so below the constructor we can just say task which will be the return type and we'll import system not throwing that tasks and say init navigation and all this will do is resolve the navigation service of our nav service equals page model locator dot resolve and we can import the using statement and we're just going to resolve that navigation service and then we're simply going to return the navigate to login page so returned nav service dot navigate to a sink and this will just be login page model and that'll take care of navigation and then we need to handle this in the on start so in on start we will just make this an asynchronous method and inside of here we could just say a way in it navigation and now we can run our app to test to make sure it's working properly okay and if you run your app you should see something similar to the two pages I have up the first one you will have this login page and when you tap the login button it'll bring you to the dashboard page and so this is proof that the setup that we did is complete and everything is working and that just lays down the fundamental framework of how we're going to build this app and starting next time we can start doing the actual design work on the UI and start to create this actual time tracker app so that'll do it for today I hope you enjoyed the tutorial and we'll see you next time

Channel: Let's Create Series

Views: 16,012

Keywords: Mobile App, Android, iOS, Development, Visual Studio, Xamarin, Xamarin Forms, How to, Make, Create

Id: P051WIodAvs

Length: 18min 22sec (1102 seconds)

Published: Wed Jun 03 2020