XAF XAF Blazor, 3 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: XAF Blazor Custom Control

Description

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

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

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

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

A

Okay, guys just a quick video before we call we call it the day we were just reading the support tickets as always, and we came across this ticket and we couldn't eh, go to sleep without actually checking it out and testing. So we don't load the the zip file and run it and it's a beauty. So, let's review quickly what we have here to see why we didn't go to sleep and with this ahead of so this is a little further.

A

So pretty much the right here, we're integrating a custom control in sas laser, and if you see here the software who actually is trying to integrate that custom control, he wants to integrate.

B

um First question: is he trying to integrate what type of control it's like a blazer controller.

A

No, it's a dead extreme controller that they have extreme gantt and we actually, we can actually go very quickly, but that's not the one that we are going to show. But I think that is the same concept, and I think that is really neat. So this one it should be.

A

Let's see that one, it doesn't show completely, but it's pretty much a gantt implementation. So if we, the main point of the of the video, is she see how we can integrate this type of control? So the great thing about blazer is that you imagine you can integrate it, just any html javascript, any laser controls. You can actually use it in your soft laser app. So, okay, let's go directly to the code and see it first in action, and then we go through the implementation.

A

So let's run it what they actually implemented here is not the gun control, it's just a devastating grid. So if you see when the application loads, we won't have the the normal grid that we have in staff. We will, we will have the dev stream grid and that one is communicating by javascript all the time and the beauty of blazer is that we can call javascript method from a.net and we can call it done method from javascript, okay, so.

B

uh One question javier: so this means that with this approach, basically we can use any dev extreme control on stuff I mean it would be like the same idea right.

A

Absolutely absolutely- and we are talking about devextreme, because we are devexpress fans by any javascript controls that you have. It doesn't have to be devastating. It can be any open source library any grid, any kanban board anything that you see over there. That is an implementation through javascript and html. You can put it here well,.

B

The good thing is that it's going to be like at least the same idea, because they are the same company so just different platform, but at least you will have like the same support, yeah and, and everything like that, so it's better to just if you don't find anything on blazer at the moment. So I think it's a good idea to just go and check the extreme because they might have it because the extreme is older. I think that I used the extreme like eight years ago for the first time long time ago, either.

A

Way uh I just say that is not only limited to their stream. Is you can use any javascript control but definitely get dev stream has some really great controls on definitely check out, and one thing that I definitely am with you? There is that you will have the accessible, and that definitely is my go-to. If I have to choose between two controls- and I can't have the express support- I will go from that one.

A

So if you see we don't have the the the normal dev express grid and we have a the dev extreme one with different implementation with pagination and so on so on. So let's take a look quickly at the implementation, and this is the first thing that called me at my attention.

A

If you see they are injecting here, a new service called analysis new for me, application provider, and the great thing about that is that we can have our application provider called the gate, application method, and we will have our application here, where we can create a space and do everything we need before that we used to do value manager to have the application.

A

Every part of our application- I have to say it again, but this is a great way to actually, and one thing that we do have to mention is that they actually saying in the end that this one is not a public and might change in the future. But, as we are seeing right now is a great way to actually have your uh to be able to create your luxury space, to be able to bring your objects and so on.

A

Okay, and now, let's review everything quickly, if you see here, we are creating and we're creating or we get our application. We create a larger space, we get the obvious domain one and we call the javascript function, indeed, the strength directory, and if we go to the index. Yes, you have that you need the strength that agrees when we are passing that data source. That is the source that we are sending here.

A

If you say we are passing.

B

Okay, javier, I have a question. I think that you're more like into this, like example than me- I mean you know it from before somehow so the main question is: what are you showing me? It's a control or it's an editor, so right.

A

Here: okay, let's go back; let's go back, let's go back! I think that we have to show okay. We are in this page folder and we have a component dashboard razer, but that should be called grid tracer or anything, and if we open.

B

It okay, so so far we only have a component. Basically that is hosting whatever control you want. It doesn't matter which controller, but you have a component.

A

Component right hosting something exactly okay, we are referring to it through this, a add page attribute. So this is slash dashboard! That's where and let me show the new item- that's why we're passing here. So if you see we're passing that url and actually, let's do an improvement here that I didn't- I actually didn't show this in my last video about dashboards control interface.

A

