XAF XAF Blazor, 6 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: XAF Blazor - Forms Generator

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

Manuel, if you want, while you figure it out, I can show some. I have like two small demos for blazer and sure and then we'll come back to you, so mine's really really small. It's like just uh like you know like a snake revealed of of what we're doing in the office. So I will take over from here and just let me know when you are ready to continue.

A

um It will take like five to ten minutes, so it's going to be kind of really really fast.

B

Yeah then, let's do my uh stop my yeah.

A

I was associating my screen, so let me tell me if you're seeing the studio, yeah, absolutely okay, um well guys. So basically, it's like we're working a lot in laser. As you all know, um we believe is the future actually and we're aiming um to basically uh focus all our efforts in blazer, because you know like with electron, you can run blazer as a desktop version.

A

uh Basically so uh at least all my personal development, the one that I do that is open source, uh is basically totally black, so I'm not doing anything on windows forms or web phones at the moment. So here I have like two small demos that I want to show you.

A

Some of them will be part of ultra, which is the the open source framework that I have for for sas, and actually we we will do a cleanup and a freewrite of ultra, basically because we want everything to match with the new um project uh structure, like you know, like we come from from the net framework, which was bigger, so we're moving to the sdk type of project. So let me close this. This basically is a um it's an application that I'm working for. My family for my brother, he owns a business.

A

He owns a marketing agency, so it will be used to automate campaigns for marketing. So let's run this for a second and you know, democrats, I I I was using this like two weeks ago, uh working with my brother and then I opened this this morning and some stuff just crash in front of me. So you know how it is right. So, let's start.

A

And I was asking manuel if his computer was like a virtual machine and actually I'm running a digital machine. So that's why it's a little bit slower, but I hope, like it's like fast enough.

A

Okay, so here you will see basically a mess on the navigation item, as you can see, I'm using a different template. This is not the normal one. The navigation is not on the left. It's actually in this menu here. So the first one that I want to show is.

A

We have a web forums builder, so let me show you first, the one that I already have built and then we will build one from scratch. Basically, so this is like a simple contact form with email and name. So, let's open the other one.

A

So let's go to forms um contact form two. This is a little uh different. As you can see, you have here the um like a header, a grouping and then you have the mobile phone. So let's start one from the sketch like a new one.

A

So let's close all of this.

A

Close and close and let's create a new record.

A

Okay, so, as you can see here is like this is what we have from starting like from zero. So um basically you have done a small customization here like to this will be like the toolbox on visual studio that you can pick which controls you want. um We just create some basic controls at the moment, but you can actually create uh any type of customized basement control. So, let's start with a layout small layout. So let's, uh um let's add some tabs, so listen I don't know. What's up, it will be my main info.

A

uh This will be. The second tab will be uh details. I mean I'm making up this at the moment. So this is how it's going to look like. So, let's save it, and now we have two tabs here and, as you can see below, you can see the code that is being generated by the component by this component. So this, basically the information we saved like in a json file. Somehow so you can edit visually or you can edit actually the json file.

A

At this moment we are using a simple text box editor for this case, but we, I will show that later, that we have uh monaco built in also monaco is the code editor that is used by this solid studio code. So at this moment, just it's a formatted json, but it can.

A

It can be changed to to have a full fresh editor here. So let's drag some some components right so um at excel, and I want this section to be named. uh The label position will be on top see. Here is the preview that we have and basically that's anything that I want. uh You can change the input marks, prefix, suffix label and even into- and you can also add, like uh a different css class.

A

If you want, but at the moment I will leave it as it is, and then you have some other properties where you can set how you will send the data to to whatever is going to be processing the forms, uh validations and some other logic like this. This is like really feature reach control, so I'm just going to display the basic example.

A

So let's say this so see the this code is growing. So as a more controller, I add, you will see more, the json is getting bigger. So then there's uh maybe a phone number and I will leave it as release, but what I'm going to do and what I kind of really like about this- is that whatever control we're showing in here, uh even though they are not their express components, they are picking up on the on the theme.

A

So, for example, if I save this and if I select a different theme, everything will match exactly with the express components, even though I repeat this is not. uh This is not their express component at all, but since we're sharing the bootstrap classes for this, uh when we change the the team, it will change, basically your form, so actually most of the time. I use this one that I kind of really like. I don't know why, uh because I guess I I used to use these um this tool to make a wireframe.

A

um I don't remember the name. It's an italian framework.

B

What it's basamic.

A

uh Well, I don't recall at all the name of that yeah.

B

A

Look I kind of love. This look um well like you can make as bigger form as you want and you have tabs and all type of stuff for the layout. You can even have uh stuff for, like uh captures and stuff like that, uh for example like a file upload.

A

