XAF XAFers Community Standup, 18 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: XAFers Community Standup XAF Blazor Experiments

Description

Click Here to Subscribe: http://xaf.life/35

Websites:
https://xafmarin.com/
https://xari.io
https://www.xafers.training/
http://xafersweekly.com/

Facebook Group
http://xaf.life/4g

Free XAF Support Hour
https://calendly.com/xari/free-xaf-support-hour

A

Hi everyone and welcome for the soft community stand-up of february 2022.

A

uh The subject for today will be uh tricks for blazer like how to implement little functionality that you might need in your blazer application, and here with me, is dave from gamma challenge. He's an older express, mvp dave. If you want to introduce yourself.

B

Feel free to go yeah dave from a chat. Sorry, my camera's not working today, um but I'm pretty excited to see what what josh has here for uh for the blazer stuff. It's uh it's pretty exciting. We've done a lot of uh blazer work recently ourselves, uh including some implementation of you know, schedule and that type of thing which isn't released from uh devexpress officially yet so uh it's gonna be nice to see what everybody else is doing in the community uh with blazey.

A

Yeah uh thanks for the update, so if also anyone wants to share anything that I have done in laser uh you're free to like write in the chat and it will allow you to share a screen.

A

But in the meantime I will show some examples that I think are really useful, so we will start from the easiest one to the most complex one. So the first example that I want to show and we're going to create it from scratch- is how to implement custom functionality in this views in south blazer.

A

So, let's start with that.

B

I will ask everybody in the who's participating today. If you could mute your microphone if you're not actively talking, that would be great. Oh yeah. um We normally force that, but.

B

Perfect thanks. Everyone.

A

Okay, so we're ready, let's create a new break.

A

The good thing about soft place or laser in general, is that whatever solution you have seen before um using javascript, you know using node, yes or react. Basically, you can implement that in laser and there is a huge amount of solutions that you can implement. So your your subplace application can be really really preaching functionality.

A

So this will be this view. Column.

A

A

In my case, I'm using the the newest version of soft blazer, but it's almost the nearest one. I think, like I'm one version behind, so the code will not change in any case, so let's create a top blazer web application. Of course we will use xpo and not authentication.

A

And for modules, for this example, I don't need anything, so I will just finish.

A

If anyone has a any questions, you can like also use the chat, and I will check it as soon as as possible and answer you here in within the stream. So let's rebuild this for first time.

A

And we're ready to go, this is almost done so, let's add a new domain object.

A

So this will be present.

A

So the functionality that I want to show is how to add custom columns to the list view columns that with the special functionality based on an html template. So for this we're going to create a really simple business object.

A

A

Name and email.

A

So let's run this at this one time.

A

So, let's see how this goes, live coding always tricky. I practice all of this this morning, but you know how it is right and I get this reception, but this is section I guess everyone is getting like. I guess it's related to to chrome. Somehow I moved to different browsers like opera and vivaldi, and they don't do it at the beginning, but after a while this start happening. So I guess something related to the cookies or something like that because it doesn't happen like the first time.

A

It happens like the third time and then continue happening. So if it happens for you, let's report it to the express I'm tired of seeing that every time I run the application.

B

Have you had an issue recently where you click into a field in your application or even any web page for that matter, and it doesn't seem to register until you resize the window or move the window uh yeah actually.

A

It's happening for me in chrome and yeah, and I think it's something that is uh problems related to chrome, actually not to to the frame or itself, because.

B

A

In any random page.

B

Lately, random page even applications that leverage uh the chromium engine seem to be having the same issue. I think it's a chromium ending.

A

Because it's shared between vivaldi and h and all of them have the same problem at the moment. So I guess the trick will be disable. Try to find an old version, disable automatic objects and just say that uh just pay like with an old version, because I mean chrome by default. It updates uh automatically.

A

So you need to turn that off, I guess in general, because all of them are having that problem. So well going back to the example, uh this will be me and my email.

A

When I picked this name, I never realized that the name was really long to tell it as an image so well. This is what we have so far. um This is a really simple application. Just one domain object and two columns that are main objects, so they all will be uh try to add a functionality that, when I click on over this record, but exactly in this column, I want to um handle the link.

A

So you know that uh for for emails or for any type of links, there is a tag in html and then it will open the right application on your computer. So that's what we're going to do right now so doing that is kind of really simple. So, let's stop here and just in case I have something that I used this morning and it will be so it will be easier just in case you know how it is like. So the idea is, we need to create a render with the html necessary to render that column.

A

So I'm going to create a laser component here is the json component that I want to create. So let's go and do that. So let's go to the blazer module.

A

And add a new blazer component.

A

And this will be email, column, template.

B

And it doesn't matter if you invest this into a folder or anything in your solution right well, it depends because uh this generates.

A

Code behind somehow so it's not a problem where you put it, but once it's there, it's better to not move it, because when you move it, then you will generate a different code behind and for some moments you will have those like tricky errors that are showing as an error in the studio, but they are not truly errors when you clean the solution they disappear.

A

So if you are not like uh it doesn't bear you that much to having those arrows temporarily for a minute or so uh then it's not a problem, but sometimes, if you're just learning how to handle this, uh you might spend long time time to feel it out there or without seeing the solution, and you spend one hour there. So it happened to me the first time. That's how I'm telling you so if there is to place it in the in the location where you're going to leave it in the end, that's good advice.

