XAF XAF Blazor, 2 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: XAF Blazor How to create a Property Editor

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

uh Lately thing most of our development is done in blazer um 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 heater and I'm going to show that soon, there are like a few steps and it cannot take time to to do that in general. So, let's create a new project here.

A

And in the meantime, I'm going to show you guys the information for the property editor. So just let me move the zumba 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 submarine before it's something like what you will use as new models in general, then you have the render, and then you have the adapter, which is like the intermediate park 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. 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 beam folder close.

A

The studio and open it again or reveal a few times and we 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. So, oh, let's see someone is drawing in my screen.

A

uh Okay, so this uh 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 uh let's create um this proprietary. So it's not about these.

A

uh This next example is not about the property editor itself. It's 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 may include this template in in the visual studio templates because it will be easier to just do rightly create properties or with all the classes 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

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

Domain object, one.

A

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

A

Name great, so let's run the list one time. So we have the database and you see how how the proper editor looks like and then we will create a new one based again on 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, 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 a dedicated virtual machine, smart contract integration and blockchain in general 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, I'm just going to create an object. This is going to be dave 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 have 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 blazer 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 razer components. uh You can use these syntaxes that is chart between html, which in general, like. I don't like that much because the intelligence test work that well in here and also culture, 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 the render file?

A

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

A

And name it the same as a 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 intelligences that are complete and cut rush will just work. So that's one of the teachers I use like all the time and so far so good.

A

Let's see we have 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. I didn't copy.

A

So, let's copy all of this.

A

Paste, um 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 uh to add basically two more classes also, so we will add the property editor and just copy all of this.

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 now 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: uh let's go up for the first one and let's copy this, this is basically uh the class that will go from the subdomain object to the property. Editor, that's the that is like what you will use as view model in summary in general.

A

So let's copy this and it didn't copy completely so copy this one. Let's go back here and system. We don't need. We already have this port is 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. So.

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 card there, so we have not finished. I will use this um property later. So, let's check the property editor code here.

A

So it's a really simple property. Editor 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 uh 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, we know that this property editor, if we go here, is not the default properties or for the string class. So the propagator is is good and it's working, but it will not 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 uh 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

Now, let's get the name of the class which is custom proprietator.

A

uh Let's put it here so now here uh it will look like almost the same pixel, 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 uh implementation than the default ones. So, let's add basically this.

A

um Hello property editor and let's run it.

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 or property so see. This is a different textbox. It's an html textbox and there is the div that I added below. So now we have our full property or 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 that I can have- I can see them 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 product 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, um which uh item I want from that solution- that's why I put all the files all the classes on the same file, because otherwise 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 uh use this trick so now.

A

The only thing that I need to do is like input, render uh 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 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 want include a reference, you can do it right now, but in this case all the references are already there. So I don't need to include any reference.

A

The name of the template item page will be place or 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 not set 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's it will import automatically in this solid studio in general.

A

uh The import sometimes doesn't happen, the closer finger and hope that this 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. So, let's finish.

A

Okay, so here we have the template. If you want to distribute that template, you can 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 um the component that you that I show in html.

A

It will take the devexpress theme as long as you use the same css classes. 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 too.

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 it 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 uh and it will have the same name. uh So that's something that there are some properties that you need to replace that there are in the um in microsoft documentation.

A

I will try to find the link in the meantime to put it here, but let's add the first first, the component and I mean the proper theater and hope that this works so.

A

Everyone close your fingers.

A

I guess it will show because it's loading, the templates and uh 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 it's 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 funny name that I set for this. So let's run 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.

A

So if you add some, I think it's like dollar sign, so 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. uh If we check here, we have the like the same structure and it will compile and show uh the only thing that right now, um what I need to do is basically.

A

Go to my domain object and change the name, because the the attitude that I set 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.

A

See, while that is loading.

A

Let's see if I can find it before the application will happen. uh Let's see my prop, ah it's 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 this project name and then this namespace that can be replaced automatically for you with the namespace of your current solution at the moment um or you pour it 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 this and you will use your current project namespace as the namespace of that file and the same for like uh file names um last 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 the name 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, 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.