XAF XAF Blazor, 2 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: XAF Blazor Reusable Modules

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

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 a usable module for stuff, and I asked developer express many times before, like when stuff was just starting, maybe the first year how you create a reusable modules as they do it. They told me like, go and check the reports mode. That's the best implementation that we have.

A

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 international 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? Actually so so far, you know that well, top laser applications are regular applications in general, so in any blazer application.

A

If you want to use javascript in your component, for example, or use special css styling, you just put them in the www folder.

A

uh Here you add a css file or javascript, for example, and then, basically, 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.

A

But this is tricky because um 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 the commentations to tell it so. Okay download this file, put it on www folder, then add the reference to the to the in the host file and that's a lot of work.

A

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

uh This is for the this one and anatol was uh kind enough to just tell me, like okay go and check these modules. We do the things 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 the 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 uh 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 place or 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.

A

I started to do like a drawing canvas and then the javascript start failing. So I decided to do something more simple, so we will do something really simple in this case, but 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.

A

For example, in the last stand up, I show 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. 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 a reference to the host file to copy the galaxy that I need the css file that I need.

A

That's why I ask developer express how do I do? How do I make a reusable um soft place or application, so they show me the trick.

A

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 this I don't need. 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.

A

So in the javascript you do something really really simple.

A

It's so simple: that is 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 their extreme components. Maybe the scheduler, for example, as they've said, is not yet there.

A

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. uh So you can initialize that component and they also 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 type, an id.

A

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. So for that.

A

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

A

I will just copy all of this.

A

A

This other new class.

A

And this replaces what I have so uh here. uh There are a few things that you need to notice. uh 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. 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 as service and your startup 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 spin, it called razor. So let's install the latest version.

A

And 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 um 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 javascript files 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. uh There are a few things that you need to notice here when we use quotes instead of using simple quotes, 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 need to 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 um let's see- maybe I can find one see uh when isa 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.

A

So that's actually here so how you set the route or embedded resources and for physical resources are a little bit different like and better resources. You have to use underscore content at the beginning, sorry, and in better resources you have to use uh 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 whatever is in the root here um will be used. So that's why we specify this name no folder, uh 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 um 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 is any it's like doesn't have anything special. It's an extension class extension class is how you add methods to a compile like classes that can already compile. Basically, this has nothing to do with um with south or with blazer itself. It's something that came in csr3 with official 3.5 with the inclusion of link, basically because we need to add more extensions to the enumerable, for example, add more methods.

A

So um basically, this tension is really simple. Is we add a method? uh 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 class that we just created.

A

A

And basically asp.net code is collecting all those stack helpers and just execute them before the applications run. So 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 it 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 a name space in the top and let's go and execute this, so I will go.

A

You can put it hidden at any level so just see, for example, they they have extensions like add stuff 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: uh 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

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 methods, and since I copied this code, this is not the name of the function is not resize. The name of the function is hello from 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 um intelligence, I mean sorry, um it's still checking so.

A

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

A

Sorry guys for that 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 um okay. So far, so good right, um uh 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, this is how you inject the javascript internal. First, you need the namespace.

A

So let's put that in the eraser, but 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, um let's see here, this should be okay, it's working, so we have the reference to the javascript interrupt. So basically, when this propertyator 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 will map the ask to add this to other tasks 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 these javascript codes. 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

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 a try to this and c is executing my javascript, so so far so good, 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

Just give me one sec, and this will make the example even more even nicer. I think so.

A

A module for your 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

Hitting the link is the documentation that I used 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 let me copy this.

A

Oh, no, that is not the documentation. So, okay, the idea of this.

A

Of this class is basically, I want to inject some nodes in the model.

A

Sorry, so when I localize my application and I create a different version of them all, for example, you 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 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 and you look like 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 stand up.

A

Okay, that doesn't 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 this will 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

um This will be.

A

Demo, um what is so I need to modify here. I think 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 overwrite, 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 nazi uh demo standard and the message that we have that we just create is there so this checks? When you create a different version like in the spanish, you will be able to localize those messages.

A

So now the next thing that I need: andy's back and muted you're, muted yeah. 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

The caption helper that you can use to get those messages, it's a static class, so.

A

I will put it here and I just need to add the pound sign at the beginning, and then this asks for a few things. It asks for the node that we want to read.

A

Then the name of the subnode and the default text, so we will name this default text. So if the if sub, 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 what is my.

A

Here and the subnode, where the message is is here so if I record well, is the index not the name?

A

So let's come here and paste this here and let's see when I inject that I will inject something different.

A

So let's go here and this will be hello from component.

A

A

Model node generator updated. This is also really explicit class. So I guess I someone like me using developer, express um 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

What it is, uh 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 so we try to use the full and now it should work.

A

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

A

And there's running so instead of this hello, this is the name of the node hello from component, so this node was going to be shown. What is going to be shown is.

A

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 the text that we show is this.

A

So, let's just in case uh update model in all projects.

A

And let's run it.

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 clear the javascript and it didn't find it found the full text. So let's double check this. um So let's see here what are we? 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, yes, that so I will just update this one more time just in case, but basically when you execute that what's happening is that um 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

um Wrong wrong: one.

A

Stand up 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 there.

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 package 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 nougat 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 um the options screen from the studio. Just add those options to the cs, throat file so, but I want to show you that the nokia 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 uh 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 uh in a new application, for example, you will have your property of the the javascript that your property ether 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 or send it in the chat.