A

So here what we need to do is basically create. um Well, we have the component right and if you see this component is super simple, we only have we only need to return an html tag in general so and the thing is that we need to invoke the render of this component from code. So we have this static method that will return the right, html tag um that we need to render.

A

So basically, I'm going to copy this part. Okay, that's what we need and if you just join, uh can anyone please mute their mic. If not I'm going to need them. Sorry for that, so, okay, let's go back to the solution.

A

So it's this one. So the part that I'm going to replace is this and we don't need any html here. Basically, so we just need to delete this html tag that was in the top, and here I'm going to comment this out for a little bit. So I wanted to explain what is happening here.

A

Okay, so we do have um here uh a razor component. That's going to render just an html tag that html tag will be the column in the grid control. Basically, so uh there are a few tricks that we need to do here so, first, okay, we will make a link tag, which is an a ref, that's what we have in here and then uh we need to avoid this event to propagate uh over the other components, because if we don't do that, basically, when you click, you will end up opening the detail view.

A

So, instead of doing that, we have some special javascript instructions like um see, stop immediate preparation, so other components that are listening to this event will not be clear because of that instruction. Basically- and the other thing that we need to know here, is that this render will receive the current object, so that would mean the current row of that in the grid. So we know that in each row we will have a person, because that's the person that we just created the person object.

A

So basically, what I'm going to do here is like to remove this part, and I need to import this namespace, because, even though it's showing here that it green like it's working, it's not because it's missing the name space on top. So is this one okay, so I have the component that will create the render.

A

Now we just need to replace it at some moment, like basically customize the the property editor or the list editor in this case. So for that I would need a view controller. So that's the controller. I already have it here, so I'm just going to copy it from here and then explain you the code.

A

So let me get this from here to here and let's go back to our solution. Unless I control this controller, you need to add it in the blazer module, because otherwise you will not have access to some name spaces or some references.

A

Remember that uh soft application there are based on like a cascade in the error like a waterfall. So if you do it in here, you will not see the reference to the component that we just created so anyway. Let's add a new view controller here.

A

Lately, I'm not creating view controllers with the template, I'm just doing it with the control shortcut. So in this case I'm going to create a class because I'm going to paste the code in general. So I don't, as I told you, I don't use the item template anymore. I just do something like a sub controller view and that will create a big controller class for me. So I'm using that uh lately. So, but here let's paste the code.

A

um Let me delete this code because that was a test that I was doing before so here we're going to make this.

A

An object view controller, that's a more specialized version of the view controller. Basically, you tell them on which view you want to which type of view you want to use and which type of object will this view represent. So the name for the namespaces.

A

Okay, so right now we have the name spaces for the staff parts, which are the view controller in this case, which is the view controller in this case, and now basically, I need to import the name spaces for the devexpress component. So let's import this also.

A

And for the columns, so basically here what we're doing is like when the view create the controls like basically in this case, the grid control we want to iterate through the columns and when we find the column that we want, we will create our own render instead of the default render.

A

So um the render that we will create is this component and we have this method38.

A

So we just need to get the name of the class which, in the component, you don't see the class, but the name of the class is the name of the file name. Basically, so I will copy the filename.

A

Put this here and we know that there is a static method create and that we will pass a person object which he already has the email property. So so far so good. This is like kind of really simple. It took me a while to figure it out, and I need to ask the express for support because, like in general, there are like hundreds of ways to handle uh laser components, and you can do basically all type of magics in normal magic.

A

Until really black might be like that range. You can go really crazy with this. So.

B

A

B

Your object, space declaration for person was incorrect. You got the persistent base implementation rather than yours,.

A

Okay, so let's delete the persistent base, this one things yeah. They think that's speaking when you, when you, when you have those uh classes that they have, they exist in a different name. It's like personal, email and stuff like that. So this one is the right one great so so far so good, and I will upload this um this source to github, so everyone can take a look to it and here are the the the links that I use to figure out this this example.

A

So let me compile this and hold it.

A

Okay, so let's see if it works, you know, like light coding, is always uh tricky, even if you practice that before or if you do this, like eight hours per day every day, this thing you can say so, let's see someone else is in the chat.

A

Okay, let's either try to do something.

A

Okay, so see now it shows same email. The word sends email is in the html tag. Actually, if you see is highlighted as an email, it's not text. So when I click over here, it will ask me like if I want to open the like the right application to handle the email protocol. This. This is the most simple example, but remember that you can put any type of html tags or components that you want to use.

A

For example, in some other cases uh we have a delivery application that we show the address as link and when they click on the address uh they use it on mobile devices, uh the it pop-up ways I don't know if waste is popular in any other countries, but you know cyborg, that's what we use as navigator.

A

We don't use google maps or apple maps, which is the one the one that we use. I think it actually belongs to google anyway.

A

So basically, this is the most basic example, but you can go crazy with an integration there, because you have the space to put your own html component or javascript component and do whatever you want in that problem.

A

So any questions feel free to contact us in the chat or open your microphone, and it's not less going to move to a different example, because we have a few examples for today. So I started with the simplest one and it's going to be more complex. Each time.

