On .NET Live - Secrets of building Blazor Components

[Music] [Music] [Music] do [Music] [Applause] [Music] and we're live hi everyone welcome to and of course i have the wrong screen on there we go that's better hi everyone welcome to on.net live my name is cecil phillip and you know thank welcome to our show where we talk about all the wonderful things happening in the world of.net and within the.net community today my friend ed here is going to join us and he's going to be talking to us about how we can build components with blazer so i think that's really cool i hope you love that um ed why don't you introduce yourself really quickly to folks so they know who you are sure what do you do so i am a principal developer advocate for progress software you might better know us as the brand telerik and all of the telerik ui components that we've built for pretty much every dot-net platform that has ever existed i think so i've been a writer and a speaker and developer for about 20 years now so blazer is my latest uh thing that i am just absolutely loving so i'm happy to share a lot of blazer knowledge with you all today that's amazing it sounds like you probably have tons of stories over like you're 20 years in the industry of how things have changed and tools we used to use and all that type of stuff lots of scary things too so there's lots of scary apps that i've seen people write and i've had to go fix so oh my gosh oh my god we got to talk about that a little bit later but before we move on i definitely want to give a shout out to everyone that is in uh our live audience watching us right now i'm looking in the chat and i see we have some folks from brazil from italy india's here uh if i scroll up a little bit uh yeah we have folks who join us from all over the place so definitely thank you all so much really appreciate y'all being here it's like 2 a.m i think in india that's it it's impressive it probably is that's dedication that's what i call it that is definitely dedication um i also know that this month is pride month so definitely shout out to all our folks celebrating pride month it is also caribbean american heritage month as well so all of our caribbean folks that are here celebrating with us definitely appreciate you joining us and i hope you enjoy the month there i see ricardo in here from jamaica i'll see some folks here from montana oh wow we got some people from barbados too that's awesome germany north carolina plus we got it here the dominican republic we got a lot of caribbean people in here today i love it i love it very nice okay so before we move on why don't we dive into some links right before we start talking about laser components and let's kind of see what's been going on in the world.net now i'm going to share my screen super quick [Music] and let's take a look at some of these links here all right so first link i want to share with everyone so dev intersections is actually happening this week or it might have been done by now to be honest with you and our fearless leader scott hunter just gave a keynote where he talks about modern application development with net and azure so the video for this is already available if you head over to channel9.msdn.com you can check it out right now and you can learn about some of the new and really cool things that we're doing with net and net six and you know xamarin and maui and like all this other cool stuff maui has me so excited yeah i wasn't thrilled to get on that i was telling james the other day like i haven't done any mobile development in years um but like maui might be the thing that gets me back into like writing mobile apps again like that that should be super cool particularly yeah so that's what i'm looking at getting my blazer apps on your mobile phone right right can you just take my code and make it a mobile app that would be amazing thank you so much um speaking about blazer this month we're also having a blazer um let's learn that night event and that's going to be on a june 25th so our let's learn.net events are all free and they're live streamed and they're usually with you know folks going through different learning modules or workshops and learning paths and you can follow along and kind of learn how to do you know whatever it is that they're talking about so in the past we've had folks talk about web api we've had accessibility we've what talks talk about c-sharp um now this month on the 25th we'll be talking about laser so if you're new to blazer you want to learn about it you want to check it out definitely make sure you rsvp for that and now i'm going to dive into some edslicks this week actually i think tomorrow is the last day but if you're watching us live definitely make sure you check out blazing into the summer 2.0 telerik and i think ed you've just been kind of like killing it all week like interviewing tons of folks like you know you had dan roth and leila porter uh you had the the bearded guy on that did some unit testing i wanted to see this one but i gotta check out the recording i guess yeah eagle hanson is is fantastic man he's he's a microsoft mvp and it's one of those that's like really well deserved because he has burned so many hours on b unit making that thing perfect for the.net community it's amazing right that's amazing yeah definitely got to make sure to check out that one and then building efficient apps with blazer oh look who's this guy i think this is what we're doing right now right like we're going to be talking about building blazer components today at an on.net life and yeah perfect into our blazer week right and then tomorrow you're going to end it off with infusing uh improving user workflows with laser components so yeah sounds like kids she is a youtuber or sorry a twitch uh personality that is just uh wonderful to watch so many different things she's talented with so like every time you tune into her channel there's something either artsy crafty code you name it she's got it going on man that's amazing yeah i've seen some of her streams before man and she like she she definitely has a really entertaining stream for sure so folks haven't seen her definitely recommend you guys go ahead and check it out now i'm going to share these links in the chat um but while i do that i'm going to take my screen off and i'm and i want to put your screen on because as i always like to say this is not the sensor so this is ed show so ed why don't you tell us like how do we even get started building components with blazer like this this you know we use blazer we create web things with them like how can i start creating these components that i can reuse and share with different folks so i'm going to try to do this absolutely from scratch and the only thing i've got here is i've created a new project and i've added a couple simple services that create some random data that we can pull into our application a little bit later but for all intents and purposes this is file new project in a blazer app and if i go ahead and run this out it might be something that you've seen before i've left the homepage blank because we're going to do our work today but we have the the obligatory counter component example and the fetch data example we might come back and tweak some of these when we're done but what i'm going to show today is kind of the beauty of what is the component model for raised blazer so the razer component syntax is just so simple and easy to get started the main things to remember here is that blazer is a spa framework that uses web standards so your html and your css that you already know and love uh should be able to work perfectly in your blazer app and it looks like folks are asking if i can zoom um i can bump up the font here just a little bit more this might be a little bit better and then this side i can zoom over here when i'm getting ready to show off our project this is a web assembly application so blazer webassembly app uh there's nothing really special about it other than the fact that i just added some simple services in here again to generate some data on the fly for us when we need to bind to some data so let's let's just get some some really simple things started here and let's create an alert component so we'll do a div tag we'll add a class here and i'm going to use a little bit of bootstrap to get started but we're going to write our own css in just a minute we'll say alert uh and then alert dash danger and this is like your typical bootstrap alert dialogue type of thing so we'll throw a span inside of it and say hello uh from laser in here and then this is not a component so much this is just some html but what i'll show you is how we can take this uh html and evolve it into a component so let's try to run that again and you see we've got a little pink box here that says hello from blazer and what i'd like to do is actually make this into a reusable component so that's what we're going to focus on next so if i take this html out of here and i create let's go ahead and just add into our pages folder we'll move this to another place in just a minute but i just want to show how easy this is so i did add a new item we're going to select razor component that is what blazer is made up of is razer components and we'll call this alert box.razer and then we'll just paste that same html code into our project here our alert alertbox.razer file and then we'll go back to our index page and you'll see that i have an alert box component now and that's the most basic component you can probably create and you can see that i had to refresh there to get that to work what we're going to do next is i'm on.net 6. so i'm going to start using live reload or hot reload so while we're building these components today you'll see them just reload immediately in the browser here so that should be really nice too so that that's just how simple it is to create a component uh we're going to go over the different aspects of a component as well let's take a look at some that i already have in here i have some pages and in blazer a page and a component are essentially the same thing the only difference between a page and a component is a page is a component with routing so if i go over to my counter component you can see that this counter component has a page directive at the top and there's three basic sections of a component in in blazer there is your directives that are usually found at the top those are compiler directives that give the component special abilities like routing for a good example right here you put using statements in here do dependency injection things like that the other section you'll find is markup so this is html and razer markup so it's pretty much anything that works or anything really that works in html you can use in your blazer or razer component and then we have some razer syntax here that binds to either some data or events so you can see we have an on click event that's bound we're also binding to some data here so the current count so when we click on the button in the component it will increment the count of the current count value and then display it back up here on the uh the page so this is our interactive increment count component that you saw me do earlier so if i go back here and route over to counter and click on this you'll see it count up that's the component that we're on right here so uh this system that we have to put components together is very flexible very easy you saw just how simple it was to create that uh that alert box but it's not a very flexible alert box right now so it's kind of static it has the same text in it if we create multiple of these for example and we save that you'll see that i have four of those alert boxes there they all say hello from blazers that's not super helpful for us what we'd rather be able to do is come into our alert box and put some kind of custom content right here and make a nice container that we can just call alert box and then put that content inside and it should error out you'll see i have an exception here because that's not valid yet so what i'm going to do is go back to my alert box and in here i'm going to create a code block so this is the other section of a component that you'll see you have your directives markup and your code and i'm going to create a parameter here and a parameter is basically a property think of a property on a class all razor components get compiled into a class but think of a property on a class it's public and it has a getter and a setter so what we're going to add here is a special class called a render fragment and a render fragment tells blazer that the the property that we have here the parameter is going to accept other razer markup components in html so render fragment is part of our rendering tree in blazer and we're going to call this one child content and then again we have to have a getter and a setter so we'll just add that property there and there we go we do have an ending curly brace just want to make sure i got that right and then we need to tell the template where we want to render that child content so i'm going to wipe out that middle section here and put in child content in its place so now i can go back to my index and this custom comment section here will work and it looks like my console is alerting me that it's reloaded so right now when i'm creating or when i'm writing code it's refreshing the entire application in a few minutes i'm going to turn on hot reload which is a new feature in net six and this will actually you'll you'll stop seeing this pop up all the time to let me know it's reloaded so let's go ahead and make a couple of these now and you can see in here that these are all independent instances of that alert box so that that's going to reload now and what do we have here let's try rebuild okay all right so let's try this one more time looks like it got hung in a little bit of limbo there all right so you can see these are three different instances of that that alert box component now they're they're allowing child content which is really cool so this child content property is something that is implicit in blazer so what it's actually doing here is it's creating a html tag here of child content but we don't explicitly need to write this out because it's something that is understood by blazers so this actually has the same meaning as if we were to omit the child content region there so the reason that we have that is if we wanted to add multiple of these i can't have multiple named child content but i could have something like header template and footer template and so on so what i might do is name these outright so i have a header content and a footer template and because there are so many of these blazer doesn't uh know how to implicitly take the the content that i've added as a child here and stick it in one of those templates now we need to explicitly write out which template we want that to belong to got it so i might say this is my my content template there we go intellisense is a little behind this is a preview visual studio so that we might see some ghosts in the machine today and then we have a header template and then we'd put our header here and so on so again the intellisense might be just a little bit behind and then we also need to tell it here where to render these at so i put my header template maybe at the top and you could have html surrounding these as well so i could have an html header block there uh render my content uh beneath it so my content template goes there and so on so now we have these questions coming in and i want to make sure we kind of jump in and see what folks are asking really quick so a couple of questions coming in from youtube and sergio was asking what's the best way to change a html element class on runtime would it be like creating a private property or something of that sort so we're actually going to do that in just a moment so if we could just hold that one for the next section here we're going to create um we're going to add a property here so we can change our alert box to a couple different colors so we'll get that one in a couple seconds okay and then i'm gonna ask one more before we keep going um harvey also on youtube is asking is it more natural to use a parameter and i'm guessing he's talking about when you created the components and you had those render fragments so instead of using like a property on the um on the element he's asking is that more natural i'm guessing that's what the question is i'm assuming yeah i'm a little confused by that one the parameter we do have parameters here so each one of these is a public parameter on the component so parameter is basically a property that just has this special special attribute to let blazer know that that is a parameter property uh so i'm a little confused by the question i think we need more context on that one yeah and uh let's see what else we got we got one more from youtube it says i saw you pass into the childcare point and only text is blazal capable of rendering markup passed from parent to child oh yeah that's actually a really excellent question so first of all let me take these extra bits out here because these will actually cause a runtime error now because again i said that blazer doesn't know which template this belongs to as a child piece of child content so well know where to render those so let's take those out we'll leave the footer blank and then i'm not sure why our intellisense is having a hard time catching up here but everything looks like it should be and then let's go into custom content and let's just throw remember we have that counter component and it has even though it has a route it is still a component and we can use that component in our template region here so just really quickly so the folks on the chat are saying you spelt header template wrong ah okay let's see which is probably why well not there but in the wait and then i'll copy it yep there we go there we go there we are so let's try to rerun that that's probably why this is this is hung so we'll go back here and do a rerun and then you should be able to see that yeah there we are there's our uh our header goes up here our counter component is rendered beneath the header and then we don't have a footer so nothing's rendered below that and we can still count with our counter component so this will accept this render fragment will accept any html any razer or any component or any combination of right so uh how we doing on questions we get a lot of questions i love this uh this group yeah we got a lot of folks asking um tons of questions inside here right now um the latest one is is there a way to bind laser components parameter at application level um yes so what you would have what you'd do is create um like a service or a poco object a plain old class object and then just maintain state across your application using dependency injection and we'll we'll kind of get to that in just a few minutes when we start doing we'll do an alert box but we'll iterate over a collection and i think that might make things more apparent when we do that got it and let's grab one more before i let you keep going um this one also coming in from youtube we got a lot of questions from youtube today what is the recommended way to use script tags that are required to be inserted inside the html uh don't don't so yeah don't do it uh so blazer one of the wonderful things about blazer is for the most part you do not need javascript for anything now this is a spa application so if you were to stick a script tag in your index here for example say script in this area the application is rendered before it's client-side rendering so this script is not going to run in the same context that it would in a normal html application just the html page so it's not going to execute if you just try to stick it in there what you need to do is look into javascript interop and you can still make calls out to scripts in blazer in into javascript and that's actually done quite often for things that aren't supported by blazers like geolocation or canvas apis things like that you can totally call out to to javascript and do those things but you can't just drop script tags randomly in your application there's several ways to load javascript into your app one of those is directly into the index page and then if it's a javascript module so if it's been built using the es6 module pattern which is standard now in the browser you can actually lazy load your javascript into the application uh into the component as you need it and uh make calls to that javascript from c-sharp so it's something that's totally doable nice okay um let's see what else we got um some questions coming in from twitch this one from uh frosteddev it's asking can you add interrupt layer and make that it links between a razor component and a js file i think you kind of just answered it yeah yeah absolutely you could do that um if you want to see a really uh complex but uh useful solution uh to that um i have a github repo and it's also a nuget package called blazer size and what blazer size is this is a javascript interop package that you use for detecting the device size and this will actually make those calls out to javascript for you and do screen size detection and then you can flip different uh parts of your ui around to accommodate the different screen sizes so for example on this one what we're going to do is set up a media query which let's see where is that media query at there's a media query component in here it's hard to not um not be in visual studio to see this stuff but basically the media query component will let me know i have the wrong example that's why let's go down or up a bit we could do it without a template here we are so here it's a great example so i have a media query component we set the break point uh for a small or medium size uh window and when when the application senses that that break point has changed it's going to trigger an event so we can toggle a boolean value and say if this is a small screen display weather forecast in card view if it is a large screen we'll go ahead and do a full weather data grid and display that out so you can actually do that underneath the hood of this there is calls out to javascript to do that detection to see what the device size you're at so for the most part.net devs shouldn't have to write much javascript because there's these great little libraries out here or things like the telerik ui libraries which we can talk about in a bit as well yeah i'm probably in a chat like there's tons of questions coming in so many questions someone is asking what is your theme like what theme are you using on visual studio oh on visual studio this is actually a custom theme i put on the visual studio marketplace so let me grab that for you really quick uh this one is called mid century and i'll get the link for you um going to pop this into private chat so you can paste it for everybody on all the streams but you can find the visual studio theme there so this is something that i created i i really enjoyed it so i shared it with the community um so we can get back on track a little bit and i think it will answer more questions um that people have i'm going to take these uh special templates out for just a minute and go back to using child content because like you were saying just kind of simplify a little bit you'll just do it by default so yes this is good right so this is implicit now so we don't have to have all that code and it's going to make things just a little bit easier for demo purposes so we can do that and we'll just put some static text there um let's let's answer another question we had about css but first let's move this out to a component project so let's do that and then we can turn on the hot reload stuff and it'll make this go a lot smoother so i'm going to come up to my solution level here this is my blazer project i'm going to go up to the solution and say add new project and then i'm going to create a razor class library and i'll zoom in so everybody can see that really good so a razor class library this is going to give me a place to stash all of my components and if i have other projects that i want to use it on i can share this with other projects within my organization or put it on github etc so so i'll just call this my components you can name that better for your your purposes i'm on.net 6 preview and i just want to note here if you're in blazer you don't want to check this box this is for mvc and razer pages so don't check that box if you're doing blazer and then we're going to hit create and this is going to stub out a razor component library for us it's got some sample stuff in here this is the equivalent to class1.cs so we're going to go ahead and just delete those out we could put static assets and things in here as well you can see there's a background png and some javascript that you might want to add to your project we're not going to get into javascript interop because it's like a whole probably two or three hours show to get that discussion going so we'll delete that one too and uh you'll notice we have an imports.razer file this is kind of some public imports that we have so razer has this concept of global using statements which is now something that's common in c 10 but razer blazer has had this all along so we can use imports.razer to import using statements across all of our components here so we'll leave that alone and what i'm going to do is take my alert box from this pages folder and i'm going to copy this and paste it down here and remove that one from our pages so now i have a a assembly here a component library that i can bring into my project and keep everything nice and separated so i need to come over to dependencies and just add a reference to my components hit okay and then import these into my uh imports file so i'll do using my components and now that i have this using statement here let me close this index page out and reopen it it should it should cross your fingers re-highlight there we go nice so now i've moved that component out to its own uh component library so we can work on this some more let's add some css styling to this so i'm going to right right click on my components the root and do add again and i'm going to do new item and another feature of blazer is css isolation so what we can do is actually add css per component and if we were to remove this component from our project the css would go away with it so it's a pretty neat feature and it's something that things like react and angular have so the convention for this is to say alert box.razer.css so this is the same name as our component with css at the end as a suffix and notice how it just nested that file right underneath of the component so now this is the markup and the code and this is the the css to make it pretty and then we just need to add our css here now this is actually going to be pretty simple and it with blazers css isolation our custom css that i just added to this file um which i think i'm missing part of so let's let's try to fix this up and say alert this will actually take precedence over the bootstrap um that you saw but it's uh missing a little bit here a little copy paste error there we go i see it now so you don't have to watch me type all this out and misspell things again we'll just paste this in so we'll just drop a little padding in here some boarded radius a little bit of outline and then we have some different coloring here for a danger info and error and the question we had earlier is how do we add the ability to style these components with different css classes i'm going to show you a couple different ways and let's render this all out again and to do that i'm going to go up to my main project here and just open a terminal so powershell is up here and i'm going to do netwatch and let that run and i'll zoom in here when it gets going to show you the text that's coming up oh and uh namespace could not be found so i'm going to try to clean the solution here and rebuild it because it looks like it it was having a hard time finding this component directory and now it looks like it's running so it says it started and up at the top here you'll see it says watch hot reload enabled so this is dot net six this is a feature of dot net six only so if you're on.net five you're not going to get this yet but we have this hot reload uh and i need the right page open for this to work let me try loading this up in my browser again i may have inadvertently closed it there we go so there is our component with the custom styling on it that we just created and it's not conflicting with the bootstrap styles because css or sorry blazer does something called css isolation and what it's doing is it's taking our markup and it's appending like a guide type of an id on top of it or an attribute rather and then it's modifying the css as well so if we look at this the actual compiled html and css is going to be slightly different and you'll see this b dash and then there's like a code in here and if we look at the style for that let's see if i can get a chrome browser to behave here you can see that it's appended that attribute here at the end of our css so now it is scoped to that component and it won't conflict with the bootstrap css that we already have in the project so it's keeping those two things separate and all that magic that just you saw from the compiler comes from the fact that we just named this with this convention so it has the same name as the component.razer.css pretty neat so i dropped these side by side so we can play around with hot reload for a minute because i think this is a really great feature for example let's just change this we're doing alert dot danger danger let's just make this blue for a moment just to show when i save this and it's going to it's going to tease me here it's not going to it's not going to do the thing that's magically supposed to happen uh let's try this one more time that's what happens when you use preview bits sometimes right sometimes things still something absolutely uh did i get the right alert should be alert danger and uh yeah so it it's not playing along for some reason um this was this was working earlier we won't troubleshoot this too much there it goes so it cached something uh which it doesn't normally do with hot reload so you'll see this updating as we go like for example if i put two here hit save you can see the console going down there and it's reloaded over here so we've got we got our um we got a couple questions about sass we could dive into those super quick so yeah one person here from youtube would say i heard mixed talks on css isolation i like to use sas is it recommended to use css isolation um why my preference is actually to use sas instead of css isolation so um i'm showing this is a very like uh common thing that people ask about for blazer so i like to just show off the capabilities here whether i i totally agree with that pattern or not but i i love sas i think sas offers a little bit more in terms of like uh variables and nesting and reusable code it's it's got a little bit more bang for your buck people seem to like the css isolation too for reasons that you know it doesn't conflict with other css classes that are in the system uh some people like to have strict control over the styles so developers can't go in there and muck things up with like uh important uh important bang and then like you know you've got like the soup of css uh but you can also enforce that type of stuff with just good sas best practices so they both work they both you know have it's matter of taste type of thing but i personally prefer sass over this um i've got a blog post that i can share as well actually if you just go to my my website it's one of the first two blog post that's on there actually it's the latest blog post that's on there and i'll share that with you uh cecil so you can post that on chat as well but that is an excellent question i actually do prefer sas myself got it and then another question we have in here um this one's coming from andreas what's the difference to have a style inside of a blazer file versus css isolation okay great question because one thing that you really don't want to do is throw a style tag up here uh because um if i put a style tag in this element here what's happening is every time i render an alert box now i'm kind of spamming those tags into my browser so you'll see this reload and if i inspect this we'll go right into one of these components and try to get this it's hard to do on these cramped screens here it's one of the cruxes of streaming you can see the style tag is repeated multiple times from that so style sheets inside the component nuts not so much of a good idea they actually get rendered out every single time that component is used so it's not really going to cause too many problems but you're just adding additional stuff into the dom that just doesn't need to be there all right so we've got see what else we got we got another one i'm trying to find it but we did have another one i wanted to ask um this one this is the one i wanted to pop on here so the question is how can i set the css version of isolated styles to force the browser to reload it's in the latest version so you can imagine that there's a new version of it right like how do i know get the browser to like dump that old one and pull in this new one it um it should re it should reload uh the style sheet um it there's no mechanism of like cache busting that i know of you might have to just force reload the the cache in your browser but generally it notices that there's a file size difference and the browser will load a new copy of it so i haven't really run into an issue with that that hot reload one i think was just because hot reload is being a beta of hot reload uh so before before we run out of too much time we we still haven't answered the question here of how do we change up these different styles because we have uh actually i need to go back and change that blue color off of that one but we have let's see i don't have a clipboard anymore let's just make this uh a nice orange color i'll just pick one of these and uh there it goes hot reload worked that time yay um so that that loaded back in a nice bright neon orange for everybody what we want to do is give the user the ability to change this style out if they want and one way to do that is again with another parameter so we can come in here and to make this go quicker i can actually paste this off my clipboard and we'll pop a parameter in here of alert danger and let's zoom that back out so we have a new parameter and i'm going to call this one css class and it's set by default to alert danger so it's never an empty string here so it always has something in it unless we specify a different style and it's reloaded but there's no changes really to see there but what we can do now is let's go to the middle one here and just say css class equals alert dash info and save that one and then when we go back you can see that we have different styling now on each of those so i could say css class alert dash learning i think is the other one that we have and there is maybe not a warning what was the other one that we had here we've got three three styles that will overwrite the bootstrappy ones error info in danger so if we go back and make this error then we have our three there we go three colored ones there so now we have control over the css class there is yet another way to do this and this is something that i find really interesting so this is called attribute splatting and what attribute splatting means in blazer is we have a property named css a css class here if i were to add something else here it's going to throw an error when this runs you can see an error has occurred if i go to inspect here and look at my console the actual error says that there is no property matching the type foo and this this goes for any uh html attribute as well so if i were to just say uh class like a css class i'm going to get that same error and uh same for like id and those type of things so you can see that it doesn't have an attribute of class or a property that that matches class because if we look at our code here we have these two properties only but there's a feature in blazer that lets us actually accept these unknown attributes as input so let's take i'm going to kind of fast forward a little bit here again with some copy paste magic and let's hope the razer compiler here will accept this change i think hot reload is not not liking that straight copy and paste here of the entire content let's try to rebuild that oh it still doesn't like it where's my build errors uh so okay uncle i assume it is yep so i'm missing my at code block here there we go that should that should make it happy so now i can come back and restart my watch and css class does not exist in the current context um i actually want to take this off for the moment so we shouldn't actually need that right now and there we go and we're loading but something is not quite right yet so what this is doing is we are accepting a collection of attributes and these aren't hard tied to parameters that are listed in here so we could actually go back here and just say class now with a normal html attribute and we won't get that error anymore and what it will do is blazer will pass along that css class and write it in line where this attributes directive was placed so it will say div and then anything i put into the tag here which it keeps kindly adding extra quotes that i didn't ask for let's take some of these off because it's uh it's mucking things up having multiple of these uh so we could say even id is foo and that type of thing and it's going to pass these along happily to the the uh the section that i marked attributes so they will render where where this tag or this uh directive is found in the markup so if i go back here you can see the rendering is a div of class alert info with an id of foo but we're still missing a little piece of the css class in here so i've kind of defaulted it to alert danger but i also want to append that that default uh so it should be like alert alert danger but that doesn't quite work either because if i specify something like alert info it's not concatenating this alert info with the alert and alert danger what we want to do is just replace this one piece of string here and not this one so it can get a little bit tricky as to how i want to merge the additional attributes with something i already have so i have a nuget package up for this something that i wrote called blazer component utilities and i'll share this with you again so you can post this in chat as well it's just a handy little nougat package that i wrote it's a nice pattern uh it's not like a framework or anything like that it's more of a pattern than it is even a library so this is a fun one that i like it makes this process a whole lot easier and it also helps you with conditional css values as well okay so what we'll do is i'm going to take and copy paste again over this this component because you don't have to see me type all of this out and it's saying that it doesn't have the nuget package so let's just make sure that it got added here packages yep so it didn't get added for some reason let's go to manage nuget packages real quick and make sure that blazer component utilities is installed and that should get rid of that error it's a really nice fluent api if you're familiar with fluent apis from like html helpers or just like your your basic.net build pipelines and middleware and stuff like that it's very similar to that and hopefully this clears up let's try reloading the um oh i put it in the wrong assembly that's what it is we need to add it here i put it in the main project we need it in our component project apologies i put it in the wrong place this actually goes where our components live and we moved the place where our components live remember yeah those are in that um that razer class library right yeah exactly so in our razer class library now we should have a reference to it there it goes it was starting to clear it up when i closed it all right so i'm i'm using my blazer component utilities and i have uh my at attributes here and then after it always can do this again is not found we need to rebuild dependencies packages yeah it didn't add it i had this problem earlier where visual studio was saying it was added but it didn't actually put it it says it's added here i've got a green check mark but if you look at solution explorer that is not there let's try a clean and a rebuild what did it say let's it's uh you know what let's try killing the um live reload the hot reload now that's that's a good point that could be whatever maybe it's maybe it's holding it up there let's try a no i don't want to update let's try blazer component utilities again this time it'll uninstall it says it's installed but the compiler's not finding it which is fun so we'll try this one more time okay yeah i think it did it that time i think it did it build succeeded so that's that's fine that should go away all right nice there we go visual studio just having a little keeping us on our toes making sure we're paying attention so we're still going to accept any html attributes here and then we also have a class attribute that we're going to append to and then i've also added disabled in here uh just to show that we can do other uh attributes as well and then we're we're still using this additional attributes code um and i don't think i quite explained this exactly either so this parameter has a special flag on it that says capture unmatched values is true that is that error that i was talking about that if you if it's not catching the unmatched values it just simply throws an exception so this setting this to true tells it that if it sees a parameter that doesn't match one of the explicit parameters in the component it's going to go ahead and shove those into this object dictionary so we have our additional attributes and then with my addition my library uh with these additional attributes what we can say is by default our css is going to contain the text alert and then we're going to add a class of alert dash dark which is one of one of the values i used to have in this demo or sorry that's when it's disabled so if it's disabled then it's going to be alert dark and then it's going to go ahead and merge any class attributes from the additional attributes dictionary and then it will build the css class for this this component so it's doing many things here now so it's taking our custom input it's also overriding if this is disabled or not so now i can just say with regular css give me an alert dash info we'll just do ctrl f5 for now to make sure this comes up correctly there we go so it's an info and if i were to change this to error it should we should be able to come back and that is red so you can see it's it's merging those css classes together properly now and then if we do disabled equals true this is an actual property and it will accept that and okay it's disabled is not working for some reason we'll move on though um we could we could attack that and get that to work but there's a little bug in my coat probably somewhere so i want to get to one more thing before we wrap up and that's how to do collections of things because i think that's very interesting to how these components work so right now we have an alert box and if we wanted to make a collection of these we'd have to kind of make multiple or we could use like uh for each statement which intellisense doesn't want to help me with today but we could iterate over a list here so for items and items if we had some sort of collection here we could just iterate over it like this and put in say an item here and render out the item inside of the alert box but this still isn't quite what i want what i want is a component that i can just give a data set to and have it know what to do with it so let's bring in some data so let's inject here through in dependency injection a service and i have a logger let's see where's my logger service i might need a using statement here at using services there we go and now we should be able to use inject and then i want to bring a service in and it is the logger service and we'll just uh we'll call it logger and with logger we get log items which is a collection of items that we've logged through our logging service so what we'd have to do to kind of write this out is say for each and then we'd write these out individually and we save our log in logger items and look at that i managed to do it by hand log dot and we have three properties here we have an id a level and a message and uh let's just throw these maybe in a like a an unordered list or an ordered list something like that so we can move this code block around boy visual studio is having a lot of fun with this today this is this is uh leading edge beta bits here so we'll throw a list item there and put our log message inside we can kind of see what data we have and then we'll build a component that can accept data and write that data out in in that component template so here's all of our items it's just some lorem ipsum so if it kind of looks like it doesn't make a whole lot of sense it really doesn't but just so you know there's some data there right so what we can do is similar to this for each loop let's go back over to our components and in our components library let's add a new component so we'll do add new item and we want let's try that again add we want a razor component i don't know where my template went razor there we go razor component and we'll call this one alert list so we want like a data bound component that we can bind a list of items to and again to save for time i'm going to copy and paste and this is one of the cool things about blazer is these generic typed items are generic typed components so we have something called a type parameter of t item and this is basically like saying i have the name of the component here is alert list you can see up here so this is similar to saying um i picked a bad spot to type alert list of t item okay so we're going to feed this alert list a collection of t item so it can iterate over it and write out multiple alert boxes for us and then the user since this is a templated control the user can control what goes inside of that alert box through their own template so we have a couple special things here you're going to see something a little bit familiar called render fragment but this time it's typed so it's a render fragment of t item because we're going to supply a type to the render fragment so it can iterate through the template and apply that item to it and then we're going to have a collection we have a i read only list this could be i enumerable and list as well this just keeps things simple we'll do read only list and we're also going to use t item there and this is our items and this could be called anything really this could be called data you name it naming is hard of course but this is your collection that you're binding to so now if i go back over to my razer index page what i should be able to do is say alert list and then i can say items equals logger dot items and this is an intelligent template that i can use to render an alert list so what we want to do inside of this alert list is give it the template so the way templates work in blazer is we want to tell it what what kind of template we're going to iterate over so we'll say template and then we are going to have what is called the context is going to work with me today it is not so we should have inside of our template a context item let me make sure i've got the code correct that i'm trying to type out here uh but this is going to let me let's see here item template that's probably why item template there we go looks like it's picking it up there at context so what context is is whatever type of item we've bound is going to be that item so for this we're binding to log items so we have context and then that context is our log item so it has id level and message and this context can be a little bit inconvenient because we don't really know the type unless we're really paying close attention to what's being bound here so what we can do is say context equals and then name this so now it's log and then we can say log dot message and if we go back to our application you can see that the log messages are written out into our alert boxes so now we have this nice template driven uh data-driven component uh because we're using t item and that t item is uh calling uh a for each loop and passing in the i uh for each item here it's going to say take the item template again the item template is this which could have things like html in it so i could put h1 tag in here and say at log dot id i could write out the id to it and then it's going to take that whatever that item is whether it is html another component or razer markup and it's going to apply the item that we're iterating upon to it it's going to pass it into this template so we have log id and log message and if we look at our component there's our ids writing in that h1 and then this is coming up in the other part of the tag i bet we're getting a ton of questions and we're running way over time aren't we oh you're muted there you go so yeah we do have a ton of questions but let's let's try and see if we can get into some of these now um a lot of folks are asking the code that you've just written um are you gonna make it public so folks could look at it that's one of the questions people are asking yeah i've actually got this on a github repo already okay so barring some minor changes just because things are.net 6 on here um i think it's called blazer day demo yeah there we go i'll paste this in so you can share it with chat sure so this the source code is up and online already so you can dig through that and then folks are asking all right most of a lot of folks have been talking about the differences between using um the inline go tag and then also using component based um a lot of folks saying like they've some they have preferences of using the code behave the code um the component base because it's a little bit cleaner and those types of things and you know i mean i think it's all preference really at the end of the day right so we're talking about like code behind files and that type of thing i think i saw another question somebody said would it be cool if we had a button to make code behind files this is visual studio preview uh i don't remember what's the latest yeah check this out see this code block here watch what happens when i right click quick actions and refactorings this is all brand new that just came with this release i'm going to go ahead and click on that one what does that say no way are you serious [Laughter] i did not know that was in there yeah so somebody showed me this yesterday uh a guy that runs with our our twitch uh stream named mr blazer mr magoo showed me this he's like they added this feature check this out so if i click on this look at that it just took everything and put it in a code behind file for me so if we look at our solution explorer there should be um where did it okay so it's alert box i need to expand that nope where did it put it it should be nested under here oh here it is okay it is there i'm overlooking it so there's the top level there's the alertbox.razer this is the file it created and there is the css file so we're nice and tightly nested with our our three items there and now we have a separation of the markup uh wasn't that one it was the alert box so there's there's the markup now it's just three lines of code and there is all the component code and it even took the namespaces and added them as well which i think it added too many so we can just do a little refactor there and it namespaced it and partial classed it so that's how you do the code behind is you say public partial class with the name of your component because essentially the razer file that you create gets compiled into a class so this is just appending some more behavior to that class so it's using a partial here to add that capability so now we have that code behind and it was done in one little click of our mouse in preview only in previous only so that was one of the reasons i wanted to show preview today even though it's given us a little bit of uh headaches here and there it's got some really cool features yeah and people seem to be really loving that feature inside of the chat one person um from twitch is asking is there it the reverse of that so can i go back from the code behind see the code in file approach i don't think so i don't think you can undo that which they might need to add let's see let's see what happens if qrik refactorings doesn't do anything here yet um they might want to add a little warning dialogue or something because there's no way to undo what i just did that i'm aware of except for for a good get uh you know get control um commit history just pull that back out of your git restore the file to normal uh yeah it is there now and that is some pretty cool stuff nice and we're going to take this last question before we take off um coming back again from youtube uh journey is asking um you the c sharp i've been adding all of my using statements my at using statements to the underscore imports razer file should i be adding them to specific razer pages instead um so the question is about the imports so imports there's nothing bad about adding it here if you're only going to use it one component you might as well just add it to that one component so um i i tend to add something here if i've done it more than one time uh so if i've added that using statement at least more than once i might go ahead and just throw it into imports and uh those global using statements are coming to c sharp 10 as well so we're we're going to have to ask this question about everything pretty soon that's true i'm kind of i've been meaning to try out how those two work together um like so if i have an imports you know a razer imports file and i also have like my global using so like can i just use one versus the other or do i have to use them both like it'll be interesting to see how that works out yeah i'm not sure um if they would only apply so imports.razer doesn't apply to uh you'll see when i when i refactored that um that code behind blockout which i think i messed up i think i i pasted over it i was going to show one last thing but we're running out of time i goofed this up but what you would have saw is there was a bunch of using statements up at the top because your cs files do not behave they do they don't look at this imports.razer file so you have to add those using statements directly to the dot cs file if it's a code behind um so i think they only work in their own context anyway so i don't think we'll have any conflicts there got it and then alan and youtube has been asking this question for a little while i think he really wants us to answer it can you use interfaces for the ad type program components yes so you could have um you could you can find any type there pretty much within reason so you you could have an interface of like i used a logger for example you could have an i log as long as whatever your your data set is you're you're applying to it complies with that i log i guess you could you could essentially do that at some point you have to have a concrete type to data bind to but yeah um yeah i think you can do what what's being asked sure cool so ed now before we we take off why don't you tell us a little bit about like some other stuff you guys are doing at telerik i know there's another live stream event for blazer happening tomorrow and obviously you guys have controls and all these cool types of stuff too for blazer yeah i just wanted to show real quick uh we have uh teller ui for blazer has grown to like 70 plus components uh actually 75 and up now and we have like some really great stuff in here and there's some real in-depth demos so if you don't want to build all of this component architecture yourself you want to just focus on your business problems um i was just demos.teler.com is a great place to go look at our telerik ui for blazer stuff and we have some really cool examples out there like this one i'll share this with you as you can pop it in chat if anybody wants to take a look this is actually up on github so if you go to the demo there's a github link actually live in the demo but this is um like a line of business style application uh has the um the ability to like manage the products and view sales reports and all of this was written without a single line of javascript so you can do things like paging uh custom sorting and date range pickers and all of that type of thing it's all 100 percent accessible so it conforms to accessibility standards so it has like keyboard navigation screen readers are are able to read uh read these out loud to users with visual needs uh it has full templating those templates that i showed you that uh type param template i mean this is being used for things like our data grid where we can just pop any sort of uh other component like you can see a rating component being embedded in the chart here or the grid you can embed images anything that you want other components i could throw a counter in there like that example earlier and those things will render out in our data grid components this is uh it's easily themed so we have light and dark themes for the application as well so our our components all support theming through sas again a big fan of sas and our components support that we can even auto detect the user's operating system theme and apply that to the the application as well so all that you can find under the github project and i mean we can even like drag and drop these menu elements around there's there's all sorts of great components out there in the teller ui for blazer library that you can tinker with and not have to write all of that stuff from scratch yourself nice like it's always useful to have a set of components and controls you know i i could never imagine and i have friends that have done this but i can't imagine writing my own grid component and having all those scenarios like you mentioned like sorting and paging and filtering and you know like rendering custom role elements and all that types of stuff i'm like nah i got i got other stuff to do man yeah and you know i i was a big fan of blazer very early on uh steve sanderson demoed this at uh the mvp event like probably three and a half years ago and i immediately went to the engineering team as like we gotta build like components for this it's gonna be huge but if we do we're not gonna like take our existing javascript stuff and pretend that it's blazer components we need to like really write this from the ground up again so it supports all of the things that blazer has that's really good like templating for example so you'll find that our components are actually native blazer components meaning they don't have a bunch of underlying javascript there are some javascript interop like i'm not going to pretend there's absolutely none in there just because blazer doesn't support literally every scenario the web can do so there are a few things for example like um our sales report page where we have a little bit of javascript that helps render the charts but other than that everything else is written natively in blazer so you get the full like capabilities of what blazer offers and i think that's something you'll find that's very unique to telerik nice nice and so folks want to check that out i went ahead and i put the link inside of the chat so they could head over to the laser coffee demo um if folks want to check it out and ed too like if folks want to reach out to you they could find you on twitter and like you mentioned a little bit earlier you have your own streaming channel as well i think a few folks in the chat mentioned they're now following you on twitch so definitely go for some excellent tune into your stream now and i saw somebody asking about file uploads uh there is a built-in file upload now in.net 5 but with telerik ui for blazer we actually have one there as well which i don't know if i can show this here but uh yeah i don't have the right file type so this one is only allowing docs and pdf but it has like nice animations that play while it's uploading you can do multiple files um and then like add and remove them and all sorts of really cool stuff that goes a little bit beyond what the place basic blazer file upload does and it supports you know it's receiving that file on the server and all that very easily well documented as well we have really great documentation so if you're looking at file uploads check that out we also have document processing capabilities on this so say you upload in this application if you were to upload a docs file the server would grab it and turn it into a pdf on the fly which is something that's really nice and that's that's part of the library as well hey ed it's it's been a pleasure having you online i really appreciate you coming on and talking to us about building blazer components and for folks that are still here thank you so much we definitely did go over a little bit but you're still here so i really appreciate it um definitely come back next week we're gonna have some more folks talking about blazer and you know asp.net core tons of awesome stuff here on.net live tv so i hope you enjoy your day definitely check us out again in the next couple of weeks and uh enjoy writing some cool stuff with blazer very cool thanks for having me and uh goodbye everyone we'll we'll see you on twitch bye everyone [Music] do [Music] do [Music] you

Channel: dotnet

Views: 16,561

Keywords:

Id: Q4D5NffKTIk

Length: 80min 42sec (4842 seconds)

Published: Thu Jun 10 2021