Project Structure/Single Project - .NET MAUI Tutorial Step-by-Step

welcome to the next part in this done value crash course in this video we're going to learn all about the single project approach that we have used for don and maui [Music] if you didn't come here from a previous video that is part of this crash course then um let me tell you that this is part of a crash course um so it works best if you follow it from start to finish but you know you can follow this video on its own if that's what you want if you want to learn about the single project approach that we take in don and maui then you're more than welcome to but i will be referencing other videos and skipping over things that i've been talking about in in previous videos as well so go check those out i would highly recommend it that you go through this whole crash course from start to finish so just so you know that that is there so what exactly is this single project thing that you're talking about well the single project is something new for dotted maui if you've been working with xavier force before then you probably know that you would have this three projects or more depending on how many platforms you're trying to target and um you would have that shared project that would have all your example and pages and whatnot and that's kind of like whatever code you would put in there that is the code that would be shared right so ideally you would want to have your code in there and then you would have an android project an ios project a uwp project and for the other platforms that you might be supporting and that those would kind of like be the bootstrapper projects for like the actual apps right because like i mentioned in the first video at the end of the day apple and google are not going to say hey send us that xe and we'll make it work we will need that ipa and that that aab file for android and ios so um those were what those projects were for and it kind of like makes sense right but it's not ideal for us as developers because what happened is that you would have to do all the metadata in your info.plist and androidmanifest.xml you would have to specify your app names your versions and whatnot throughout a couple of different projects you would have more importantly you would have all your resources duplicated so if you want to add an image to ios or android you would have to put that image in there for all the different resolutions all the different form factors out there so you would have to add that image twice for android and ios assuming that's the only platforms if you would add windows it would be three times and then for ios you would have like three scale factors so you would have to add it three times in different resolutions and for android it's even more depending on what you want to um support so it could be five so now you're suddenly adding like the i don't know eight image ten images and it's just this single image that you want to show right so that's not ideal and that is things that we have been wanting to solve with the single project approach for don and maui well enough with the theory let's dive into visual studio and let's see how that all fits together all right so here we are in visual studio this is just the file new.net maui application that i created in the previous video we got our android emulator set up here we can run on windows the ios build host has connected so i see all the ios simulators here which is pretty cool so everything is set up but i'm not going to focus on that i did that for the last video we're going to focus on the single approach now before you say anything yes the fonts are pretty much blown up between the last video and this video for visual studio just so it's very clear that where i'm at in the ui and we don't have all that zoom action you should be able to see it a little bit clearer now so i hope this helps don't worry your visual studio should look just fine so if we go look at the project let's open the solution explorer here and let's let's take that a little bit bigger so you can see we just have this single project now and we can select based on the target here like hey i want to run on android windows but we can still do this from this single project now this is called multi-targeting which has been a thing for libraries longer in in xamarin forms where you have this one project that can target multiple platforms we've incorporated that now in this app thing as well but like i already mentioned a couple of times now we still need like that metadata and that stuff for um ios and android and and windows and mac os right well we have this platforms folder here and inside of that we have like all the targets we also have tizen in here now all the targets that you can run on with done at maui and here inside of android for instance you still have the resources if you still need to do that for whatever reason you can still do that but typically you shouldn't have to we also have the android manifest so if you want to add your if you somehow the tooling doesn't have the permission that you need in the android manifest or you have some other property in the android manifest you can still add that here you can open it up it's just an xml file you can put it in here just like you would in a native android application you can absolutely do that here we still have a little bit of bootstrapper code here for the main activity main application and also you probably need to hook into that if you really want to do something on the platform that we didn't service in dot at maui yet of course same for ios we have the info plus the program cs app delegate we have all these things here so um if you still need to write platform code you can do it inside of the platforms folder and automatically if you put it in android ios mac catalyst it will only compile for that platform so if you want to do something platform specific this is the place to do it then everything outside of the platforms folder is shared so our app example app shell main page maui program all shared code if i add new class here that is available on all platforms if i add a new page example page that is on all platforms so that is typically where you want to write all of your code um so that it's shared automatically across all the platforms here but you will also notice that the resources are outside of the platform so this is what i mentioned we have these resources and we divided them up in a couple of different like categories go check out the documentation i'll put a link in the video description for kind of like all the types that we have here but mostly it's fonts and images so the fonts you would typically also have to put that in like each of the projects but not anymore you can just drop it in here and we will figure the rest out for you automatically images same thing and it's like highly recommended now that you use svg so we have svg support because svgs can be easily scaled right so we need to generate all these different resolutions all the these different versions of the images that i just mentioned we need to generate those at compile time so if you have this svg we can infinitely scale all the things and get all the different resolutions that we need put it in the right places for ios android whatever target you're running and you should be good to go now we also have this raw folder and this is basically you just you know you put in a resource here which can be a video a json file a text file whatever you want to supply with your application you put it in here and it will be available inside of your application bundle at runtime so you can access that maybe you want to do some configuration there whatever just put it in there and it can be used inside of your application so we have all of that and of course you can also have this styles.xml which is supplied in the templates now as well which has kind of like a default style for our application we'll see about that later on how we can use that and override that but these styles are there to help you style your application now of course this all shows up nicely in the tooling with visual studio and later on visual studio for mac but all of this has to be saved somewhere right so if we go to the project and we click that or you can i think right click and do edit project file we can see the contents of the cs proj file right so let's inspect what's in there first off we have these target frameworks so this is kind of like all the targets that you can support or that you want to support so if you don't want to have android fine just take it out here you cannot use the android stuff ios mac catalyst same thing windows we have a kind of condition here because windows we can only compile that on an actual windows machine and for poison which is something that maybe not typically all the people want so you have to enable that manually and you have to set up some extra tooling for that then there's some stuff you know that just has to be there basically your output type the root namespace is set up automatically for you use maui that's kind of nice to have a single project that indicates that you will actually want to use all this single project stuff because you can definitely take the xamarin forms approach if that's what you want in fact if you were going to use the upgrade assistant then it will upgrade everything to done at 6 and maui and replace namespaces and whatnot but you will not get the single approach a single project approach out of the box you will have to do extra work for that on your own except you know if you start a file new done in maui application you will get this single project implicit usings is a very nice c sharp 10 feature or dotnet 6. i'm confused where this lives exactly but you can definitely use that go look up what that is exactly and here we also have like the display name so we can set the display name once and this will be transported to like your android manifest and your info plist so we just set it here once and it will be put into the right place whenever we start compiling our application for all the platforms that is super nice same for application id this application guide is is something that we need um the application display version this is all stuff that you will need for one platform or the other and we can arrange that now in one place actually let's make a little side step here if i right click on this project here in my solution explorer and i go all the way down um i have the properties here and you will have all these sections here and one of them is maui shared and here you can see the same application titles right so application title application id in the display version this is all stuff that you can do here as well in a little bit of a nicer interface and you still also have like all the settings for android and ios here as well so we have that all in one place in a nice editor here but you know if you like your text editors then you can definitely do this in your cs proj as well um we have the supported os platform version so um you want to see which platform versions are actually supported here so for each of the platforms you can specify like hey it has to has at least ios 14.2 or android 21 and etc etc now this is where it gets interesting we have this item group right here which kind of like has the references to things that we've just seen so inside of our resources there was also the app icon i skipped over that and the app icon fg which are both svgs but this is set as a maui icon so if we go back here to our solution explorer and i right click this app icon and again we go to properties we will get the property screen and you can see here this build action is set to maui icon and we got a couple of more of course all the android ones um a maui asset so we have a couple of maui ones here and you know with these build actions what you can do is you can specify at build time what is going to happen with that so we build in a couple of things like the maui icon with which we can say include app icon svg and a foreground file and now these two files will be combined together and that will make for your app icon the one that you're going to find on your home screen of your device for ios for android it's going to be the icon for windows all the platforms we're going to generate that icon for you you just have to set like this svg and the background color and we will generate it for you of course if you want to do more something fancy just do it yourself you can totally do that as well but we're making it easy by letting you specify this maui icon now this foreground file you should check out the docs but this is something very specific to android which has a foreground and a background file um which you can use so specific to android but you know generally if you just set the include one and the color we can generate a icon for you now the same thing with the splash screen so the splash screen for a lot of people is just a static screen um with a maybe an icon centered in the middle so just to get you started with this we are going to say hey we have this maui splash screen again provided with this svg do a color a background color you can also set something for like the base size again check the documentation in the links below what it all means exactly with which you can say like hey this has to be the size like on screen and that gives us a little hint on how to generate your your images but we will center that image that you supply here on the screen give it a nice background color and boom you have a splash screen out of the box don't even need to worry about that anymore as well here the maui images we need the maui image build action for each of these so that we know how to generate which images to generate so you can use wildcards for this so everything inside of the resources images wildcard is going to be treated as a maui image and we want to have the specific one the dotnet maui bot uh well the dotnetbot it's not specific to maui where we can specifically set this base size again so you can you know get a couple of out there where you need to tweak the settings a little bit and you can mention them specifically for the maui font same thing we need to do a little bit of work on that to put them in the right place register them somewhere inside of your metadata for for ios for instance so you will need to register that as a font but typically you don't need to worry about it just drop it into the resources fonts um folder and you should be good to go and here for the maui assets kind of like the same thing just drop it in there and we will do the magic for you so that's where that all lives now the next thing i want to point out is the maui program so the maui program with done at maui we have kind of like adopted the net generic host and the dot engineering host builder so if you're coming from another part of the dot net ecosystem um like asp.net core has this and and some other projects as well um you will know how to work with this you will recognize this and go like hey i know how this works so we have this builder object and we are going to say use maui app that's kind of like something you need to have configure fonts we can also say like hey serv sorry builder dot services dot add singleton or transient or whatnot so dependency injection is now built in as well you can just register it all here what else do we have i think we have things for logging so we can hook up some logging here um i think we can do the blazer webview if that's what you want to do um add is it add i don't know you have all the options and it's all set up like with with these extension methods right so you can just hook into the builder here and you will know this pattern and you will know how to look i already also seen the third-party libraries that are hooking into this so if you're installing the dot and maui community toolkit we have this initialization line dot use maui community toolkit and boom it's initialized and it's good to go so um you know as it is cross-platform development is hard and it this is just one less thing to worry about so you know how to work with this if you're coming from another project type and um this should worry you a little bit less so there's that um then kind of like the last thing i want to point out here is shell which is not has nothing to do really with like the single project approach but um the templates are working with shell and shell it's kind of like your opinionated way on how things are going to look and feel you can use the things from that like the flyout menu that will be set up automatically top tabs bottom tabs um and it will give you all kinds of things to do url type navigation um so this app shell is right here with the shell content that's set up for the main page i just want to tell you it's here um we're going to see that in in a video later on so again make sure to stick around so you'll know then we'll talk about navigation and how this all kind of like fits together and we have the app.example and the cs so again this is kind of like the entry point of our application in in the dot net world at least and here we're going to set the main page to this app shell and then our application is going to run and it's going to show the main page that we have seen before um for running the application so that's in a nutshell what the single project does and how that all works together if you're seeing don and bowie for the first time then you're going to love this you're going to love the simplicity how this works and how much work is being taken out of your hands but you will never realize if you're coming from xamarin forms how much pain we had before because you know like i said we had a couple of different projects we had to repeat these steps over and over again so if you're coming from xamarin forms then you're going to be even more happy with this because this is a big productivity boost you have to do so much less stuff with your images and and your fonts and um duplicating all that effort no more of that we're going to use this single project approach and it's going to be amazing now you know how it all fits together what a single project is why it is important and more importantly why it is useful and you have to do less and less work who doesn't like that so for the next video we're finally going to make steps towards building that actual application and building your first.net maui application we're going to start with displaying data so be sure to hop over to the next video but actually let me help you here is the actual next video in this course so go check out that maybe click the like button first check out if you're subscribed yet and if you want to check out the full playlist of this course what is coming next go check out here see you on the other side [Music] you

Channel: Gerald Versluis

Views: 12,904

Keywords: .net maui, dotnet maui, .net 6, .net 6 maui, dotnet maui tutorial, .net 6 xamarin, dotnet maui getting started, .NET MAUI crash course, .NET MAUI workshop, dotnet maui workshop, dotnet maui full course, .net maui full course, learn .net maui, learn dotnet maui, net maui, crash course, .net maui tutorial, c# maui, what is .net maui, VS2022, dotnet 6, .net maui single project, dotnet maui single project, multi-targeting, MauiImage, .net maui resources, dotnet maui resources

Id: 0PBVSMToA3A

Length: 18min 6sec (1086 seconds)

Published: Fri May 13 2022