A

Okay, so I guess it was kind of clear.

A

So, let's move on okay: let's stop this and let's create a second example. This will be a property editor template lately thing most of our development is done. In blazer we decided okay, how to create. uh How do we create a property or like really really fast, because if you have seen the recommendations for the property editor and I'm going to show that uh soon, there are like a few steps and it kind of takes time to to do that in general. So let's create a new project here.

A

In the meantime, I'm going to show you guys the information for the property editor. So just let me move the zoombar and this uh basically for creating your own property or you need to create, like four classes, I think plus the component to do the rendering.

A

So the first class is the component model which is like, if you have used summary before it's something like what you will use as view models in general, then you have the render, and then you have the adapter, which is like the intermediate part and beside that. You have the class that wraps all of this together, which is the proper creator.

A

So, as you can see, there are a lot of steps and the naming is really important and also where you put it, as as we talked with day before, the location of the component is not important, but once you put it in one place, it will generate a code behind.

A

So when you move it and it will looks like there is an error that will take a little bit to uh to stop showing in the studio, you can basically delete the pin folder close the studio and open it again or reveal a few times, and it will just be gone, but uh it it will. Take you a few minutes the first time and that's why I'm warning you because for me it took like one hour to figure out that there was no error at all.

A

So, oh, let's see if someone is drawing in my screen.

A

Okay, so this I don't know if I can clear those drawings.

A

Oh okay, someone is asking for the link to that page. So.

A

uh Let's see the annotations, can we clear the annotations with all drawings yeah perfect, so we don't want annotations anymore. We want the mouse okay. So let's create uh this proper creator. So it's not about this.

A

This next example is not about the property. Editor itself is how you can save time by making a visual studio template out of this, and also it will be nice. If I can post, for example, a ticket on developer express support center and anyone can vote there, so they might include this template um in in the visual studio templates because it will be easier to just do rightly create properties or with all the classes um than implementing all the code yourself. So let's go back to the studio and.

A

A

With javier, he always tell me like jose, you put the most explicit names for anything that you write and maybe it's true.

A

So, let's see okay, this again will be a blazer application xpo. We don't need authentication in this case and we don't need any any module for this demonstration.

A

Okay, so let's rebuild this.

A

And I will just create a simple domain object with one property and then we will go from there.

A

A

The main object, one.

A

And we just need one property to implement our property later, so the most simple one.

A

uh Name great, so, let's run into the list one time. So we have the database and you see how we how the proper editor looks like and then we will create a new one base. Again you need an html component.

A

Also, there are some more complex examples that I want to show, but I'm traveling at the moment I'm in el salvador escaping from russian winter, but once I'm back to rush, I have a lot of examples of interactions with blockchain, basically, a smart contract interaction.

A

That's we've been what we have been researching in the office lately, because most of the examples out there, uh like 99 of the examples, are react and whatever you can do with react, you can do with blazer. So we have almost all the implementations that they have in react for a smart contract. We have them in place for also so, if you're interested on education, virtual machines, smart contract integration and blockchain in general um just add the notifications in the youtube channel, and you will see when we post something about the blockchain.

A

Okay, we have our application, uh I'm just going to create an object. uh This is going to be date in this case. I use myself in the other in the other example, so I need a different name. Okay, so let's go to the documentation, and I will show you how I do it, because I've done this like so many times that when you start reading it takes a while.

A

So I will show you the trick: how to do it really fast, so you have to scroll down, and the first thing that you need to create in general is the render. So I will copy this code and I'll a component here.

A

And this will be, I will leave it like that.

A

And let's replace the code with the code that we have from developer express and let me check just the name that they use for the for the component. Input render the tracer so.

A

Right so right now we have the laser component and, as you can see, is everything inside of the components. The c sharp codes in the component and the html is the component. So there are several ways that you can use razor components. uh You can use these syntaxes that is special between html, uh which in general, like. I don't like that much because the intellisense doesn't work that well in here and also code. Cultural sometimes goes crazy figure out different name spaces, so something that needs to be improved.

A

I guess, uh but in general like what I like to do, you can use um inhibit from a special class or the easiest trick. Is you copy the name of the of these render files?

A

And then you are a new class. So let's select.

A

And name it the same as the render just add dot cs in the end.

A

So, as you see it's grouped in the same as the same file, basically- and here the trick is that this class- you should make it partial.

A

So one part is the phrasal component and another part is this class. So if you need to write like complex c sharp code, you better do it on this side, and it will be the same as if you write it in here, but the intellisense that will complete the code rush will just work. So that's one of the tricks that I use like all the time and so far so good.

A

Let's see uh we have uh two two files already so now, let's go and copy the adapter, so I will copy this code from here and the trick here, if you want to make this a template, is that you have to put them in the same file. That's why I created this extra file, so there's no official code that we want. I want to put there because the example is really simple, so I will just put this part here, so I didn't copy.

A

So, let's copy all of this.

A

Paste, let's move the namespaces to here, so they are here um some of these, and this is duplicated, so just remove it. Okay, so far so good we have in this class, we have already two classes, I mean in this class file. We have two classes, we have the input adapter and the render input vendor.

A

So we need to add basically two more classes also, so we will add the property editor and, let's copy all of these.