We do this and it's better because this way it doesn't matter what url you have you deployed to different domains exactly so, let's just leave it like that and come back to the component. So right here, if you see we are invoking a javascript function from a or net.net code right, uh using the gs runtime. But if we go a little down, we have this update record color that is importable so from javascript. We're gonna call this method to to update the data. So it's a really great.

A

I I really like this implementation because again, if you think about this for a second, you will have your a javascript component. That is your grid. In this case, you will be able to code to call the, for example, the javascript function to send the data, so the the grid know where to get the data, how to interact, and then from there you can come back and call your dotnet code and update your record and change. Things is so.

B

Basically, this will save you all the time that you will spend doing a web api, because usually the idea with the extreme is like you create a web service that it only provides a service like json, for example, and some authentication, like all that I did before well, remember we used that a lot with you, so I guess the idea with this is like well, I don't have to do all the boilerplate code to host a service to expose something. You already have the object space there.

B

So you just put the control and it will work just like that. I mean the great thing about blazer.

A

Server is that we have client and server on the same play, so we just need to know what part of our code is going to be executed on the client and one part is going to basically run on the server, but in this case I I'm really enjoying the capabilities that we we can achieve. That's why we did.

A

I I couldn't go to sleep without at least reviewing this with you, because it's a great thing, if you see we have this div, that will be our controller and with a grid id we are initiating the grid here, then we have an action. That is this update record action that we are uh invoking it later through this json bugaboo that is being called from javascript, and invoking that action to update that record. So.

B

We have everything we need here and actually the implementation is really neat because, depending on how you think- and this can mean more like difficult to see- and there you have everything- just one component hook up everything that you want anything it's the same idea. Basically, so you can get this and then you can put, I don't know anything from the extreme or whatever else, javascript control that you want in general and because here you you can create objects, you have the object space, you have the application.

B

So basically you have access to everything, so you will have access from to everything, basically from javascript. If you see it like that, because you can do it from the component, so.

A

Yeah huge possibilities- if you think about this now any control that we have in the stream that gun control and we can even do a quick sales here- the extreme controls, let's see what we have.

A

Look anything we have here: we can integrate it, it's just a matter to know how to send data and get data. That's it call. Javascript and javascript called donate and update everything. So.

B

How many controls do they have.

A

Well, they have a lot. I don't know how many but yeah nobody knew what they said.

B

Yeah and and all of them are really mature actually, so they are like not new, not as new as blazer, at least so, whatever you want for the ui, you have it. There.

A

Okay and again, and not the.

A

I would say the more javascript oriented guy, but I think that that interaction opened the world for a lot of possibilities. So definitely, of course we don't have the need for the in a project right now, but if you have something you don't have to wait for the official release of the scheduler of the dashboard of the chart, you can definitely right now go and integrate.

B

You don't need as much uh javascript actually, because I I see the snippets and they're really small. So it's not that you're going to have to write everything on javascript, basically so easily.

A

So, let's before we finish the video- let's just summarize, if you want to a integrated control, you create your component, and this is again. This is awesome. You will have your application here, you will have. You can create your space, you can do anything without your space, bring data from the database create new, and so on so on you can call your javascript, so you will have to create a javascript file.

A

Then you go and refer and link it on the right here on the host and one important part that we are missing here is in the and appraiser. You need to also add additional assembly. So it knows where to find that component, but with that one and the component view item, so we can pass that new component you're good to go, find it find a component put it. There find a component put it there.

B

A

B

I have a request for the next video which one uh we need to take this example and change the control for something else.

A

And now, actually, that guy, that gun control that and I will give kudos- and I always like to say to what is his name bunty for the a sampler he's putting together it.

A

I definitely like that that gun control integration that sounds really really really cool, and not only that I would like to integrate the scheduler. I also have that you know.

B

One question there is no gun for for web at the moment right for software if there is no gun in general.

A

I I'm not sure I don't think so. I think that again we can always integrate as integrated custom control, but no no.

B

I mean by default, but in in this case you have, I mean this is something really new: it's not like a normal grid, it's a gun grid. So it's something different and if, if there is no other choices like somewhere, then you have this. What else can you want.

A

I just think that we have done a lot of treats a lot of black magic to get the application everywhere we need, and now we can, we can only say application provider get application boom done so, okay, guys just a quick video with I. I couldn't go to sleep without reviewing this and I'm really excited so yeah bye.