What's in a Blazor Desktop project - EJL Instructs #03

this is ejl instructs episode number three what's in a blazer desktop project what projects are in the solution what files are in each project and how do you write platform-specific code i'm alan lipton let's jump right in to get started i ran the command dot net new maui blazer and specified a project name now that we've created the new solution we can open it up in visual studio and see what's inside the first thing you might notice is that there are two different projects in the solution maui blazer demo and maui blazer demo dot win ui why too well let's open up the project files by double clicking on them and see what's inside the first thing we can see here is the specification of the target frameworks this tells you which platforms this project is targeting targeting the maui blazer demo project is targeting ios android and mac catalyst and when we open up the win ui project by double clicking on it we see that it's targeting windows well y2 project this is a current limitation of how we're able to ship dot net maui with blazer and we hope to resolve that in the future by combining all the projects into one which would involve taking this target framework and adding it to the list of supported target frameworks in this project we hope to fix that soon now let's take a look at some of the project settings inside the cs proj file when we open it up there are a few different things that we first see we've already looked at the target frameworks but next we have some common application settings we have some asset types such as images for the app icon splash screen and other assets we have our project references that include the webview.maui package reference which includes the blazer webview control and there are a few other settings that are required for compilation in.net maui blazer applications there are a few files that participate in the startup process the first one we'll take a look at is the startup.cs file in this file the two things to note for blazer applications is the call to registerblazermaui webview that lets.net maui know about the blazerwebview control and how to use it and then there's a configure services method where we define services that are used throughout the application in both.net maui pages and also in blazer pages the next files are the app.xaml and app.xaml.cs files that define the application entry point and application type for the entire project and finally we have the main page.xaml and mainpage.xml.cs that define the main user interface for the application here we see this is the page that hosts the blazer webview control that contains all the blazer part of the application the user interface of a.net maui blazer application is divided into two parts the first is the native ui that is defined using.net maui controls in xaml or c-sharp that's what we saw in the mainpage.saml file the next part is the web ui that is defined using razer files and the components within them in a default project template these are contained inside the pages folder where we have navigable pages such as the index page the counter page and the fetch data page and some shared files that contain things such as the layout menus and additional components that are used throughout the application though most of the code in.net maui blazer application is completely cross-platform including the native and web ui there's often a need to write platform-specific code to integrate better with each platform's unique capabilities for example in many platforms you need to register a list of user permissions that your application requires or using a feature that is unique to one platform such as accessing the windows registry this is done by placing a file in a platform specific folder that is included only for that platform here in the main project you can see there are android ios and mac catalyst subfolders that contain code and files for only those platforms for example in the android folder we have the android manifest that contains a list of permissions required by this application and you can change this list as your application requires now let's say that on windows which is all the code is in the win ui project i want to read a registry key and show the version of windows that it's running on in the win ui project i can add a file into this windows subfolder which i've already done and this has some code in it that calls some registry apis that can only run on windows now i don't recommend you use the registry to read such things but this is just an example of how i can write windows specific code you can call any windows specific api or write windows specific code such as using p invoke and get access to all of the platforms native apis now i've written this windows specific code but how can i call it from a platform independent way well in the main project i've written a little helper method called get windows version now it's a little bit weird to have a get windows version api that can run on android so how do i do that well this class os version helper is available on all platforms the static method that i wrote is also available on all platforms however on line 13 i've added an if-def for windows saying that if this code is being compiled for windows i want to call this new method that i wrote that reaches the registry key if it's running on any other platform it always returns the string not windows now that i have this platform independent code i can go into anywhere in my application for example i've changed the index.razer file to use my new helper method to show the current windows version if i run that here we see that my application is loaded and it shows that the windows version i'm running on here is windows 10 enterprise if you run this code on any other platform this code won't even exist it's always going to return the static string not windows there are other if diffs that you can use for example you might have an if for android that would look like this android specific code and you can close that out now you see that these are all grayed out because in the selector here you can choose for which platform do you want to write code now that we have ios selected it's not showing any of the windows or android code it's all grayed out in fact we could even have completely invalid code here and it's grayed out and it's not a compiler error because we're not looking at android we're looking at ios if i switch over to android now the android code lights up and sure enough we get a compiler error saying this isn't even valid and lastly when we switch to windows we see the windows code is highlighted and then the non-windows code and the android specific code is all grayed out a word of warning be careful with how much code you have littered with all these if defs this can make code a little bit harder to read a little bit harder to maintain i'm not saying don't do it but be careful when you do this was episode number three of ejl instructs please let me know your thoughts and comments below or if there's anything else you'd like me to cover see you next time

Channel: EJL Instructs

Views: 450

Keywords:

Id: QNFc2vZJQcU

Length: 7min 12sec (432 seconds)

Published: Mon Jul 12 2021