A

And let's paste this here: let's remove these and just move the name spaces up. We don't need the system. Namespace is already there. So let's delete that- and oh this also, this already exists so so far so good. Now we have three classes in the same file and we're missing just one. um Let's see, I will mute everyone.

A

Okay, so let's go back here: let's go up for the first one and let's copy this, this is basically uh the class that will go from the sub domain object um to the proper theater. That's the that is like what you will use as view model in summary in general.

A

So let's copy this and oh it didn't copy completely so copy this one scroll back here and system. We don't need. We already have let's put this here and delete this little bit of code and, as you can see, we have four classes in the same file so far so good.

A

A

When you see this in the solution explorer, you can see that if you expand this object, you will see that there are four classes here. So it's good because you can go and jump directly. So if you want the input after it will just put the character, so uh we have not finished. I will use this um property editor. So let's check the property editor code here.

A

So it's a really simple propagator is for the type string and then it's going to use the input adapter to pass the model, which is the class that holds the value and passes to the render, because if you see the render is the same as we did in the column render for the for the previous example, you have a static method where you return the instance of the control, and this has to be a static method. um There is no other way to do it.

A

So so you have to follow this pattern anyway, so so far so good. Let's, uh we know that this property editor, if we go here, uh is not the default properties or for the string class. So the propagator is is good and it's working, but it will no show anyway because we have not set it to to run so. For that. I took a note this morning because I always forget the syntax.

A

So let me copy this and just go to the domain object.

A

And let's put that here so this is more default to set the property in the model and then we need to pass the full name of the class like including the namespace. So let's go here and copy. So this is the namespace.

A

So, let's delete all of this.

A

And now let's get the name of the class which is custom propertiator.

A

Let's put it here so now: here's uh it will look like almost the same textbook, so you you will not notice the difference. So what I will do is just put uh something else here, so you notice that it's a different implementation than the default one. So, let's add basically at this.

A

Hello property editor and this one.

A

And again, if someone has any question, feel free to open the mic or send it in the chat.

A

So, let's click here and we will see our property so see. This is a different textbook. It's an html textbox and there is the div that I added uh below. So now we have our full property editor implemented. Now, let's make it a visual studio item template just like super easy. That's been changing like every time. Every version of visual studio there's a different way to do it also the menu where you do it. It changed.

A

So, let's go to project and let's see.

A

Hold on, let's, I think I need to highlight the component. I want.

A

And I think I can have- I can see them by making it from here. If not, let's go to the other menu. It's not there anymore, so project.

A

Export template there are some extensions that will add that to write to your right click menu. So in this case we don't want a project template. We want an item, template and the item. Template will come from this project.

A

So next, and now it's asking me which, which item I want from that solution- that's why I put all the files all the classes on the same file, because otherwise uh you cannot do a template with four classes. uh You need to do four templates. So that's why I did that, like put all the things in the same place, so we can use this trick so now. The only things I need to do is like input render select that because it shows us one item, even though there are four classes in there plus the render.

A

So which reference I would like to include in this case, I will not include any reference. I don't need to add any dll, but maybe my component, my component comes from a devexpress dll, but um this is basically, if you want to include something like with your template. For example, I don't know if you, if you remember like uh way like long time ago, when you added an xbo object, it added the reference to xpo. So that's the same trick.

A

If you wanted to reference, you can do it right now, but in this case all the references are already that's why they need to include any reference.

A

The name of the template, a template will be play so uh like that, because I have like so many uh templates already that I have done to test and everything so and I don't. I will upload an item right now and also not preview. uh This is the location where it's going to be. You can go and check. There is a folder that is the all the files needed for that, and then it will import automatically in visual studio in general.

A

uh The import sometimes doesn't happen. Let's close your finger and hope that it happens and uh if not, we need to close all the studios and just restart open a new instance. After all of them are closed and then it will show.

A

So, let's finish.

A

Okay, so here we have uh the template. If you want to disable that template, you can um just put it in this folder in someone else's computer and it will just work after they close the studio and they open it. Again.

A

We have a question uh from a friend of the channel and a friend of the meetups uh jp, so jp the component that you did that I show in html uh it will take the devexpress theme as long as you use the same css classes.

A

So for that, if you go and find an example from bootstrap, for example, they will stress use for css team, the bootstrap framework.

A

So if, in the bootstrap framework, the class that you use is alert or danger, or something like that or whatever name class that you use for the for the style, uh it will use the one that is currently set for the express. So if you have an orange theme, your component will look orange. If that's the class that you use and if you switch team, it will take that new theme that you switch to.

A

So, basically, that's how you do it and it's really nice, because otherwise you have to add more style, styling properties to your component, but it will catch the one that you use um from the current theme in the application. As long as you use the bootstrap classes that devexpress uses so well so far so good. I think I will need to close the studio to make this show. So let me close all the instances.

A

A

Okay, so let's see how the demo effect will affect me this in this time, or maybe will not- maybe I'm lucky so, okay. So now that we have basically export the code that we wanted. As a item template, um I should be able to delete this, and I guess I will not for the moment. I will just add another one and it will have the same name.

A

So that's something that there are some properties that you need to replace that there are in the in microsoft documentation. I will try to find the link in the meantime um to put it here, but let's add the first first, this idea component and I mean the properties and hope that this works so.