So as you can see, it can get as complex as you want, and here you have like some tools like if you want to move this on the layout. If you want to go and check the settings or reset it or if you want just to copy the control, you can do this and then you paste it or remove it of course, and then you have a detail here. You can add some other stuff. Let us I don't know what else to add.

A

So I will add an email here and the other thing that I wanted to show you is that there is a good communication between the visual designer and the source that is being generated because, for example, see you have like here may, if one detail so here you have that code right, so here's main info and then you have the details.

A

uh So it is nested right, so what I'm going to do is a small demo like a really simple demo, so this will be called um personal information and, let's hope the demo gods are with me in this case. So you.

B

Missed you missed, you missed a quote at the beginning.

A

uh Thanks man, so let's try to say this see and now it's refreshing so you're using the json file and you're getting that output exactly on on on the ui so so far. This is what I want to show for the builder, but we have a small functionality that is like the preview form.

A

So here is this is render, as it should look like on the for the end user, and this is, I thought I just fixed this, but I didn't uh uh this is supposed to be hidden in some cases and this text will supposed to not show in here but anyway. uh What I wanted to show is that these forms, when you submit them, they generate a json for you and send that json somewhere.

A

So if you have a wave api, you can catch that json and just process it as you want it, or in this case I mean we are mixing this with the gene virtual machine that we have created. uh I have showed the gin machine several times in the in the mirror. So because I kind of love um you know scripting.

A

So, in this case, for example, let's say that we're seeing the preview- this is what the end user will see and they what will they will feel of course right. So, for name jose man, you know spanish name. This is my real name. It's not ho chi. So.

A

And believe it or not, my parents both have three names and three last names. So this is the short version of my name and then let's see phone number, let's get anyone I mean. I don't have the number anymore like since, like six years ago, or something like that, so let's just delete those invalid numbers there and, as you can see here, the the validation is kicking in so let's hold on. Let's, I cannot demo effect.

A

So um I cannot clear this or my keyboard is not working at the moment but anyway, so I will cancel this and I will show the preview again.

A

So, let's just say the name, oh is my keyboard. That was not working. Yes, yes, now it's working so name.

A

A

Okay and phone number, so I will feel it completely see if the evaluation was spinning, but the beauty about it is that when you submit will see the json that was produced by the form so in here it will give you all the information about the form plus the values of the phone. So you can go and grab that json somewhere else and process it as you one. You decide what to do with it. So I think it's kind of a neat uh functionality, if you want to add custom forms.

B

May I ask a question so basically, this is like you're creating a form of on the fly or in the database, and then you you've got this uh json information, json block and then it's like it is a little bit decoupled from from xs.

A

From the model it's like, you don't have to have a business, something that represents this custom form, so they will produce.

B

But you can send this to an arbitrary uh controller, for example in asp.net.

A

There are a few ways that uh we are one we will um basically add functionality to this. The first way is uh sending this to the same soft api because, as you know, guys have released that a new api that, basically all your business model, is exposed as a open api. I think- and so you have like all the methods.

B

A

And so on and so forth, so uh we have not explored that way, even though we know it's possible because the first version send this to an api.

A

uh I remember that I show I show like a middleware api like in the first version of laser, so it is not the same one uh developer express is providing at the moment, so we want to add compatibility for that, but that is not done yet on their side, so we're waiting for it, because we don't want to put a lot of effort in that and then just try to you know to the archive of forgotten code, so yeah sure.

A

So this is one of the different functionalities, but the one that I really like in the end is again. This is like everyone knows. The fixation that I have with with the scripting right. So the main idea here will be something: let's see. If we have here, then the component so we'll have a form component in general, which is a mix of here's. The code of that generates the form right, but in here you can associate this.

B

A

With uh basically with uh one of the scripts that we have created, these are the names of the speech so for.

B

A

So that would receive the json as an input parameter and then in this field you do whatever you want and, as I show before, you can use the object space. You can create objects, you can do whatever you want. So it's a really big mix because it can provide you with uh basically runtime applications. You drag and drop some stuff. You match it to the right. um It's like.

B

It's like a dynamic.

A

B

It's like the world creator, but a little bit of steroids, but a little.

A

Without having asteroids inside, because we have not modified that much the circle of stuff or none at all, they're.

B

A

Not invasive, and actually in the system, you can spin up a new data layer, update the and then just create a database for this form. So you can go crazy deep when I start making this design it's like. Yes, yes, yes, I don't have to write anything on design time anymore. I can do like ninety percent of runtime. If I want, of course, that's not the purpose, and but it's really interesting to know how deep or how far you can go with a tool like this.

B

We should we should we should pair up on this, because I found that.

A

Yeah, no, and also what I wanted to show that is like the other part of this is, and this it was inspired actually by manuel here.

A

um Let's see, where is the object so ultra function, so this is paired with the ultra function, so I showed the gene property eight or before, and so that's called now ultra functions. So, for example, um we include uh monaco editor.

