.NET MAUI Preview 4: Time For You To Get Started?

this justin.net maui preview 4 which is supposed to be the public preview and is ready for you to try out and start converting your app so let's go see what that's all about before we go look at the actual demo project the weather 2021 let's first make sure that our maui environment is entirely up to date for that we have the maui check tool i have another video about that it should pop up on your screen or you can find it down in the video description below so but if you have that installed and updated you can just say maui check and it will start running all kinds of checks and see if you need to install some prerequisites or that other stuff is going on here you can see it's checking that i need the open jdk should i attempt to fix that and yes please so now it's going to do that automatically it will download that install that onto my machine and you should be able to install all the prerequisites for dotnet maui on your machine like this now also announce that build is the new visual studio preview 1611 pre one i think and that will give you also the maui templates built in so whenever we go here now to visual studio and we say create new project we can search here for templates and whenever we search for maui then now a new maui cross platform should pop up here and here we go so we got the.net maui app right here and whenever we then click next um we can just say well you can you can see i already created one secretly don't tell anyone so we get maui app2 and we can just click create and it will generate all the things for us well all the things i'm saying all the things but what's really cool is that it's now the single project also so before whenever you would do a new exam in forms project you would get the shared project you would get the ios project the android one the uwp if you were running on windows and now you can still see the win ui 3 and the win ui package one those still have to be added to our single project solution but all the rest the ios and the android the mac catalyst they're all here in this one project how cool is that um so here it wants to pair to my mac let's do that right now um so here you can see still some specific folders of course there's still some platform specific stuff going on like for android you still have the resources and the main activity main application i think this will change in the future how this looks how this works but for now you know you still have all the platform specific stuff right here in your one shared project but what is really really cool is that there is some new stuff in here so if we go to the resources this is already shared so they've already wired this up this resources they map automatically to where it needs to be in android ios mac catalyst and all the projects that the platforms that will be supported in the future so all these fonts can just be used in all of these platforms without doing platform specific stuff the images same thing and what's really cool you can use svgs now out of the box and we also have some new build actions so if we do a right click and go to the properties actually it's not this one then maybe it's this one we can do the properties also not here okay well let me just open the cs branch and show it to you there so here you can see this item group and we have now the maui image which is a thing and in the background it uses the resizetizer by red um that's a plugin that is already available for xamarin forms but this is integrated into dot and maui right now which enables to you know resize all the things you can say is app icon so it will also be used as the app icon for your app um but this is the thing that i was actually want to show you is the maui splash screen so now there is a built-in way for you to just spawn a splash screen you can just say hey use this image it can be an svg it can be other images it will be centered because i on ios that's always hard to do right to center that image and you can say hey i want to have this color which will be the background so and then you will have a beautiful splash screen basically i'm going to show you that in just a minute um then you have the other maui images and what what really stands out here is this cool thing is that you can say dot images not dot resources slash images star and it will include all these images right here well it's just one for now but if you have multiple images in here you don't have to specify them one by one you can just say slash star and they will all be included we'll see that in a little bit in a little bit of a more bigger demo project that i'm going to show you also maui font same thing it knows how to do all these things and you can just say slash fonts star and it will include all the files that are under that folder so that is really cool now other than that i've already went over some of this so we have a startup class now which is you know might make you think about uh the asp.net core way of doing things we have the app host builder which uses the forms compatibility use maui app so this is our our app class and here we have to wire up the fonts as well so that it gets registered in our application then if we look at that maui app so that's just our app example app examples yes here we go and we now have the concept of windows so we can do multi-window things as well for you know the platforms that support it you can see all the reds quickly here that's just because i didn't build the application or it couldn't restore the dependencies we'll fix that in a little bit for the other demo project and here you can see the forms compatibility so there's a forms compatibility layer also more on that in a minute and you can set still the platform specific stuff so this is basically your on platform specific things i think it changed a little bit it's now also a more fluent syntax so in this case for our windows app we can say set image directory and we have to map that to the assets and then we are going to return a new window with a new main page and here we have that example page it should look pretty familiar you know if you're already working with xamarin forms um and also because this uses exam informs compat layer so this is basically just pure xamarin forms we can see a hello world welcome to dotnet maui plot file current count click me and we can see that dot net bot png so let's just run the win ui 3 one actually and there is one thing that's going on for me whenever i set it to this win ui 3 application and i want to run this i run into some kind of calm exception that you know is really old school if you've been around long enough to know what calm is then well anyway that will come up in a minute but i did a little digging on the internet and i found out what the solution was so actually you don't want to start this project for some reason so let me stop this one and you want to go to this win ui 3 package one and if i right click maybe you can set it as your starter project i don't know but what works is right click debug start new instance that works for me then it will come up with the win ui three app so that's a little workaround like i said the win ui 3 project will go up in the single project single cross platform project so this is just you know the tooling catching up with all the latest developments and here we go here's our hello world app and here's the dot net bot i need to do a little refresh for it to show up so there's still some bugs here left and right and we can see those labels that i just mentioned hello world whatever click me the current count goes up so this is a very simple sample app that is basically now your new file new dotnet maui app basically let me actually hop over to a blog post by david here it is announcing don at maui preview 3. so and this is this is actually i'm scrolling over this but this is like a really good looking weather app right and if you look closely you can see it running on windows this is android this is on mac and this is on ios right here so this is looking pretty and this is the exact same code base we'll see that in a little bit so but this is weather21 i'll post a link to the repository down below and this is you know the first real version that they're promoting as like the public preview basically so you can start using this to [Music] prototype some of your apps or maybe see if your app can actually convert to the.net maui with the xamarin forms compat layer so you can start looking into this and actually you know do some tire kicking let the team know what you think but this because this this is actually in this project i think he mentioned it somewhere is we began with xamarin forms so this is xamarin forms app and then they've they've transitioned this into net maui so this is actually a existing xamarin forms app um that they've transported to dun and maui that is really cool the process was painless and quick so you know good promises right here and whenever we scroll down i'll show you this in a little bit what this is all about the uh setup app actions so you can see it here we can get these little toasts and the the actions right here um and and actually here the git status report that's kind of the interesting one so let's go over to that this is this page also linked down below but it's at net maui wiki status you can see which of the controls are actually implemented right now or that there's something weird so what is the oh this is pending the little clock here is underway and the check mark is done so you you can see here which of the properties of which controls are implemented right now so you can see there is there's green here more and more green so that is really cool and you can start using this whenever you are using these controls in your project so let's just hop over to that one actually i need to close this one open my recent projects and i have it here already the weather 21 and here again this is so this is the weather 2021 and this is like a proper app right it has the pages resources services view models views um so let me here it's got a couple of pages um the resources so here's where the um the star comes in right so this is multiple fonts um a whole lot of images um some styles and if we look at the cs proj file right here all that they did is say images slash star and all the images are included resources font slash star and all the resources all the fonts are included as well so actually let me start with the win ui three one the way to do this is go to your win ui 3 package right click that and just say debug and start new instance for some reason that does work i'm going to admit that i'm not the win ui 3 expert so i don't know what this does but this is a way to actually get it working hopefully there we go and here we go so this is and it's also responsive right so we have these widgets here on the right we have this little wind indicator here we can see this weather forecast here we can scroll down we can scroll down here um and we have a little tab here on the on the left where we can click through to two other views i think we have the actual web view here it's going to load some data from a web page and we'll see a little weather app that's going on for the netherlands that's where i am and we have a settings page so that is really cool not everything works maybe they're going to build out this demo i don't know but you know just for you know the view this basically works and what is really cool um is um that you can actually also run this of course on all the other platforms so for android also my debug session won't work for some reason so i've just deployed it to this android emulator right here you can see the icon i can start this and here we will see the exact same app but now running on android and you can see it's responsive right because we can see this image but now it's here we can see this bar but now with less and we can scroll through this so there's probably some kind of carousel view right so you know and the other widgets are tucked in somewhere else so they're tucked in down here you can see that so it's all nice and responsive it all works on these these different viewports so that is really cool and of course you know our tab bar is now down here because that is how the tab bar should behave now what is really cool is let's let's just dive into the code here for a minute and go to our startup class i already have that here um and again we have the use compatibility so to do that we have to also add the um compatibility package if we look here under the dependencies again this is all the android ios mac catalyst all in one project and if we look at the android one and the packages you can see it has the microsoft maui controls compatibility that is the package that you need to make that compatibility with your xamarin forms work because basically what it does it has a shim layer so you think or your xamarin forms app things that it's still talking to the renderers but actually you know you're connected through to the new handler architecture so you will automatically get benefits from don and maui you will get that performance boost and it will be great so that's how that works and here in the startup class we also have that use done at maui app of course which is our app class that we are going to use and here we can see some some magic happening if windows then we can you know wire up a tray service whatever that may be in the notification service and for mac catalyst we're doing the same but for mac catalyst you know that tray service you can imagine for windows and for mac you can have this kind of similar functionality because windows and mac are you know they they're comparable but they need a different implementation and this is how you can do that and here again we can configure those fonts but if you focus on this thing here the tray service so if i go actually to my tray you will see well you don't see it because i'm in the way so let me just get myself out of the way here there we go so down here i went down here to my tray and there's a little net bot and whenever we click that there is a notification coming up and i have the focus assist on so you don't see it popping up here but you can see hello build because this demo was built for build microsoft built the conference you can see this notification popping up and whenever we should run this on mac os you will see the notification come up here in the top right where it normally shows up for mac right so that's pretty cool now the other thing i think that's wired up in the app no i think so let's follow the path into the app example cs what's happening here we can see again that forms compatibility is wired up here those that platform configuration for windows is here and then we set a window to a new navigation page the navigation page is now implemented which is cool allows you to navigate through the app in preview four i think that's new so that is the big thing why it's now ready for you to look at it and then we say new home page okay so let's have a look at that home page which i already have open here and here we can see setup app actions and that is pretty cool because setup app actions we're going to say set async app action set async current info check current weather and add a location now the app actions is something that comes from xamarin essentials this is now integrated as well if we scroll up here we can see using microsoft maui essentials so that is where xamarin essentials is going to leave it's just integrated you can use it directly in your project here we can just say app action set async and then whenever we look down here at our task bar and right click you can see check current weather so that's our app action and add location that's our other app action that works on gwp now if i go back to the android emulator right here and i go back to my launch screen here and i long press this icon we can see add a location and check current weather so the app actions they're just implemented here um on android on uwp on ios this would work the same way as on android i'm not sure yes on mac os it's actually supported as well if you right click on the icon so that is pretty cool out of the box don't have to install separate packages it is just here now another cool thing that is now supported i think only for android and uwp or win ui 3 at this point is the little flame icon here so that is the net hot reload i've got another video on that so go check that out a more deep dive but what is really cool so my my net app is still running here you can see that wind indicator is still flipping about it's making me a little bit nervous so let's see if we can stop that without leaving this debug session so i think this is let's see implemented here in the views and we have this is set up to be widgets so here we have the wind live widget right so normally what we could do example we had example hot reload and we could only influence like the the visual stuff right but now we can also change code while we're running and also for xamarin apps now the support is not there for ios and all the other bits it's coming it's definitely coming but for now you know only uwp and android so in here we go we scroll down let's see what this code does update live wind direction is get direction which is probably some random thing and then we do needle rotate two okay so let's just set this direction to so you know i don't get nervous whenever that thing is jumping around and i save this and i click this little hot reload icon here and you will see here at the at the bottom of visual studio code changes were applied successfully so here you can see ah it's now it stopped going around so that's cool right that's cool and if i change it now back so if i take this out of the comments save this do the thing right here and be really quick you can see that it starts moving again right so that is really cool you don't have to leave your debug session again which is really awesome this is a real productivity boost so that is really cool now there is of course a lot of other things going on um let me know actually what you want to see more where i can zoom in already to make your net maui journey off to a great start but for now let me just go back to this little blog post here and highlight some other things so we have the single project run i actually want to go back up the raw assets i mentioned that but it becomes even cooler so here it it's in a web view scenario so we have this maui asset so you can actually add static assets to your project right so you can just include this index.html file and you're going to say like hey this lives in my resources raw index.html and you can again use those wild cards right here and what you can just say then is a web view index html so no weird path it will figure out for you where it lives where it needs to be and you can just use it with the file name now if we go a little bit more up again which kind of has to do with the index html is a blazer webview so that's going to be something new a blazer webview is making it very easy for you to have this kind of hybrid.net maui app so you can basically just take your blazer asp.net blazer web app put that in your.net maui app and with the blazer webview you can say hey this is my host page this is my my services right here this is my root component and then you wired up your app inside of a native app which is different from the blazer mobile bindings the blazer mobile bindings basically take the blazer programming model so the kind of scripting way of mixing code and markup and that will map to actual native components basically like how xamarin forms and maui does it but the blazer webview lets you take your blazer app put it into a native app and now you have a kind of hybrid app so that is really cool too we're going to see where this is going of course and the other really cool things if we scroll back down the hot reload i've talked about that ecosystem readiness so of course the teams are working with all the control vendors so telerik is mentioned here they are going to have their controls ready too i think they have a preview out right now as well and prism they have launched a early version so you know you can see that the plugins and the other frameworks are also at a stage where they can support this which indicates that dotnet maui preview 4 is you know ready to for you to spin the wheels a little bit get started today i've already talked about that and i think feedback welcome very important so you know interact with the team on github.net maui the product roadmap is linked here as well all the links down in the video description i hope this will give you a good overview and a good start on how to get started now with a.net maui app i plan to make a video on transitioning examine forms app which will be a simple one just a file new examine forms app to a dotnet maui app and see how easy that transition actually is what we need to do for that if that's something that you want to see then please help me determine the priority by letting me know in the comments that is something that you want to see now there's a lot of new pieces in dot net maui and with this preview done at maui is you know more complete than ever there's still a lot of work to do and the team is working hard to get it done by november but you can see it's already shaping up pretty pretty nicely so there will be much more content on.net maui please let me know in the comments what you want me to to focus on and i can look into creating videos on that because you know just like you i'm learning about this stuff as well and i'm putting videos out there so that we can all learn together which is cool right please like this video if you've actually liked it if you didn't subscribe to my channel yet please subscribe right now or at least consider doing it check out some other videos see if i'm actually worth it i hope so and i'm looking forward to that subscribe and other than that i'll be seeing you for my next video keep coding

Channel: Gerald Versluis

Views: 22,785

Keywords: .net 6, .net maui preview, .net maui hostbuilder, .net maui, .net maui example, .net maui template, .net maui command-line, .net maui getting started, .net 6 maui, .net 6 preview, .net 6 xamarin, .net 6 android, .net 6 ios, .net 6 maui preview, .net framework, .net core, .net preview, dotnet maui, dotnet maui preview, dotnet maui preview 3, maui dotnet 6, dotnet maui getting started, Build 2021, .net 6 preview 4, .net maui winui 3, Xamarin.Forms, .NET MAUI preview 4

Id: 23PmntSTBIQ

Length: 23min 43sec (1423 seconds)

Published: Thu May 27 2021