A

Everyone close your fingers.

A

I guess it will show because it's loading, the templates and it means that there is something new there. So yeah we have it here, so I will delete the other one now that I know that is there. So you see that how much time we save.

A

So now, every time that you want to create your own custom properties or instead of having to go check the documentation, paste all the files and rename it and put it in the same place, you can just do something like this.

A

A

And we have this phony name that I set for this. So let's run in something to something different.

A

And see we have all the code that we created before there are some ways that you can uh make that replacement to work in the code, because right now, for example, here is still called input render. So, if you add some, I think it's like dollar assigned to it. It will be replaced with the new name that you set in the when you add the the the new item. In this case, it's not being renamed. So I just need to rename this to my property editor.

A

And after that, everything is fine. If we check here, we have the like the same structure and it will compile and show the only thing that right now, what I need to do is basically.

A

Go to my domain object and change the name, because the the attitude that I said was using a different name.

A

So in here, instead of custom string properties is this one.

A

Just let me try to find the documentation for item templates, so you know what to replace so it. So you don't have that that you need to rename one part of the of the render.

B

A

While that is loading.

A

Let's see if I can find it before, the application will happen. uh Let's see, my prop uh is not being like that the render is named like that. The name is still the same, because uh now that I think about it, um if I go here, the name that I need to set is this one. So that stayed the same, so I replace it for nothing. We just need to run it again and, let's see maybe I can find the information before this starts again.

A

Okay, I found the link.

A

So c is working basically, the same component that I created before is showing so to complete this. uh Basically, you will need to add some tags to your code, but the tags will break your code in the end. So you need to make sure that your code is running uh submitted to the source controller like dual commit and then, for example, see this if you want to replace name spaces with the name of the current word that you are because in this case the namespaces, for example,.

A

Let's go to the property editor here is within uh this project name and then this namespace that can be replaced automatically for you with the namespace of your current solution at the moment or the opportunity at the moment. But for that you will need to add some placeholders. Basically, so let me show you the documentation.

A

This is from the official visual studio documentation.

A

So if you want to replace the namespace, for example, you just add these and you will use your current project namespace as the namespace of that file and the same for like file names class names, you can use the same three. There are placeholders for that, so you just pick the ones that you want and then all of that can be renamed automatically for you. For example, uh if you don't want to name it input model, but you just want the the the model suffix.

A

You will do something like this.

A

Let's see that's here so, instead of uh so, if you want this to take the name that you said when you add the item from the add new, uh add new item window, you will have to do something like this and this will be replaced uh for the file name. But when you do this, uh your code breaks, so you need to make sure it works. Then you replace with the placeholders and then you export.

A

So that's good to have this on the source controller, because you make sure that it's running and then you have to replace um for for these placeholders, and there is no other way to do that. So you will just have to suffer through it and that's it for this demo. So I will just put that information in the chat.

A

So everyone has it. So that's demo number two so so far, so good guys like it's been really nice, even though I'm doing all of this live and most of these things I know just because I do it every day, but you know how life coding is.

A

Sometimes it will just fail when you code in front of other people, so the demo that I'm going to do is a little bit more complex um when I was um starting to to like when I met javier a long time ago, the first time, uh the first or second time that we talked, uh we were discussing how to create reusable modules for stuff, and I asked developer express many times before, like when stuff was just starting, maybe the first year how you create the reusable modules as they do it.

A

They told me like, go and check the reports mode. That's the best implementation that we have. That shows how to do it and a few days ago I was doing the same, because there is the framework that I'm handling the ultra modules. We use it mostly internal and in personal projects, but I want to to take that to rotate that project again. So basically, I asked them okay, how do we how we should do, uh how we should make a reusable module for blazer, which is a different trick?

A

Actually so so far, you know that well, tough blazer applications are regular applications in general. So in any blazer application, if you want to use javascript in your component, for example, or use a special css styling, you just put them in the www folder.

A

Here you add a css file or javascript, for example, and then you will have to add as an html tag in in in your host file, and that's it I mean, then you can invoke it from javascript within your component using the javascript interrupt, but this is tricky because if you want to make a reusable sub blazer module, okay, you. If what will happen, if you put the css file here and the reusable module is actually here, it means that you will need to add documentation to tell it so.

A

Okay download this file, put it in ww folder, then add the reference to the to the in the hose file and that's a lot of work. I've been doing that for a while, but then I decided okay like they expressed. They don't do it like that they they use a different way so again like when you ask you get really amazing answers from them, so I asked them, and there is a ticket here.

A

This is for the this one and anatole was kind enough to just tell me, like okay go and check these modules. We do the three that you want to do there, and I think this is public. Yes, I think it is because I'm not signing in this browser, so anyone can see it. If you want to see it there, what we were talking about, that's the support ticket.

A

Let's do that example, so I don't want to create a new, a new solution for this, so I will reuse this one. Let's see, I think I have another one open here. Let me close this one.

A

And I will just add some javascript to it, so it will make sense, because the main problem is when you want to add some other files like javascript and css file and ship them, with your with your sas blazer module. So the trick here is uh the following: let's open, which one I was using this morning, maybe it's in the other studio yeah it's this one. I started to do like a drawing canvas and then the javascript start failing.

