Getting Started with .NET MAUI and MVVM

I'm going to delve into the new world of dotnet Maui I've developed desktop applications WPF for well over 10 years of my career at this point and I figured it was time to try something new and so I wanted to basically build a Android mobile application for a game that I play on my smartphone the game is called Warpath it's basically a World War II style RTS game and just to give you guys some context of what we're going to be building is a unit planner app that's going to allow us to plan out our ground units and air units in the game effectively you can only make so many units every few months because the amount of resources in the game that it costs and so it requires kind of long-term decision making and so we're going to build an app that allows us to do that type of planning and long-term decision making in the app where we don't actually have to spend those resources in the game so enough about the app but I figured we would kind of refresh the channel a little bit and what a better way than to build a new.net Maui app with the model view view model pattern and we're going to start by building up our own mvvm framework and I know next nothing about.net Maui other than just kind of what I've dabbled in getting started with setting it up so we're going to kind of learn and experience everything as we go so you can see the app up on the screen so the basic layout of the app is we kind of have some game resources uh we've got some what are called components and then we've got what are called some prototype coupons and so the idea of this app is that we're going to allow a person to type in the amount of resources that they currently have in the game and then we want to essentially code the app or they can pick up to five specific ground units and there's different kinds like artillery or tanks or helicopters and so on and we're going to also allow them to pick what's called a unit grade which is basically a star rating so there's like you know six star 6.1 star 7 Star 7.1 star 8 8.18.2 9.0 9.1 9.2 so those are the different ratings and each of those different ratings require a certain amount of these resources to make that unit that unit grade and so what we're going to do is build the app that allows the person to basically plan out their army and figure out how they want to spread their resources across up to five units and that's the context of the app so in this video we're going to build a very basic starting point for the model view model pattern so again kind of My Philosophy with mbvm is I'm not a huge fan of using third-party Frameworks there's a lot of reasons for that uh one is I've always liked to build everything myself but as I've also become part of larger corporate organizations and in the position that I am I've also learned that it's pretty ideal to reduce your footprint of third-party sdks there's actually legal reasons for that um but anyways so we're going to get into this and so we have kind of the app code base there's not a lot of code in here other than I have created a main page view model so as I understand it in.net Maui it is a page based framework so there are we essentially are in a shell app as I understand it so we have the app shell and that kind of defines the navigation of the app and the way that does that is through a page based system uh with shell content and so a very high level that's my understanding of it currently so we basically have the starting page which was the.net template I've kind of gutted that and that's where we've kind of come up with our own kind of layout here now a lot of the concepts I've learned are very similar to wpl so the xaml the bindings it's all very familiar the names of everything have changed however so instead of data context it's binding context so little subtleties like that make it harder to learn it because now I've got to learn all the new names of the different framework however uh we're going to start off we do have a binding context specified in xaml for now it's our instance of our main page view model so we don't have anything like dependency injection or anything set up but we do have a kind of a blank slate so the point the focus of this video is to build our starting point of our nvvm framework and so we're going to kind of do that in this project so we're going to go ahead and add a new folder because we're kind of going to isolate this off for now and then we can kind of break it out into a separate say class Library later on but we're going to rename this right now uh mbvm just as our namespace we're going to go ahead and add a new class and we're going to start with the bare bones so it might not be the most exciting video on the planet but we're going to start by creating an observable object okay now I'm going to assume that this is still effectively.net code if I actually go and look at the application we can see we're targeting.net 7 but specifically multi-targeting the Android iOS platforms and I'm not sure oh and Mac catalyst so the Mac platform okay so we're going to start with an observable object class and we're going to implement I I'm assuming it's going to be still I notify property change because the.net framework hasn't changed all that much because it still effectively targets I think.net standard 2.1 and so we're going to kind of set this up so we've implemented the Bare Bones for the interface but we're going to go ahead and add a empty delegate list by default to that which basically just means we don't have to check this for null we're going to also cheat and I always am an advocate of high quality code so in my videos you will see that we will take the time to do some documentation tasks raised when the value of a property has changed pretty straightforward documentation a property name its value changed pretty straightforward we actually don't need a null check here and I don't like the syntax of dot Vogue so we're going to remove that just to clean that up a little bit and we can actually see interestingly enough that I actually implements this using resharp or it actually added a set field method with the generic type parameter to actually invoke the property changed event that's kind of interesting actually so I don't know that we necessarily need that per se so we're going to go ahead and remove that because it really just seems like unnecessary boilerplate code so we're going to go ahead and basically document this so Base Class that supports change notification for class properties right okay so we have an observable object so that's pretty much all we need there and now what we're going to do is we're going to add another class this is going to be a view model Base Class okay and this is going to inherit from observable object and really the point of this is you might actually not want a view model to derive directs it from observable object but it's most certainly going to be our default inheritance hierarchy because 99.9 percent of the time all view models in our application will derive from this base view model class there might be some exceptions to that so this might seem okay we could Implement property changed inside the view model Base Class directly but we also want to maybe reuse that functionality which is really just boilerplate code that would be repeated all over the place we might want to derive models from observable objects and other other classes from observable object as well so it's kind of multi-purpose and now we're going to kind of Define our base view model class which really just derives from that now there's nothing particularly that we need to do with the base view model class right now because of view model class by itself is not really going to have any base functionality so other than deriving from an observable object we can actually make this class abstract because there's really not going to be a point of being able to instantiate that directly all right so basically we're going to say Base Class for modeling a view so for those of you that are maybe new to mvvm or been doing nvvm for a long time I like to be in the habit of thinking of view models as the class that models a view that's exactly what its purpose in the architecture the application is that supports change notification okay so that's our Base Class so with those two things we can go back to our main page view model and now we can derive that from our view model Base Class and our mvvm namespace and what's interesting actually is if we type out v-model again uh interestingly enough there's Android X lifecycle.viewmodel I've actually never seen that so I'm curious that it seems like there's actually some functionality in here I'm just going to peek so we've got ourselves like a Java reference application I'm going to assume that that's platform specific because it's called Android B model and we don't necessarily want to be platform specific so we're going to do something basic just to make sure that this all works so we're going to go back to our app here let's go to run it should compile because we really haven't done too much other than add two additional class files to the project so just take a moment to start up and publish the files to the device Amy later okay so our app is deployed with the updated changes so we can still see we have our app here nothing's really changed just make sure it runs okay and so if we look at the app and we can just kind of get an idea of what the app is doing it's a single page and so we have five different properties that represent kind of some kind of resource value so we're going to just make sure our base classes work and we can actually data bind and get change notification and that initial data binding and so we're going to start by actually binding this particular field so if we go find basically we have our entry here with our text value we're going to actually bind that to a property and we'll go ahead and call this refined components count okay and I something I've always liked to do in nvvm even though it's not strictly necessary is I do like to actually specify the directionality of The Binding I'm going to stop we're going to go ahead and go to our main page view model and go ahead and go publish int refined components count okay and we're going to find component counts the outer Setter equals value except this is going to be a body and then we're going to call the on property changed methods a very basic and we're going to say it gets or sets the number of refined components yeah that's one of that's just what the resource in the game is called it's called a refined component so we basically have a basic integer property now what we're going to go ahead and do is create our Constructor and we're going to just to make sure that this binds correctly we're going to set the default value of that to like let's say 50. okay we've got our documentation class that models the main page view pretty straightforward okay so we have that and we could actually check our binding to make sure we can see that on the path and we can so we have that in the intellisense that's great and what we're going to do is uh make sure that this works so we're going to go ahead and run this hey that was much faster that time to deploy to the app so that was nice so far my experience with the app has been fairly positive the debugging and F5 and hot reload seems to work okay so that's all on a plus for me coming from the WPF world because you need that real-time feedback as you're working on your app and we can see that our entry control has data bound to the property and it did read the value of 50. so now what we're going to do is set a break point in our property just to make sure that as this changes and okay so as we change it on the device apparently it is by default changing when the value changes which is a little bit different from the WPF world where the default might be on Focus change so we're going to say type seven it updated right away and so that basically we've tested our two-way data binding using our base observable object class and our base view model class that derives from that so that's all I wanted to do in this video is just a basic start of kind of building up our mvdm framework I hope you enjoyed the video if you like the content definitely like And subscribe and we will see you next time

Channel: David Anderson

Views: 947

Keywords: .net maui, dotnet maui

Id: Pu5Pu7iYRiE

Length: 14min 39sec (879 seconds)

Published: Sat Aug 26 2023