How to Create .NET MAUI Class Library,Pages,View Models,Data Binding Using MVVM ARCHITECTURE EP 5

welcome to mcro code if you're new to this channel consider subscribing so on today's video we going to proceed with our series on netm as you can see we had started an app on students app we have our homepage this how our homepage looks like Hello World welcome to multiplatform app UI that is net Maui so on the students we had created a page for students you can see you have the students list which is which is actually empty then we have the we have the homepage which will actually give us uh some analysis of students details and the profile of the students so today's video we we did a video about uh using uh mvvm so we created a page a page for students list as you can see then we have a students list uh so we have the zaml and zl. CS file then we do we did we did The Binding you can see we have the students list view model and on our students list view model it's actually empty we don't have anything then if you come to our ma program.cs file we have our Pages here and we also have our view model here so we actually using net8 so for those who are new to this channel consider subscribing like our video then uh let's begin this series so what we are going to do today I'm going to have as you can see on our app we have the home screen and we also have the students list but as you can see our list is a bit empty so I want us to First do add a model for students so I want us to add a table so we'll do let's add a folder so it stop my app for now then you'll add uh we'll say models so we we we'll have all our models here but now we can also do some interesting thing so you can add another project so we'll say add then new so let's click on our solution so let's add new project so I want us to try something I want us to add uh a class Library so then we can search here net Mai so net M you can see we now have a project for creating. netm class Library so I'll just proceed with this so you can actually create this then we'll say student so you'll say student so let's what what was the name of our our project so I'll just try to minimize this so our name of the project is student app our name of our project is student app so I'll try to create so let's go back new project then netm so we we'll create the class library then I'm going to call these students app dots so I'm going I'm going to call these do uh business or I can call this uh yes I can call the students app. bus then I'll create it I'm using net 8 as you can see I only have these two so when I create it you can see we will now have uh we will now have our students app Business and we have our main app here so on this students app. business it also has some platforms specific you can see uh this is uh W Android we have the iOS my Catalyst and the windows so you can actually have some specific uh classes here you can see all the code in this file is only included on so you can actually do that so for our case I'm going to create a folder here I'm going to create a folder on our business let's let's do something yeah there let's say models so you can actually have our models here so I'm going to remove this then I'm going to call this uh I'm going to add a model for for a student class so I'm going to say student I'm going to add a model for student so this will be public then I also want us to do something you remember we have some view models here I want us to copy to cut this view model and actually migrate to our business so if we paste it here we'll have our view model we can actually change now this to business so this is uh this will be so this will be students view model so that is it another thing that you should do is also these one and the these one so we are now having students so our namespace should change to students bus. viw models then our business uh our base view model will be student bus. view model then if we go to our ma program.cs it will actually be you can see it is actually asking for for for us to import this so CS file try to add we should be able to see this add reference to students. business add reference to students so we can actually add reference to students. bus Android so I'm going to add this so if I do that I'm able to now import my view model you can see this is now resolved so I'm able to now store all my view models here so I'll be able to have my model here and I also have my base model and the students uh view model so I can also Define some properties here so this will be so I can say this is my key so if I do that I need to import some annotations so I need to import the the data anotation then um for student we have uh so it'll say string so I have a first name sorry so this will be my first name I can also have H Str so I'll say this is my middle name so these will be my middle name can also take this I can also say this is my last sorry this is my last name so if I do that then I can do I can say phone number so this is uh in can do that then I can also say email address so I can also do gender I can also do address I can also do country can also do City so these are some of my properties for student so another thing I can do is uh so I think we can have this but we can can be improving as we go along so as you can see there's something here being recommended for to us so you are being asked to make it required so if we just click it you'll see it is being added as required so you can say this is required you can say is required can also say the phone number is required sorry so if we do that so this is also required and say this is required also do this is required and this is required so this is required so this is now our so you can see you have just used reaer structural navigation tab to move to the next element so I think that's fine you can actually configure all this so this is um Mya so uh after we have done that so we have these student model so uh for those who watch our previous video we actually configured our database I don't know if we configured our database or not but before then need to import this so we need to remove this so uh there are some nuggets that I think we didn't configure our database so we'll be linking this to to our we can do both either use asite or actually uh connect this directly to our SQL server but for now I want us to create a a list so I want us to create a list of uh students so let's first launch our app we see so for those who are new to to this channel consider subscribing comment Down Below in case you have any comment then you will be able to provide feedback so our app is launching so let's see let's see how app looks like so you can see how we have now divided our project we have these two business then we have our class then we have we have the here I think that is fine so let's wait as our app launches so there you are so we have our app so if you come here we still able to navigate to our list but now I want us to add our another page so we have actually created a student model so we have it here so we we want us to have now have a page to add students so I'll create another page so this page I'm going to call it uh add new students page so I'm going to call it add new students page so if I do that and add it then I'm I'm I'm I'm now having my student page and I you can see I have it here so what you need to do first you need to have these on our our my program.cs file so sorry so we need to add this here then we also need to create a view model so I'm going to create a view model for that particular page so I consider best having the name of the page then you just add the view model in front for ease of identification and even so if we do that I'm going to also add it at the bottom here so I'll just reuse this copy it here then I'm going to use this here then if you come to our student page I'm going to have my view model there then I say AVM then I'm going to say this binding context is equals to that VM so on my VM if we go to definition you can see it's still empty so so I can have my Constructor there so you can see this is my Constructor and now this page I need to we need to create uh some some forms to actually hard our our student to maybe our database or somewhere so for us to do this we need to have a we need to have a form to actually register the students so I'm going to remove this then I'm going to have uh can say content page so I'm going to say dot content so then inside here I'm going to have this as scroll view so then I'm going to have this as a ver with a vertical layout going to have this with a vertical layout then inside it I'm going to I can actually give it some margin can say 10 can also give it spacing and say 15 then inside my vertical lay I I can now how do can put a label so on my label so I can actually do this let me try to zoom so that you're able to see so my on my label I can put in the text so I'll say can say first name so I'm going to register my first name and the label I can put in the Styles so I can actually do Style then uh you can you you can actually put in the some Styles if you want but for now I'll just do maybe font attributes then I can say uh I don't want to Bol I can I can do font size so you can do font size and you can actually do maybe let's say 13 and I can do fonts family you can actually choose the family that you want that you want to use so you just do that you're able to specify so I think we'll be able to see these on our next video but for now let's work with that so uh to add our name we're going to use entry so you can remove this and we just put that to be able to close so on our entry we can say we can say text so we need to capture the text of the user sorry so the next thing is um I can as well put in uh the keyboard I want only uh text here so I can also say phone size I also want uh 13 so I can now reuse this copy this put it here can say middle name can reuse also these can say last name so these are our Pages our our inputs so we can also do phone number we just do your phone number but remember now on a on keyboard we can actually put in number so you can copy these go here then you can say address I can put I want only text and also do can also do sorry can also do so what what we have here is first name middle name phone number you can do email address so come here just do email address then we can also copy that sorry we can copy this and you say we want um a agenda we can have genda here also copy these and you can say I want uh from gender I country then City so you can do country then you can say City but now so this is our page so to we can actually add now this page on our appell so if we come to our appell you can copy this and you can say here I can say this is ADD then if we copy this then you say uh this is ADD students so if we do that then you can have these Pages here then you can say this is ADD student so if we do that and we launch our app we should be able to see our page with these entry fields that we have just provided so let's see can change this title say add new student we do that let's see how app will behave so if you're new to this channel consider subscribing if you're watching our videos and you haven't subscribed please consider subscribing we notice that some of you guys are actually watching our videos and you don't subscribe so like the video subscribe so that you keep us uh motivated in posting more videos so so our app is launching let's see it will look like so student app so if you come here you'll be able to see we have a add student so we click it you'll see we have our form so our form is now we we can actually add uh students now you can see how our form looks like so and we save it here so you'll able to see we have first name middle name last name phone number so that is it so you can actually add a button so you can change this to add students uh then you can have a button here so to we can do button so we can also close this then we can say text can say save student then you can also do fonts and it to font then you can also do color can do a background color to our our our bathroom so which color we our button think we can do that then we'll also need some command but now we don't have the command so what happens when you click this button you can also have a activity indicator this will actually show the progress whenever you maybe Trigger or click our button so for now so so you can actually set this to enabled and you can actually set it to is either running so this running is you you'll be able to see and you can also set it if it's visible sorry is a visible can say true for now then you can also set the height so let's say 50 so let's launch our app and see how it will look like so this is just a sample form so on our next video we are going to bind these uh form now to our we have actually done The Binding here but we want to now use this uh student model on our form so that when we save data we actually assign it to our model then you'll be able to push this either through an API or save it locally so we are going to demonstrate that on our next video so for those who haven't subscribed please subscribe so we'll be doing now continuous series for these kind of videos and many more so let's see how our our H look like so there you go so let's see how our up looks like we come here you're able to see students list then add student so you can see we now have our button and as you can see we have our indicator so these will when we'll actually be saving this we'll be able to show how we can be using this to show progress uh while saving data so I think that is it for today but for example if you want to add these icons you can see these icons can come to your screen uh on your browser so you can use Google Icons so I'm going to I'm using actually icons 8 so I can say you can start the name of the icon that you want so if you search that way you'll be able to see there are some icons that are provided so you'll be you can choose the icon that you want so for add I can go with uh let me pick one so I can say you can take this so if we take this you can actually download so if you download it you're able to get a free one so you can see this is the icon that I'm going to use so copy your icon come to our app then under resources just paste it under images so I'm going to paste mine here so this is my icon so then if I want to use it here to replace the adds to with the add icon so I'm going to op then I'm going to replace icon here with ADD so if I do that then uh relaunch my app I'm going to see this add iconpng appearing as part of my icons for this specific layout item so let's see how it it comes out so there you are so let's see how this goes so so if we click that you'll be able to see we have our add student icon so this is our add student icon so you can see our icon is now visible so that is it for today's video so if you are new to this channel consider subscribing like our video and comment down below bye and see you in our next [Music] [Music] video

Channel: Macro Code

Views: 281

Keywords: C#, AmigosCode, .NET, .NETFramework, .NETCORE, Sundeep, Saradhi, freecodeCamp, ProgrammingWithMosh, MikeDane, IamTimCorey, TeddySmith, FireShip, DaniKrossing, Stefan Mischook, ASP.NET CORE, Coder Foundry, Jose Montemagno, .NET 7, Frameworks, Nick, Nickchapsas, Jake Wright, Keep On Coding, QuestPond, Amigos, Developer Filip, TechWorld With Nana, Techworld, GotoConferences, CRUD, SERVER, BoostMyTool, MAUI, .NETMAUI, CRUD MAUI, SQLITE, ProgrammingPragnesh, Gerald, NETMAUI, MVVM, MAUICAMERA, RESTFulApi, NetCode-Hub, NET8.0

Id: Gl8um82r-UU

Length: 26min 28sec (1588 seconds)

Published: Fri Nov 24 2023