A

So I decided to do something more simple, so we would do something really simple in this case, but um that's the trick that I use to include the moon equator, that is the user from visual studio and make it a reusable module. For example, in the last stand up, I show um the form editor that we have the online form editor and the skip editor that we have also- and that is using monaco, and um I use it in like 10 different um personal applications.

A

I have that I made for my mom for my brother uh for friends, sometimes or experiments, and I was like tired of okay like every time. I need to make a new application uh to add the reference to the host file to copy the javascript, that I need the css file that I need. That's why I ask developer express how do I do? How do I make a reusable um soft blazer applications? So they showed me the trick and I will share it with you of course, so, okay, so we have here our.

A

Blazer module so the trick start by copying some files. So I need the ww folder and I will put this here.

A

Okay, so here I have the css and everything uh this I don't need. uh Of course you can use the same structure if you want, but I don't need this file, so I will just delete them to make the example more simple,.

A

And then I will basically add.

A

Let's see a new item, I will add a javascript.

A

And let's add javascript.

A

And this will be.

A

So so creative, the name like so in the javascript. You do something really really simple.

A

It's so simple that it's just this, we will just create a javascript that says hello, and this will say like hello from component and of course you can go really crazy there, especially if you're, integrating the extreme components. Maybe the scheduler, for example, as they've said, is not yet there.

A

uh But if you want to include javascript example, most of the javascript components they work in one way, you add an html tag and then you run a script and it's the uh sorry a javascript.

A

So you can initialize that component just have to do something to render something different, for example, a drawing canvas, a control. uh You know you name it uh that's how javascript components work in general, you set a tag with an id, and then you run a javascript over that tag and id. So in this case we're going to make something really simple, just say: hello, okay, so now I have my javascript, then I need to add a few. I need to add an extension and then I need to add some tag helpers.

A

A

I will go to my other solution and just get from here.

A

I will just copy all of this.

A

A

Let's add a new class.

A

And this replaces what I have so uh here. There are a few things that you need to notice. There are a lot of namespace missing.

A

First, I will just move this to another file, so we don't have this mess.

A

So I have one file that is called the tag helper. uh This is the most important one. Actually, basically, what you do with this type helper is something super useful is that you can add them a service and your startups and whatever you do whatever it is in here, it will modify the html of your host file. So basically, the idea here is that we will add this line instead of modifying or host file. Every time we will create an extension that modified it for us and then we will add it to the services.

A

So, let's import the namespaces. We don't have that reference, so we need to include this reference. A student called razor, so let's install the latest version.

A

And um let's import the namespaces.

A

Oh, we already have it there so and then we need to import another namespace here.

A

So this is basically somehow like middleware. This will execute before the page finish loading, and it will add these tags that we just created here. So in these tasks, usually you add reference to justified or css files, so you don't have to ask the person okay, go and paste this in your in your host file, so also the the trick here. There are a few tricks that we need to notice here when we use quotes instead of using simple calls, we have to use double quotes to escape it.

A

That's why you have double quotes here at the beginning and all calls here. In the end, uh the name of the file we get this name of the file from there.

A

And just put it here: okay, so usually when you modify your host file, if we go here and here.

A

Let's see, maybe I can find one see uh when is uh when the reference comes from a reference assembly, you use underscore content and then the namespace or the name of your assembly and then the name of the file in the opposite case. This is a reference to a physical file, so just telling this like it started in www roots and after that is the css folder and then type css. So that's actually here so how you set the route for embedded resources and for physical resources are a little bit different like and better resources.

A

You have to use underscore content at the beginning, sorry and embedded resources. You have to use the physical path in general, so let's go back to the stack helper. So let's get.

A

A

Assembly name.

A

So we go here and just replace this here.

A

So what this means is that this tag is going to be added to the header and the location will be the embed resource within this route and this route ends up in this www folder I mean uh content and the name of your assembly means that, where everything the root here will be used, so that's why we specify this name no folder, but if I want I can create a folder here.

A

I name it yes and put this here.

A

But here we have to add that to the path, so this would be yes, also, okay, so far so good. um This will include the javascript in general, so.

A

Then we need to go back and check the extension, so here I will rename the file.

A

And, as you can see, this uh is basically it's any. It's like doesn't have anything special. It's an extension class extension class is how you add methods to a compile classes directly already compiled. Basically, this has nothing to do with uh with saf or with blazer itself. It's something that came in csr3 with feature 3.5 with the inclusion of link, basically because we need to add more extensions to the enu metabolism, for example, add more methods.

A

So, basically the distinction is really simple. Is we add a method? Name? Add my blazer module. You can name it as you want, so I will name it differently in this case,.

A

And that will inject the service that we just created or the classes we just created.

A

A

And basically uh asp.net code is collecting all those stack helpers and just execute them before the applications run. So uh now that what we need to do is go to the startup class.

A

And here in the startup class, we need to add the execute that method. So I want you to notice something uh when you do a extension for the I service collection. Now you usually put it on this namespace, because this name namespace is always in the startup file. So you will have the extensions available.

A

