.NET MAUI and FreshMvvm MVVM Framework: Getting Started

i've talked about fresh mvvm and mvvm framework for xamarin forms applications before but now the author of this package has released an early version for dotnet maui so it's about time to see how we can get started with that but before we go look at anything i need to do a quick shout out to denise brosnichenko or dennis brostinchenko i'm sorry if i didn't pronounce that entirely correctly but he's the latest member on my channel um you can check out how to become a member by clicking that join button down below see what the perks are and one of the perks are if you become a senior developer you will get a little shout out in one of my videos thank you so much for supporting me and now quickly on to the main content of the day freshman vmfor.net maui so here i am on windows 11 on visual studio 2022 the general availability version is out now at the time of recording but remember if you want to use don and maui you need to switch over to the new visual studio 2022 preview you can run them side by side so that's no problem so i think the version number for that is 17.1 um the the stable version 452 2022 has the dot and maui bits removed because you know it's not in preview anymore so it kind of makes sense um so if you want to work with don and maui make sure to get the visual studio 2022 preview that is out now as well i got that all running here and i did a file new dotnet maui application you can see it here running in the windows subsystem for android so this is an android application that you see running here and not a windows application mind you so i'll be using that and this is just a file new template so click me and here i'm going to add the new version early stages fresh mpvm framework so let's see how to do that now let me close this one and stop running for a second we're going to wire up some things here in the maui program.cs but first you need to install the nuget package i already did that but i'm going to show you anyway so go over to the solution explorer right click on your project and go over to manage nuke packages so that's a difference right with xamarin forms we probably wanted to click on the solution level to install new good packages but now you can just click on that single project because it will automatically figure out if it needs to install the things on for the platform versions as well so that's really cool now here i'm going to search for fresh mvvm.maui you can see i already did that and make sure to check this include pre-releases one because actually it's not releases prerelease so i don't think we need this but it is labeled as version 0.0.1 so it is very early stages but i just wanted to get this out there so you can start using this and give michael ritland the author of this library maybe a little bit feedback or get used to working with this because it is going to be amazing so here we are fresh mvpm click install and then it will install automatically and you got it in your.net maui app now before we're going to wire up all this maui program stuff this is about mvvm so we of course need a page model i'm just going to reuse the main page that came with the default template and not fiddle with that so i'm just going to add a page model right here or view model whatever you want to call it so i'm going to go over to my solution explorer again right click on the project and do add class and i'm going to name this the main page model because fresh mvvm always worked with like the naming convention so if you have a main page it will figure out the main page model actually the other way around because we do page model to page model navigation or view model to view model navigation so whenever you navigate to a page model it will automatically figure out by the name which page it should resolve so if we navigate to the main page model it will automatically resolve the main page and if we then go to the next page model and it will figure out that it should find a page that is called next page so that is how it's all going to work now let's click add here and it will add that to our project now while i'm here let's also set up a property so we can see that that all works as well so i'm just going to add here public string my hello i don't know something like that get set um and let's add some value to that um hello all right so now we got that set up i will use that in a little bit to wire up the data binding as well so you can see that that all works i mean it should be no surprise but just to preview that i'm not selling you nonsense here um and now i think we got everything to wire this up in our maui program so let's switch over back to mauiprogram.cs and of course we're going to use this generic host builder to set it all up so i'm going to add to this builder here and the builder has the services property where i can register these kinds of services and now we have here because we added the fresh mvvm.maui package use fresh mvvm so it's not going to recognize this because we need to import here using fresh mvvm.maui.extensions because it lives in the extensions space and now we've wired up the fresh mvvm framework it will do its magic but we also need to register the the page models and also the pages and of course any other services that we want to use with dependency injection because one of the things that michael did the author of this package is that it now all wires into the dependency injection extensions from microsoft so before fresh mvpm would use tiny ioc i think so a tiny inversion of control container which is basically another name for dependency injection for that whole concept but now it uses the microsoft dot microsoft.extensions.dependency injection so you can use any container that is compatible with that that is really cool now let's wire up our pages so i'm going to go builder services dot at and you have to kind of like specify the life cycle here right so i'm going to make this transient and i'm going to add the main page model now again it's not going to recognize this because i need to add another using here for this add transient i'm gonna use the intellisense here using microsoft extensions dependency injection that's what i just mentioned now we also need to do the page so let's wire up that as well and now we have all the ingredients to run this application and see that it works well almost because we are still using our new main page in our app right so let's go over to our solution explorer to our app.example.cs because here we're still setting the main page to new main pages of course that's not something that we want to do so now we want to do var tabbed page is new fresh mvvm dot maui dot here we go fresh tabbed navigation container so because this is the first page right so we need to set this up this is the only place basically where you want to create a new container a new page so we're going to use this fresh tab navigation container because if we use that it will automatically now resolve all the dependencies when we use the navigation through this container and i'm using a tab page here but of course we also have a navigation page or i don't know he has some other pages that you can use as well and of course you're free to kind of use the one that you want so the tabbed page dot add tab let's add a tab right here let's add the main page models we need to do a model here well actually yes and i think we need to specify a title for our tab and then we can specify an icon i'm going to set that to null right now and i'm going to create an extra tab just to show you how the tabbed page will look that's going to be main one what is going on here the red squigglies ah so we need to have this main page model needs to inherit from the fresh page page model so that it knows you know it has a certain methods that it can use that it can call so let's go back to our main page model and we need to inherit this from fresh base page model i think that's it so let's see if intellisense agrees with us yes using fresh mvvm.maui okay so now we got this one go back to our app example cs we got that one and now we set our main page to be the tabbed page and we will see the new tabbed page here which has the two tabs and from there it will automatically resolve all the dependencies and all the things um so let's click uh the the run button here and it's going to deploy this app to our um android subsystem windows subsystem for android emulator kind of thing it will run our application and we are going to see our new application now powered by the fresh mvvm framework for maui here we are we can see two pages two tabs main main one you can click and switch between them this actually does the exact same thing of course because we just registered the same page but you can see it picked up on that tab page this still works actually i forgot to wire up my little data binding here so let's go back to our solution explorer and let's go to the main page and i'm going to here say now binding my hello did i name it like that my hello i think so yes my hello so i created the binding right here and you can see when i run this it will now automatically connect the the page model so the main page model and the main page together it will set the binding context for you automatically you don't need to worry about that and you can see that this binding now works out of the box because we see the hello here showing up at the top of this page the really cool thing is that the api service on the outside so kind of like what the consumer is using doesn't change that much you just need to add that little initialization to like you know your app builder um to wire up fresh mvvm now but all the rest is probably going to remain pretty much the same so if you've been working with fresh mvpm or if you've been creating content for mvvm like i have then you're really happy with that because that content is not automatically outdated you can now also apply it to don and maui which is really great i'm curious to see where this is going what other stuff might be added from here but i'm very grateful that michael ritland thank you so much for creating this package and also making it now compatible with don and maui because i've always used fresh mvpm with a lot of pleasure so i hope that will be true for other people now in don and maui as well i've went over a couple of concepts here with like dependency injection i've mentioned i already created some content on fresh mvvm it should pop up on your screen as part of the end screen so make sure to click on some content there if you want to dive deeper into um those materials as well for the rest please click that like button if you've liked this video subscribe to my channel if you haven't done so already and i'll be seeing you for my next video keep coding you

Channel: Gerald Versluis

Views: 2,230

Keywords: .net maui, dotnet maui, dotnet maui getting started, .net maui example, .net maui preview, .net 6, dotnet 6, .net maui mvvm tutorial, freshmvvm tutorial, freshmvvm tabbed navigation, freshmvvm xamarin forms, .net maui mvvm, dotnet maui mvvm, dotnet maui tutorial, .net maui demo, .net maui app, dotnet maui example, xamarin forms mvvm tutorial, .net 6 xamarin, .net maui tutorial, FreshMvvm MVVM Framework

Id: uke5GEt_Qoc

Length: 11min 3sec (663 seconds)

Published: Fri Nov 12 2021