Unlocking the power of the Fluent UI Blazor components | .NET Conf 2023

[Music] awesome so our next session I I will have two amazing speakers and they will talk about fluent EI Blazer components let me introduce you Vincent and Dennis hi Vincent hi Dennis hello hello and Vincent you're on mute as well just like me Safety First hi all good excited for your session just I think in the moment there are discussions about fluent UI in the chat as well so looking forward to hearing more about your session take it over please all right so uh hello everyone uh my name is Vincent B and I have today with me my partner in crime Denise we're excited to be here today and to show you how you can use fluent UI Blazer library to build Blazer applications with a modern look and feel uh if you've seen the net Aspire announcement uh the other day here at net com and wondered how that dashboard was built well this is the library that powers its UI uh so if you want to learn more uh stay tuned uh I'm A Cloud solution architect at Microsoft by day and principal maintainer of this Library by by night uh Dennis can you introduce yourself and walk us through the agenda for today yes thank you thank you Vincent uh hello and thank you for joining us uh for session on on fluent and Blazer as you can hear English is not my native language but I I hope I will not make too many mistakes sometime I create new world so maybe I'm Den Von software engineer at Microsoft and also principal Mainer of this open source project um so today um oh yesterday we released the version four of the fluentu library is now included in the Microsoft fluentu ipet Cor namespace the demo and the documentation and are available on this website fi- blazer. net and in just few minutes we are going to recreate the default template offered by by Blazer using the the new fluent components so our goal is to show just a few of possibility available in this Library uh at the end of this session we will create we will receive a link to the source code if you want to to do the demo yourself so the agenda for today is to present what is fluent how to install this library and how to build a demo with some of this aome components but Vincent can you explain what is fluent UI yeah so um fluent is Microsoft open source scop platform design system uh that gives designers and developers the framework that they need to create engaging uh product experiences where accessibility uh internalization and performance are included out of the box uh this is a design system that is the foundation of the the look and feel of Windows 11 uh but also of all the other modern uh applications like word and and Outlook and teams so the fluent UI web components are an implementation of this design system uh and they are built on the fast technology stack uh fast is or sorry let's start with web components uh this is an umbrella term uh that refers to a collection of web standards that uh are focused on enabling the creation of custom HTML elements just like a title or a p or a div that you already know now fast is a collection of technology which is uh used which uses these modern web strs as well uh and uh allows and enables developers to build those web components and then finally we have our library which is one a Blazer wrapper around these web components these fluent web components and two it's a set of other uh components and tools that just make it easier to work with fluent uh inside Blazer applications so let's get going Dennis and create this demo where do we start yes I think that's finished about the slide uh now we can go to the first step uh I would like for example with you to create a new project from scratch so I can go to uh to visual studio and the first step is to create a new project so find new I select of course the Blazer web app template the first step is to define the the name I select demoi I go to the next step and in this step the main important thing on this demo is to not include the simple Pages because of course that's the goal of this presentation is to create uh some sample page so I would like to create a demo like that and uh when the project will be there the single and the first step to do is to add uh a new nuget package the package I would like to include there if I select the all nuget packages feeds so I would like to select the Microsoft fluent ipet cor and the first template I would like to do to use there is the fluent ipet core components so I just install this package and also the component. ions packages package because uh we would like later we would like also to add some icons uh in our project so but now we have the the packages installed vanon can you had a page layout maybe with a header for like for example header body and footer yeah yeah yeah indeed because if we would be running this application now we've just installed the packages so it's uh going to be quite quite empty um so if we can switch to my screen now uh then I can show you the next steps um so first things first of course in the uh imports. rer file we want to enable uh this this Library uh so we'll just uncomment this line uh and make all the components that are in this this namespace available to all the razor pages that we have then uh there are some services that we provide out of our library uh and to make it easier to include those uh we can add this uh this extension uh to the program.cs and make these services available to the DI container and thereby making them available in all the other uh Pages as well so we'll just uncommon this ad fluent UI components uh there's no need to add scripts or css or anything uh we take care of inserting that into the right positions inside the application uh by uh yeah especially by by starting up Blazer and starting up our library and then finally we go to the main layout page where we just want to include this uh this layout so like I said we WRA all the web components that are there uh but we have also got these uh kind of uh Helper and utility components uh these fluent layout is is one of them and it has a inside of it header component and a body content and a footer Etc uh and yeah this is basically all that is needed to uh get the application uh up and running so now if I compile this and I go to my browser screen it should be starting up uh by the way we're using Blazer server in this case and there you have it uh you can see that this this this header has been applied footer is there uh we have the menu in inside of there um the counter and the weather are already there but we haven't implemented those pages yet so uh I won't click on them uh and yeah all these styling loading of the components Etc has been has been taken care of with this step now uh I said already counter page yeah what what would a Blazer demo be without a counter page so Dennis can you uh can you add this and and and spice up the application a little bit yes yes sir so if you can switch to my screen sorry so uh yes what will be really nice is maybe on this left menu is for example to add few icons in front of each menu item uh fortunately we have included if I go to the demo website to the documentation fluent ii- blazer. net on the icon page for example you have an icon Explorer where it's possible to search on many many icons for example I would like to add for the first item menu I would like to add an icon like that or it's possible also to add an icon like that for example so you have also the possibility to click on this icon the copy to IC to clipboard icon and so automatically the code you need to use and you need to include in your project will be in your clipboard and so you can go to the uh visual studio and for example there you have the nav link created by venan some minutes ago I just add another property another attribute icon to specify which icon I would like to add to my menu item so like that for example oops okay and if I run the code the same control all create it you will have now the icon in front of each item where is it okay let's go it's there so you have the icon there but as you said vinent the the goal of our project is also to have a counter page the Blazer project we have this page so I can go to my visual studio page Visual Studio project I can open the counter. risor page and That's a classic razor page where I had it a fluent label so that's a label default label where I can specify the type of typography I would like to display so for example the page title in this case to display the counter like that also the fluent label with no default with no value for the typo attribute so that's the default representation of the the label and also a button click me with the but with the button I'm selecting the accent color so you have the possibility to display many many type of this one many many type of color for example the accent is this one or this one or one and so also when of course when you click on the increment on the on this button the increment count method will be executed and automatically of course this part of code will be executed also and so if I come back there in the counter counter page I can click on this page and display automatically the uh The View and the counter uh Associated but V is it so easy to add a weather page we have the weather page there but it's empty at this moment so how can you add the page uh in her demo project yeah so let's switch back to my screen and uh pick up where you left because like we said we're going to rebuild the the the demo uh the standard Blazer demo so we need the weed page as well and for this step we've already added it but we've of course made it fluent uh so that means you'll see the same labels that Dennis already discussed earlier uh we use that for the page title uh but we also used a fluent progress ring so not just showing the uh text loading that you know from the the streaming rendering demos that we've seen Etc uh but now we use that nice animated ring and also uh we're not just showing an HTML table but we're actually inserting the fluent data grid here and the fluent data grid is basic basically a quick whd Copy Dan and Steve announced that that it's now part of net 8 we have it in the fluent Library as well and we've added some extras there like resizing of the columns and and some row and column styling that can be applied uh by using some uh some functions but for now uh we'll just use it like this and one of the other things that we can do here in this uh in this grid is that we can now also use those icons that Dan has already mentioned he already installed that n package so there's nothing stopping us from adding those here as well so we can add a template column and based on the temperature that we get back from the code uh we can then display an icon in the table as well the rest of the code on this page is is completely the same as what you get with the standard template no changes there so we basically only Chang the uh the UI and the presentation so let's run that again uh it has built and now I can switch to the weather page here and you saw that uh that loading spinner go on the page that's an artificial uh kind of delay that we've built in uh simulating some some web service that we're calling uh and we now have this uh this yeah this this fluent data grid on the page uh where things like sorting are of course uh enabled uh like I said we also have resizing capabilities and we added this template column here with the uh with the icons in it so it already starts to look a little bit uh nicer and and more polished now we're already kind of basically done with rebuilding the demo so let's see if we can spice it up a little bit more and for example add a registration form to this uh to this site um like you see on many sites maybe subscribe to a newsletter or something like that so we've already uh in this step added this code and we added this red page and here if I open that up you can see that it's uh uh yeah using that familiar uh components that we already saw but also introducing some new ones uh basically all the uh the import components that you know from the standard blaz library but then also uh in a uh uh fluent look and feel um so we have a big number of components for for these input Fields available uh also some that are not in the standard Library like the date picker um for example and and then it will show some others as well later on um some other interesting things here not really from the code perspective so let's indeed also just uh run this one and see what it does on the on the front end uh oh uh of course before I uh show it uh it would be handy if we enable it in the menu as well so that we can more easily navigate to this to this page and then after we've compiled it we have this this registration page now available in the site um so the date component of course shows the familiar calendar that we all know um we can also type text ourselves here uh we can just fill it in uh with the with the browser tools that are there and uh one special thing here for example is a different kind of button uh where once I have agreed to all these terms and conditions and I would say create an account which again simulates calling a web service or something like that uh you can see that we have a loading button uh so it displays a spinner while it's uploading and prevents us from uh doing multiple posts at the same time so that's uh basically a registration form done but theque I think we can do one better yeah we can improve this um this reg regist form can you switch to my screen yes thank you so um the ID now is for example what if we uh added a country fill to this form but something very attractive for the user and for the demo we would like to to add for example a fluent autocomplete components to have the list of countries and the user need to select the countries the country in the list so to do that of course in the code in the code we need to use uh we need to add a country. CS file to have the list of all available countries in the world and I had it also another property HTML flag and name this property is only to display the the flag the the image of the country and also to display the name of this country and using this um this this class this country class I go to the uh the form and I can in command this part to add the fluent autocomplete components the FL fluent Auto complete component it's easy to use because you need to specify the type would like to add to the the list for example there the country class and also the possibility to specify which method will be raised when you need to search something for example there that's the on search assing method so the method is there and the method is only to select in the all list of countries in the list of all countries to select which countries you want to to specify you want to to have on the on the screen using the start with so when the user writes some character automatically the countries associate to this uh this type of character will be displayed in the list and of course also I need to specify a variable in my object in my res user object variable to store the countries yes the name I think it's not the correct correct name but I save that in the language uh variable but that will be the country selected by the by the user and so in the fluent toal complete component you have also the possibility to specify the maximum number the the number of Maximum item you you would like to display so in this case for example only one country if the user would like to select more of them automatically a message please select only one country will be displayed so I can run this part of code and if I come back there I know I have the autocomplete there a list so I can specify and can select in the list which which country I would like to display but I can also select Belgium or I can also select not another one but I can select for example Netherlands in this list so that's interesting to complete the form like that but another thing interesting maybe for you V Vincent is to have the possibility to add the team for example in the in the page so for example to switch to a dark tee or to change the color because everything there is blue is in blue but that will be too to that will be great to have that in green or in yellow I don't know how to do that so yeah let's switch back to my screen and see how we can can do that because uh yeah like Denny said every modern app or self-respecting app has team switching capabilities so uh we offer that out of the box with the uh uh the F fluent y Library as well and the means that we use to uh to to reach that is by using design tokens and these ion are a means to express design abstractions like typography and the and uh colors and spacing units Etc so uh the the fluent UI web component Library comes with a very very large set of design tokens out of the box uh and we implemented all of those in the uh fluent UI library on the Blazer side as well uh by using the uh the service extension that we uh mentioned earlier uh it's already all set up uh to use so the only thing that we need to do is go to the uh homepage in this case it could be a settings dialogue or whatever but now for uh the sake of uh making it easy we're just doing it on the homepage we say we use the design tokens uh uh using uh to expose all the functionality in our programming code and we inject two uh uh design tokens in this case the base layer luminance and the exent base color the luminance is the dark or light theme that is being used on the site and the accent base color is all the uh up until now blue accents that we saw on the uh on the page so we add some components here uh to make it easier to switch uh from tee or color uh and we also add some code to actually apply those design tokens to the site and to apply them we just uh call this with default method with the new value that we want to use use for uh that specific design token so in this case we can set the base color or the luminance and after having done that uh we can compile this and go to the site again uh and now if we switch to the homepage we'll see that we have two uh more settings available one for the caller and one for the team out of the box we come uh with a aeration that has all or at least a lot of the standard office colar available out of the Box uh so for example we could go here to the standard office caller and you can see that everything that has an accent is automatically then uh applied and and uses this new red color so it's not just the header uh but it's also the the accent color for the icons and the uh indicator here for the for the bar which p is active uh but you'll also see that it's now being used as the accent button core so by just applying that one with default method uh the whole site has been updated to use this this call very powerful we think the same goes for the theme uh so with now switching this I can make this whole site go and use dark mode uh out of the yeah with just again this one call so it's very easy to update your site and applications uh and and offer this functionality now we out of the box don't Supply any functionality to store these values between sessions uh because we don't want to uh impose any uh specific choices that we make but of course you can uh use local storage or cookies or whatever uh to make those settings persistent if you want so Dennis um we already uh uh made the uh form a little bit uh uh better and and easier um can we do some more on the uh um creating of the account like give some feedback to the user that it actually succeeded in creating the account yes indeed at this moment I I think that will be interesting to finalize this form and it will be a good idea as you say to let the user know uh that we have saved his request so for example we can easy easily add a dialog box to conf to confirm the registration all right yeah thank you so for example there if the user click on the create account the process is running but there are nothing nothing else after that just one thing I had it automatically the I update the code to add John Smith because is to avoid to enter each time the the value there for the demonstration because you need to enter the required field each time so that's better and that will be easier like that so if I come back to the code so if I would like I would like know to add a dialog box so the first thing is to add to the main layout page and at the end of the page to include a fluent dialog provider attri tag fluent provide fluent dialog provider component this component is only there to inject the all HTML code will be generated by the dialog box later so when that is done I can come back to the register page and I just need to inject I dialog services so I have there a dialog service included and so I can go to my save method my valid Handler anding method this method is called by the uh the Buton where is it the Buton is there so I don't where is the uh no it's on the edit form in the in the edit form yes sorry in the edit form you have that yes on valid submit and so the um the valid handing method is there and so I can say okay I would like to call the dialog service and call the show info assing method using this simple message if I run this code of course when the user click on the create account button automatically the dialog box is displayed there with the simple message but that will be also interesting to have the possibility to include a more detailed message or a more detailed dialog box with extra feature like I don't know field New Field uh with external link or something like that so it's also possible of course the only thing is I need to command this part and to use another method not to use the show info asking method but in this case I would like to use the show dialoging method and I can set the account created dialog uh object that is another razor page the page is there That's a classic razor file except I implemented I added the implementation of the I dialog content component and in this case that's possible to specify a header for the the dialog box for example there I would like to display uh an icon person ad icon I would like also to display a label contain containing the title and also a footer the footer is there with a button with a close button and when the user click you on on this button the close button the save Asing method will be called and the method will be automatically called the dialog. close a sync method to close of course close the dialogue you have also the possibility to include in the body another title a subtitle and of course the description of your component or the or the type of text field or the type of component you would want to add there so if I run this part I can come back to the same uh register field and if I click on the create account you have know of course the new detailed dialog box with many many feature available there so that will be interesting like that but maybe it's again maybe that will be better if we in this case in in fact if we don't display a dialog box maybe something better why do you think Vel yeah I think that's that's definitely an option uh one of the things that I uh would kind of do perhaps here is not force the user to do something so maybe we can use a toast message for example and uh have that display success message and then automatically disappear screen to go to the vents on screen yes yeah thank and uh to enable those those messages uh uh that's functionality that that's already built in into the library um so we have to go to the the same lay main layout page where Den was before uh but now besid the fluent dialog provider we need to add the fluent toast provider uh and again indicating to the library hey this is the place where you need to insert uh any uh markup code that comes out of running this component then uh next we go to the registration form uh and we inject the uh the well we don't actually need the dialog service anymore but it doesn't hurt that it's there but we also now inject the toast service so that's the actual service that is going to display uh your message and finally inside the code we just say no we don't want to use this uh this confirmation anymore so we comment that out and now we say to the toast service show a success message once this account has been created and standard uh settings for the to servers make it disappear after a couple of seconds uh but those things are of course all configurable um so let's go to the form again and say that I want to create this account and you see automatically now the toast message appearing that the account has been successfully created I can click on it to close it but also it will automatically disappear after that set period of time and now it's it displayed in the uh upper right hand but you can also configure it to go to the lower bottom corner or where wherever you want on the uh on the screen so yeah that's basically what we we wanted to show you for building this this demo site um you can see that it's a fairly complete representation of what you get with the standard demo this is all available in V4 and I think it's also good to mention Denny that everything that we showed today or almost everything is also available in the the V3 version of the library uh which has been available already uh we choose to have V4 only for net 8 and that's why we focus on that today but if you're using at six or seven you can just as well use the the V3 Library uh which we try to keep up to date with each other yeah exactly can you switch to my screen that's the last time yeah thank you so uh yes you you will find the all documentation the all information about that how to migrate from the previous version version three to the version four for example and you have also the whole list of component available in this version four of the library there on the fluent ui- blazer. net so um we quickly created an application including a counter that agre a team management registration form and we did it all using the the fluent UI guideline of course so uh you can find the library the documentation and all uh this demo via the this link or by scanning this QR code also so thank you for watching awesome great session and we have some questions in the chat I got so excited and learned a lot in this session too um we still have five minutes I think I can we can at least go through two three questions um so we have one question from Patrick is fluent UI compatible with MVB mbbm pattern yeah yes of course you can use the in fact the the the the fluent the fluent library is more the design is about to create of course the design like you say there uh but yes you can use mvva pattern or you can use other type of pattern to manage the content or manage the the the the data the data behind the old components so yes it's possible to do that yeah we opin we're opinionated on how it looks uh but not necessarily on how it's being used yeah exactly okay so the next question is about any plans to add chart component um I already mentioned the net Aspire and the dashboard uh there is some charting capabilities in there which are not uh part of the library uh right now but uh uh yeah for the future we could look at on on how we could integrate that into the library and make it uh more blazer likee because now it's just more of a a JavaScript library that's being run um side by side with the library depending maybe of the number of requests we receive later I don't know but yeah not so create more issues if you want chart components exactly so that it will be uh prioritized maybe in the future so we have one more question from Amal uh basically the question about fluent UI being available as a web Library like bootst so it can be used in a place like razor Pages there were also questions about um um where what kind of Microsoft products uh FL Andi is used for for example I know that we use uh BL Blazer components in teams toolkit templates but if you can give a couple of examples like what what are the other templates we are using Blazer components I think it would be so useful yeah so so this library is specifically for Blazer application so having that fluent design system in Blazer applications um there's also other implement ations of the fluent design system with with other Technologies Microsoft Technologies and and non-microsoft Technologies like react for example um so we have a big fluent UI re react Library which is also being used on internal and and external projects so it kind of depends on uh what you're trying to achieve but um I think it's pretty safe to say that there's always a fluent UI uh implementation that fits your technology stack uh for specifically like I said this Library we choose to to use that with uh with blazer um so uh my guess is that this is not going to be successfully you will not be able to successfully use this in in a pure razor Pages side because we're missing the parts of the infrastructure that we have on on Blazer okay so there are a lot of questions if uh fluent UI is available for sb.net MVC or if we can use it with zaml do you have also comments about that for for for uh for this Library as its Blazer it can also be used with uh Blazer hybrid uh we have done tests with that there's there's a couple of uh uh GES there but they are all called out in in the readme files but yeah using it with with blazer hybrid is is definitely possible uh if you would want to go like the the more U mobile native way then uh yeah don't use this but see what other options there are available I'm I'm well I don't have one on the top of my head do you know one Dennis uh on on using it actually with Native mobile applications no except using uh like you say no using the the the Blazer project uh in in this mode in myi for example that would be possible but uh I don't think using uh you using Z for example no or something like that no you have the list of available framework and available fi framework yeah available in the website so you can go that you can go to the Frei website and you'll find that yeah great that was awesome session back to back I love the flow how you built the app from scratch together back to back so that was really inspiring thank you so much Dennis and vinent um thanks for joining that thank you thank you

Channel: dotnet

Views: 18,190

Keywords: .NET

Id: a0xOqNemRoY

Length: 35min 33sec (2133 seconds)

Published: Fri Nov 17 2023