If not, you will need to import the namespace of this class, so this method shows. So the common pattern is that you put it in a different instance. This is not the name space of my application. You put in a different one and what that is already there. So people don't have to figure it out that there is extension that they need to load and they need to add our name space in the top and let's go and execute this.

A

So we go, you can put it hidden at any level so just see, for example, they they have extensions like add self they. So that's how they add the resources and stuff like that that stuff uses- and so we will do the same here so services.

A

I have it here: a standard module, so, okay, we have included. We have modified the tag with the tag helper that include the javascript file that we just created, but we're not invoking that in any place. So let's get copied invocation and let's put it in the component.

A

A

I will do something like super simple, like pull it on the on initialize method, so I'll copy this code and let's go to store property editor.

A

A

uh Open this, so we know that in the end we have the the partial class that is part of the component, so there we can basically do an override of the uninitialized method, and um since I copied this code, this is not. uh The name of the function is not resize.

A

The name of the function is hello, chrome, components.

A

And there is one one one more thing that I need. Oh, this is wrong. uh I love that uh code rush. You have this feature like intelligence. I mean sorry spell checking so.

A

Let's rename this and hold on, I need to turn off that phone.

A

Sorry guys for that uh I was receiving a phone call and my phone was far away. So, okay, let's go back to this, so this is the function that we want to invoke and we're still missing some small stuff here. So let me close this and okay. So far, so good right, um let's go to the properties here, we're missing just one thing: we need the javascript interrupt. We need to inject the javascript interop, so we can call a javascript function from from our component.

A

So since I'm lazy, I'm going to go to the other solution- and this is how you inject the javascript instead of first, you need the namespace.

A

So, let's put that in the eraser part, okay, so far so good, and then we need a property with the inject attitude, I think or parameter inject.

A

So let's go here and let's put that also somewhere here.

A

And see that's what I don't like about the eraser components that the formatting is not totally right.

A

So sometimes you have to format by hand. Okay! So far, so good, let's see here, this should be okay, it's working, so we have the reference to the javascript interrupt. So basically, when this property renders the component, it will also call this javascript function that you can use. For example, that's how you use it in google maps or maps. They asked to add this to other tags with an id and then run a javascript that initialize the the rendering of the map.

A

So the same thing you use for for google maps and a lot of other javascript components in this case. We're not going to do anything difficult, we're just going to execute this function. That will show another that says hello world.

A

So if everything is correct, it means that when I open the detail view, it will render my property editor and the propagator will execute this javascript code. And the beauty of this is that in our application we don't have any. We didn't add any extra files and we didn't have to modify also the host page.

A

I hope so so, let's see.

A

A

Okay, so let's wait for this to load and maybe it will work the first time.

A

And in the meantime, let me find one last part that I want to show for reusable modules.

A

Okay, so let's give it a try to this and see is executing my javascript, so so far so good, um just let's change that a little bit. Let me get something from one of the repositories I'm working on at the moment.

A

uh Just give me one sec. This will make the example even more even nicer. I think so.

A

We need more useful, the other solution and.

A

Let's see it's not this one, what we're going to do is that we're going to add some node operators so.

A

We can include localized text inside of our components, so.

A

Let's see just let me find the updater class that I've been using.

A

So we don't have to start from scratch. In that sense,.

A

Okay, so by the miracle and copy copy and paste.

A

I will just come here depending where you want to add your localization. I mean these messages, you can do it in your agnostic model or in your blazer module, depending on the structure that you have right. So let me add one class.

A

And I will paste that here and okay, so.

A

Here in the link is the documentation that I use for that, so we will take a look a little bit later.

A

So, let's see what I'm missing here, I will copy the namespace from the example.

A

Okay, so um let me copy this.

A

Oh, no, that's not the documentation, so, okay, the idea of this um uh of this class is basically I want to inject uh some notes in the models. Sorry.

A

So when I localize my application and I create a different version of them model, for example, we usually write applications in english, even though they might be for a spanish-speaking customer, and then we localize the application completely.

A

So part of that is basically inject the those messages inside of the messages that you want to include, maybe in your property editor or in your custom components, uh you need to include them in the model, so they will be localized when you localize all the other parts of your application.

A

So, let's see this is the node that we're looking. So this will be called demo app standard.

A

Okay, uh that's that's. The name will be the name of the nose and then for this. These are some messages that I want to add to that node. So it should be hello from.

A

A

And we just want to add one: we don't need the other ones, but you can inject as many as you want. So let's delete this.

A

A

Demo, um where so, I need to modify here, I think uh that's it. Basically, um I just need to use that in the in the module, so I'm doing a lot of copy and paste today, let's see where do we add that.

A

Let's go to the module.

A

um Oh, I have this class, I want to just rename it. I hate to see those class one okay. uh So far, so good, let's go to the module class, and here we just need to add another override and we need to tell it. Okay, like include also this node generator updater.

A

So we will pass an instance and let's compile this.

A

A

Let me show that in the model.

A

So here in the localization node we'll have another nozi uh demo standard and the message that we have that we just create is there so this takes when you create a different version like in spanish, you will be able to localize those messages. So now the next thing that I need.

B

And he's back and muted, you're, muted, yeah.

A

Sorry for that guys, uh I'm saying thanks uh to cover me dave, so let me just uh share my skin again.

A