A

So basically uh we can include everything that is included on the mona collector from vs code. It works online. uh I have some just kind of philly stuff to show here, like uh changing the the contrast changing the you know, the team, and this also match with the team from from the south application so see like the photos, are changing and everything. I don't know why the call is not being highlighted at the moment.

A

I guess because I I changed the the team so many times, but anyway, it's like here, you write your functions that will receive the json file and you can do as many crazy stuff as you want. um So, let's I will stop at this for a second, because I want to show the highlighting and everything, because I try to do that with we. They build in rich, texas and stuff, like that, it was possible to do it in windows forms but not in place or an or web form.

A

You can just apply the the the coloring stuff at one moment, so that was not what I wanted. So in the end I decided to go with monaco. uh The only thing that this is pure blazer, so there is no.

A

uh There are no versions for this module for windows form just later, because uh of course this is an open source project and we're always running out of time. I mean there is no programmer who have like a bunch of time to do nothing. So I'm trying to put as much time as I can from my personal time in this case to have the full implementation, the the form builder, will not be open source, but the code editor will be open, so it will be part of ultra in general.

A

So when we finish the cleanup, the cleanup in ultra and we have the new layout of the pro x and the solution, how we want it, uh we will release this on open source and don't ask me when it's going to be updated because as any open source stuff, you need more hands right.

A

So uh just let me show you the the the highlighting of in the code, and then we can move back to manual demonstration, I'm just making some time so here, for example, this one and see now we have the highlighting and everything that works in monaco is working here. I have not implemented all the functions, but, for example, you can see uh okay, um for example. This is a function that we're just calling.

A

We are just calling this function that is defining here and you can do stuff like in the studio like, for example, go to definition, and you go up and highlight that I didn't create a code. That's part of monaco again and that's nice.

B

That's really nice.

A

Yeah, uh you can show the command palette and you can, uh for example, the command palette will be something like podrose for me in this case, but we cannot have contours because it can create a little piece of snippets that we have already created. uh I have not included any any sleep at the moment. I was working on that like uh two weeks ago, but then we had a lot of other things to do so.

A

The combination of the ultra function and the form editor, if you put them together, it gives you a really really powerful tool to do a lot of stuff in runtime, and this came as a requirement from my brother, because uh when you work for marketing- and I don't know if any one of you have done- a pray for advertising or marketing- they give you the requirements at midnight and it needs to be published in the morning so and you need to change it in hot. Basically, so there is no time to recompile redeploy.

A

You need to be able to do this all of this stuff in the application running. So uh my brother used to tell me like, let's make a system for this. Let me get before that and as soon as I did the first version, it was not like that anymore. So I got like super tired of working with him, because the requirement always changed like every two minutes and that's every customer in general. It's not like just my brother, but so I came up with this kind of clever solution to okay.

A

I will make a scription forum for you as much as you want, and I don't have to recompile anymore and I can even create a new data layer there or as many data as I want just to save whatever objects that we're creating through the forms. So that's basically my my two cents for today uh manuel. How are you like? uh Should we continue yep on your time, continue.

B

That that stuff is really really really really awesome uh and.

A

I thought about you actually.

B

Yeah but but I think we we should get together on on that kind of uh stuff and and and.

A

For ultra, if anyone wants to give me a hand with cleaning up making demos and stuff like that, there are only like five modules, but the think they're really useful. So.

B

I will put that one for.

A

The community later on.

B

uh I I I think they are really really valuable uh pieces of code and I think it's it depends on what you want to have achieved. Of course, at every stage.

A

In the end, it's like uh go crazy, do as many cases tough as you want. Actually you can go really really quickly with this.

B

The thing is what what what do you want to achieve and uh if you have like such a dynamic environment, where, where every time every day, uh uh requirements change and yeah the.

A

Thing is that for for, in this case, I'm doing this for advertising. So we want to be able to get information from a new campaign.

B

That's the thing I never thought of uh xf is really good at like uh uh use it as a car and then do this kind of additions on top of xf and do like marketing campaigns and and like it's it's reaching out into the public, uh and you have like this smalls.

A

Basically, all of this manual started from this idea. It's like I wrote because yeah developer expressed like hey. I want to move my my personal blog from wordpress to south itself, because I don't want all php plugins that you know like the plugin message.

A

Yes, I update this, but the old one didn't release the new version and start crashing everywhere. So I don't touch my blow for that. I wanted.

B

To show people.

A

And stop that okay, I just created a proper theater. I just want to include it in my own blog right and I don't want to rebuild and everything. So the idea came from that. I I bothered gausha and denis and everyone in the support center for this asking crazy questions and, as always, they're truly truly helpful and they give me uh examples, another reference from other tickets, so you know those guys are great and I really appreciate their effort on this.

A

So I will stop talking because otherwise I will go crazy with you so back to humanely.