Because we're about to finish- and this is becoming really interesting- okay, so uh we have the message so we we are able to localize our message. If we achieve uh module in different uh languages now we just need to use that message somewhere. So it makes sense right.

A

So just give me one second and I'll find a place to put that.

A

Okay, so I will use it in my property editor in the one that we just created here.

A

So what I'm going to do? There is.

A

um The caption helper that you can use to get those messages is a static class, so.

A

I will put it here and I just need to add the sound sign at the beginning, and then this asks for a few things. It asks for the node that we want to read um then the name of the subnotes and the default text. So we will name this default text.

A

So if the, if self doesn't find this in the in the localization node, it will show this default text. Otherwise it will go and look for this node and this this subnode to get the text. So the nodes are demo standard.

A

And where is my.

A

A

And the soup node, where the message is is here so if I recall well, is the index not the name, so let's come here and paste this here, let's see if, when I inject that I will inject something different.

A

So let's go here, and this will be hello from component uh from the um modern node generator updater. This is also really explicit class. So I guess someone like me using thai of developers.

A

Okay, uh so far so good. um I was seeing like an exception here. Sometimes you see this, but um we just need to compile it. I guess before we run it and that's not an error actually or should not be an error.

A

But it is, let's see uh we need to import a namespace. I guess yes, so let's go for fingers! Everyone, please close the your fingers. uh I want this to to work the first time and again I never felt. Let's see what's happening, I think if you import the namespace in the end, uh no, it didn't. So that's what I don't like about razer components. Sometimes this stuff- they just don't happen at all see.

A

So I would like to use the full and now it should work.

A

Yeah it's working so, let's see.

A

And the front- and so instead of this hello, this is the name of the node hello from component. So this is not what is going to be shown. What is going to be shown is um the new text that I just added, because I just modify it here, so even what we're seeing in the model is a little bit behind uh the text that we show is this, so, let's just in case uh update model in all projects.

A

A

And then we're just missing like one step that takes like one minute and we have a full reusable soft blazer module.

A

A

So let's go here, it will tear the javascript and it didn't find it found the full text. So uh let's double check this. um So let's see here what are oh, yes, see. The name of I change the name of the node, not the text of the node. So.

A

Here we are adding like extreme value, so this.

A

A

This and the id continue being this just let me double check that in the component.

A

Yeah see that so I will just update this one more time just in case, but basically when you execute that what's happening is that it will go through the modules and cascade down the uh the changes. So just let's close all of this- and I will just double check the the model before we start again so.

A

Oh wrong wrong. One.

A

Demo and hello from component and yes, we have a longer text, the one that I just added. So let's continue and if in this case it's correct, we will see the message that we just injected.

A

Here we have our javascript method and the text that we just inject in the in the model, so uh basically that those are all the steps that you need to do to create a reusable module in general and the last one this one. uh Basically, you just need to pack it up a nougat package if you want- and you can just use that nugget package everywhere or anywhere- and basically you just do this and let's see when you execute the net publish, you will create a nuget package and these options are a little bit different.

A

If you're using visual studio 2019, they are a little bit more simple and visual studio 2022. They put all the possible options in the options of the project, so it looks more overwhelming. uh But beside that, oh, this is not the right one. It's this one! Actually!

A

um So when you build on on release, let's do that.

A

You will create a nougat package. Usually I never use the the the options screen from the studio. Just add those options to the cs, throat file so, but I want to show you that the nugget package should be here.

A

So if you go to bin release, see the package is there and if we open that it will show that the dll is there and all the possible requirements and so on and so forth.

A

So you can you're ready to distribute this package to uh to someone else or put it in uh know it dot already so see those are all the requirements and inside.

A

Is the the compile dll and the resources, the javascript that we just added?

A

So when you use this in a different application like in in a new application, for example, you will have your property of the javascript that your property editor uses and the only thing that you will need to do. It will become just one line to go to the startup of that new application and invoke the extension that we create to add the tags to the host page.

A

So that's basically it. um I think that they make a great job with the tag helpers, because you can pack everything in just one assembly and redistribute it everywhere. We do that really often in here in the office and if there is any questions, you're free to open your mic uh or send it in the chat.

A

So I'm not seeing the chat uh right now, but let's see.

A

um Well, like it looks like it was clear, or maybe I'm just not waiting enough anyway, this standup will be in due to us all the other stand-ups, and if you need help with reusable updates or modules, you can send me an email or send an email to javier or today, and any of us can give you a hand with that, and I will upload this to github and put it in the facebook group. So anyone can see the code that I created today is the live code.

A

Maybe the namings are not right or misspelled or something, but I think it's really useful in the end, and these are all the tricks that I use personally to save time in in soft place of development, especially regarding the property, editors and reusable modules. I've been moving all the ultra modules to be laser only or agnostic.

A

So maybe, when I'm back to russia like in two months, I will have the time to to create that repo and upload the new structure. But in the meantime this is what I'm doing to create all those uh reusable modules, and I guess that that's it. For this time, uh thank you guys all for coming. Thanks, uh dave jp, uh you always have great um questions and thanks everyone for taking the time during your busy thursday, actually uh to join the community, stand up and that's it and see you all guys in next time.

A

Bye bye, take care.

B

Thank you. Take care.