Sneak preview of Servoy 8.2

I welcome to today’s webinar the first one after a Servoy world and joining me again although he’s trying to get some guest speakers in the next session is Chandevlin. Hi, Shan. Hi, Jan. And today we promised to give you some of the highlights of Servoy world and the most important announcement that Servoy world was discussing what’s new in Servoy 8.2. We also looked a bit further to version 9 but today we’re going to recap all the cool and nice capabilities of Servoy 8.2 with some hands on demos and you’ll be able to download Servoy 8.2 right after watching this session. If you have any questions about 8.2 or anything else, feel free to post them in the questions channel. I’ll be moderating this session so you’re welcome to do that and meanwhile, a lot of content today is going to get started quickly. Shan, the floor is all yours. Okay, thanks, Jan. Yeah, so I see in the list of attendees we have some folks that I did see at Servoy world so this will be a bit of a review for you guys but I see a lot of names that weren’t able to go to Servoy world. There was a lot of really nice talks and some trainings. We can’t recap all of that for you but one thing we did do in the main product session was cover what’s coming up in the next version of Servoy. So I should clarify that 8.2 is not released yet but you guys will get sort of like an early beta that you can download and play with some of the features that you see here and provide feedback. So let’s dive in. What’s coming in 8.2? We made some improvements in sort of the clients, the overall stack. We’re also focusing on developer experience in the IDE and we also made some improvements to enhance deployment. So if we jump right into what we’ve done in the stack, we’ve added a plugin called the client manager plugin. Basically it has the ability to broadcast messages between clients which is kind of like almost like a chat enabler for clients to talk to each other. So you can subscribe to monitor a channel, you can have multiple channels and clients can broadcast on a channel and they can also listen on a channel. So you could do things like a chat application but you could also do headless job queuing or some other notification systems with something like that. We’ll take a look at that plugin in a few minutes. It also gives you the ability to do, sorry, not driving very well. To do some session management. So if you remember the maintenance plugin or if you’ve never used it, it sort of gave you the ability to see which clients are logged in and to send messages to those clients or to even terminate those client sessions programmatically from outside from a different client session. So that we’ve moved out of the maintenance plugin and into the client manager plugin. So now you can do it at any time not just during import and maintenance mode which was the main restriction for the last time. So that’s the client manager plugin. We have also made a small enhancement to the in-memory tables. The design time definition of in-memory tables is now fully supported on all column properties. It used to be that only a few of the column properties were supportive and now we support everything that you get on normal data sources and we’ll just, we’ll take a look at that but there’s not really much to demo. We did add something called element attributes which allows you to specify an HTML attribute on any element that you put on a form and that attribute gets pushed down to the browser. This basically facilitates people who write components to add behaviors to existing components with an ng service. So you could take something like a text box and say, okay, I want to write a small service to listen for keystrokes and I want to attach it to all elements that implement an attribute. So we’ll take a look at sort of how that works. It’s really more of an advanced feature for those folks who build components, but it means that also we build components for the community and services for the community. So now we can enhance those to really add behavior to existing components. We’ve now added the ability to support projects which don’t have a resources project. So it used to be that all projects have to have a resources project and all modules of a container solution must have the same resources project. This is sort of paving the way for to distribute to more easily distribute modules that don’t really have a database tables or security or anything like that. They’re just lightweight frameworks that might have some APIs in them. It’s also paving the way for something we see in the future which would be to run binary modules. So really to include maybe something off of GitHub like the S3YUTILES module and run it sort of included not affecting your source code. Normally now you have to include it and it becomes part of your source code, but now you can really just include it as a dependency. It’s not there yet, but that’s something that we’re looking to do in the near future. So let’s jump back to this list of enhancements and we can demo those before moving on. So let’s take a look at the client manager plugin. I have a demo server running because I kind of need a server to do this to have multiple clients connected at the same time. When I built a small chat example, maybe I should reload these guys to make sure they’re still fresh because I started it. So I’ve sort of logged in as two users, Sean and Sean too to be able to chat with one another. So I’m going to type in one channel and you’ll see it broadcast into the other client channel. And I can go back and forth like that. So you get the idea, but it’s really more than just building a chat client. It’s facilitating clients to communicate messages, lightweight messages to each other. I have in developer perhaps a better example of this. I wrote a little job queuing demo this morning just before the meeting, before the webinar. And so I’ll show you what that might look like. So I’m launching this in, oh, it’s asking me for a user. It’s launching, I’m launching this in the ng client. And because I need two clients in developer, I’m going to launch this in the classic web client. So what I’m going to do is say that in client number two, I’m going to run a job locally. I’m going to give it a name and call it job ABC. And I’m going to process 100 units. So I’m going to go ahead, maybe I’ll make it 200 so that it lasts a bit longer. So I’m going to go ahead and start, well, let me really drag this into a smaller window before I start it because that’ll be easier to demonstrate it. All right. So now I have a job ABC is about to start in one client and then in the other client over here, we want to see notifications of that. So I’m going to start the local job here. You can see that I got a little pop up here and over here, you can see that it’s printing out the number of units that are processed. And as soon as it’s complete, there’s another message that’s sent. So now we see that the job has completed. So if we gave it another name, we could run another job, maybe job XYZ. And let’s just do 50 units. And now you can see that XYZ is running in, it’s running in client two, but it’s broadcasting it’s progress into any clients that are monitoring that channel. And then it’s picking it up over here and displaying it. So let’s jump in real quick to the client manager plug-in in the IDE and show you where it is and what’s available. And then we can look a bit at the source code. So it’s under the plug-ins node and the solution explorer and it’s right there client manager. And basically if you want to subscribe to a channel, you call this method get broadcaster. And then you provide to it a username that you want to use on that channel. It could be something like a UUID or a real username. And then the channel you want to subscribe to and then a callback function for when you receive a notifications of that. And that callback function is really just passed a message. So if you look at the chat example, you can see that on first show, it asks for the username. And then I call this init broadcaster where I store the username. And I call this get broadcaster and I pass in that username that it will pop up and ask you, I made a constant for the channel. And then my callback method is here. So this method gets called and it’s always passed a user and a message. And in this case, I just printed out the chat to that HTML area. That’s all I did to build the chat. So when it’s sending, when I actually type in and hit enter, I’m calling this method up here to send. And again, I’m getting my, I’m using my broadcaster and I’m telling it to broadcast a message. And all I do is put in the contents of the message. And then that broadcast it and it’s picked up on the other clients. So that’s kind of the basic mechanism is you can broadcast and you can receive. Again, it’s in client manager and you get this broadcaster object to broadcast messages or to receive in the callback that you subscribe to when you, when you created the broadcaster. The job, the job one is basically the same, but you can see that it’s maybe a bit nicer of a real world application that what I’m doing here is, well, I’m just running a for loop and sleeping the thread to indicate like a long running process. But during every, at the start, at the end, and during every iteration, I’m calling send. So if I highlight here, you can see it’s at the start in the middle of the for loop. And when it’s done, and I’m giving it some, some information that it’s started, it’s an update and it’s completed. You can see that in this case, I’m making an object here that has the event type, the job ID, and some information about the progress. And I’m going to stringify that, serialize it into JSON and just broadcast that string so that it’s sort of an update with some real information and not just a chat message. And you can see that when I receive that in another client, I’m parsing that JSON object back into some discrete information and then I’m calling it into my form and telling it to update. And that’s where I’m showing the, make some more room here showing the notifications and updating information about what’s processed. So that’s the client manager plugin. It’s fairly easy to use, but I think it has some nice applications. If we go back to, let me find the presentation. So I’ll close that and I’ll close the web client one here. Okay, so if we go back to our presentation, we talked about the in memory tables and that’s pretty easy to show. So if I come into my solution here and I make a new memory data source, I’ll call it demo. And now when I add a column, you can see that I have full auto enter, validation conversion sequences work now. This was something that was missing from the eight dot one branch. It was only just the basic details here. So now it’s fully supported like any other data source. That’s really it. There’s not much to demo there or anything. We had also the ability to extend components by providing HTML5 attributes. I can show what that looks like, although I can sort of forewarn you, it’s not going to blow your mind. It’s more of something that gives us the ability to attach behaviors to existing components. So I have a solution here. And what I have is a really simple service that that was built just for this demo, which basically attaches a listener to the key up event to anything that has this attribute key listener. So, and then it executes a specified callback. And that’s really it. So if we look at my form, I have a text field here. And in the properties, we now have this, this property, which doesn’t exist before a two called attributes. And I just have an attribute called key listener and I give it some value. In this case, it doesn’t really matter if it just has any value. Then at the same time on the forms load event, I’m adding an event where the attribute is equal to some value. And I’m giving it my callback, which just calls it back. So if I run this in the client, and I type one, two, three, you see that I got, well, it switched screens really quickly. I got the three callback events for each key stroke. So I didn’t use a custom component for the text field. I just attached a service to that, to monitor that, and gave it some behavior based on that attribute. So it’s kind of a technical thing to use it as maybe more of an advanced thing, but it allows NG service developers to completely add behaviors. You may remember from prior webinars, we demo the key listener service. So when eight two comes out, the key listener service will be fully functional. It was missing the ability to be able to register to any element on form load or on for a show. And so now we have that ability through the attributes. We go back to our list of stuff here. No resources project. This is pretty simple. If we look and develop her now, and I don’t know if I bring up the change resources dialogue, I could select the no resources project. And that means that the resources area of the tree here is disabled. So you don’t really get to do things like I18N and DBI files and such. But it allows you to distribute really lightweight modules. All right. Let’s maybe I’ll put this in present mode. Let’s look at some enhancements in the IDE. So we’ve added something we’re calling field wizards. And basically when you place the current field wizard, it doesn’t allow you to set any defaults. But now what you can do is have different presets or configurations for different kinds of placement options. So you could have one for grid forms or one for certain, you know, just different configurations. And I think that we’ll be doing more of these wizards to make the development experience a bit more nuanced and a bit more customizable. The other thing we did is these name found sets. This was a kind of a long time, I think, request where the way I’ll explain it is that by default, as you probably know, all forms which are based on the same data source, we’ll share the found set unless they’re shown through a relation or they’ve been declared to use a separate found set. But we never had the ability to have like different groupings of forms that we’re sharing the same found set, but still separate from other forms that are sharing different found sets. So now we have that ability and I can demonstrate that in the IDE. We also have a form hierarchy viewer. It’s easy to visualize form inheritance now. It used to be difficult to see which properties were overwritten for which components and also which methods are overwritten in which forms and inherent structure. So now it’s easier to visualize. And this is a small thing, but we can have multiple properties, we can have multiple properties files that are actually mapped in the workspace, or stored in the workspace and then mapped. This means that you can run a single instance of servo. And you can switch configurations when you switch workspaces rather than some people were writing bad files to start the IDE with different properties, files, etc. So now it’s a lot easier to do that if you’re switching a lot between multiple projects that have different configurations. Okay, let’s go into the IDE and take a look at field wizards. And I think we’ll probably run a bit long today because we have a bit of content to get through. Oops, I think I have the wrong solution activated demo field wizards. Well, it doesn’t much matter because it’s all based on the resources project. So it was this one. Sorry about that. Field wizard. Okay, so I have a form here called field wizard. And what I’m going to do is delete these because I was playing with it just before the meeting. And I’m going to hit the place field. Let me just do that more slowly if you didn’t see it’s the same button that’s always been in the IDE, this place field wizard. And I have typically you see something like this, but we have now this advanced tab so that if it’s a new user, you’re not totally blown away like what the heck are all these options. But if you’re used to this, then you can expand this to get the advanced properties. And what you can do is you can you can put in a configuration name. And now you can start to specify, you know, for strings we want to do text fields, but for, you know, numbers we maybe want to do integers, maybe we want to do a spinner or a combo box or something. Because we know it’ll be a value list. Then down here we can start to do some of the fields spacing. So how much space there is between the fields with the default sizes are going to be. If we want to include a label with a label for property and all that, what component we want to use for the label and I say component because I don’t have any web components added to this project, but it doesn’t have to be just the default components. You can also do other web components like through strap components, etc. You can specify information about the label as well. And here you can do the check boxes that you always had in the field wizard. Additionally, you can say that the label could be on top, but you don’t have to play the source on to which is I think a nice change. Also, if I had set, if I had set my I18N server and table, I could check this check box and it will generate an I18M. And I18N message key and store it and then also set it for the label values. So now I don’t have to go in and first create an I18N label entry in my I18N keys and then go and set it to be that in my label. I can do it all at once and I can specify a prefix, like ABC and then it’ll do I18N call in ABC and then the label reference text. So that’s a nice feature for just if you’re doing I18N to just kind of rapidly add those keys as you’re designing forms. So you don’t have to do it in two separate steps. So what I could do here is go and get, I don’t know, customer ID and city and country. By the way, I’m doing a single click you have the option to turn off and on if you wanted to do a single click. Maybe order date. So now you can see that these placed with the label on top and this the spacing is just how I wanted. If I had if I were to change this and make these say 300 and now place another one, you can see that the field is now longer. So it’s persistent, whatever changes you make to that configuration will be saved. I could also move these off to this side. Make some room. I could also change my configuration. So I have another configuration here called config to and you can see now that for string values instead of doing a component, I actually picked a template. If you’re not familiar with templates, you can you can take a component or group of components and style them. However, you want to arrange them set whatever default properties you want and then you can say that as a reusable template. So now I can I can link that to Sam always going to place a template when I place a field. So you can really get specific to, you know, the things, the properties that you want to have. Let’s say you always wanted to select on enter or something like that. Now you can do that with a template and just have that template always placed instead of a field. So I have that template set. So if I grab a few more of these now and place them also, it’s going to do horizontally. So now you can see that well, at least for the text fields, it placed my template, which is got some funky default settings. So now it’s a lot easier to set those up. If I wanted to have say, I think a good use of this would be like a table for you. So I could make a new form. I’ll call it order details based on order details. And now when I get into the place field wizards, I’m going to do table view and I’m just going to go ahead and do, you know, I don’t have any text fields in here. So, but I guess these weren’t on single click. So I put that in now and you can see that the table view does it across the top automatically for me. So it also set it to table view because it recognized that it was placed or is on. So you get the idea and I think we’ll be doing more of this in the IDE in the future to try and make a more customized experience. How are we doing on time here? It’s almost 1130. Well, let’s take a look at the form hierarchy. That should be no name found sets and then form hierarchy. So, by the way, if you have questions, just go ahead and put them into the chat panel. The found sets. Okay. Here’s the setup. Typically, sharing found sets between forms is a good thing and the fact that you get that by default is convenient. However, if you want to have multiple forms that are grouped together, but maybe then you have another group and you want to share the found sets, but you also want the separation between the groups. So, that’s a really use case for this and we’ve had a lot of sort of requests for this over the past few years. So now we finally have it implemented. So I’ll show you what this looks like. I have form orders a if I go into this form. You can see that for the name found set property and I’ve used a bit of inheritance here. So you can kind of disregard the override. I basically created one base form. So these are all just inheriting everything for that, but I’m only switching the name found set. So I created two name found set orders a and orders b. And so my orders a form is based on orders a, but also my orders double a. Is based on orders a. If you look at my orders b form. It’s based on found set orders b and my. Double b form is also based on name found set orders b. So we should have among these four forms, two will be sharing a found set for for each of the two groups. So if we take a look at this at a runtime. You can see that that orders a is on record one. I’m going to scroll over to record three. And I’m going to jump over to orders double a and you can see that it’s it’s showing the same record record number three. So these found sets are in sync. Orders b I could say put this over to five. And if I go to orders b b it’s now showing found set. the same found set record number five. So record number three record number five and record number three. These two are sharing and these two are sharing. That’s pretty much it. It’s a it’s pretty simple concept, but this can really help for developing large applications. Okay, we have also the form hierarchy to demonstrate. And I think I can just do that right on this group of forms because I’ve used some inheritance. So you’ll notice that I don’t know let’s start with orders a is inherited from this base form. In fact, all of them inherit from this base form name found set base, which is where I just set up all the fields and everything and really none of them. Override anything other than that property of the name found set. So if I look at if I want to look at say orders a in the form hierarchy, I can right click the form open form hierarchy. And now you can see here that okay it extends from from name found set base and it would show if you had multiple levels of inheritance like three or some or more it will show all of them. And it shows the method implementations. I don’t really have any. I can show all inherited members and it’s going to show everything from from the base form, but I want to just see what’s in this form. So now if I were to, oh, I don’t know maybe make this label. These two labels. Bigger and save it. So now you can see that they show up in in blue. It might be hard to see in the meeting. They show up in blue here. Not black and I’m looking at just what’s over it in in this form if I click on the base form I see everything that exists in the base form. What I can do also is is clicking on this form I can show all inherited members and it might be hard to see in the meeting, but this is blue and this is black maybe we make that a stronger color like orange. So that it really stands out if I’m looking at everything what’s in what’s over written and what’s not. The same holds true for for the methods as well. So if I were to. Let’s make a method on on order a called next which it should ask me if I want to override that and I’ll say yes. And maybe I put a bit of. Something else in here. Now that it’s really different. So now if I go back to to this in the form hierarchy I might have to refresh this. See it there there. So now you can see that next is is implemented here and in the base form and also when when this is highlighted in the form hierarchy it shows up and if I if I want to use this for navigation you can see. a sub form implementation. Base form implementation by double clicking so now you can really when you get into a complicated inheritance structure you can kind of navigate it and have that insight and see a lot easier. There’s some some buttons over here to just toggle what what you can see and what you can’t see. It has all that stuff so if I didn’t want to see methods for example I could X that out. So that’s it that’s the form hierarchy. That pretty much covers all of the demos that we want to do the multiple property file isn’t really much to demo you just can link it to your your workspace instead. I can talk a bit about some of the other things that we’ve got going on in eight to with regards to deployment. We’ve made some enhancements one is related to server scaling. We’ve implemented scaling feature which is very lightweight it’s based on just broadcasting AM QP standard messages between nodes in a cluster. If you ever did any research or tried the the old clustering in Servoy it was based on terracotta which is now a dead technology and it also was very chatty. So all the servers were talking to all the other servers all the time. This is a lot more lightweight and and is better for scaling. We hope to be having a guest speaker on one of these tech webinar series talking specifically about this feature and sort of how to implement it and what it does. So I’m just going to stop there and just say that this is available in eight to. Oh, I can I can demo this because this is pretty small. We can now do a deployment directly from the IDE to an app server. So when you’re exporting a dot Servoy file you can also specify the import options and then target URL. And so when you click OK it’ll build the dot Servoy file it’ll upload it based on a rest based web service to the app server and the app server will run the import with all the specified. import options that that you use and I should I should clarify that this is for dots of oil. It’s not for a word appointment because that has all the the other parts of the build that are not are not there. So this would be just for dots of a and I’ll show you what that looks like in a minute. And then finally we added something small but very useful for if you’re doing provisioning like if you’re launching lots of servers and you want them to be sort of dynamically configured. You can now substitute configurations in the properties file so you could see that the top line there which has the database URL is completely hard coded which is kind of the old way to do it. Now what you could do is is put in little variables like there you can see dollar DB name and then that will be substituted in by some external external process so that that now you could just launch. You know if you’re using Docker something you could launch a bunch of containers and and substitute stuff in dynamically if you had multi databases or whatever. We also might have a guest speaker on this topic as well. So that’s pretty much the content I’ll show you one more demo and then I think we’re done. I switch back to the IDE say I wanted to export my find solution here. I go to export solution. I pick the file export option. So now I go through the options here and you can see that down at the bottom of all the options there’s create import settings. So now you can see when I get towards the end I can specify the import settings. These are all the same settings that you’ll see on the admin page when you’re running in import so I can specify what I want there and then finally under other options when I click that the next button becomes enabled and now I can specify the. The URL that I wanted to deploy to so and then I click deploy and so it’s really going to. It’s really going to build the dot serve way file and then upload it and import with all those options and it’ll put back the HTTP response right here. So that’s the final demo. So, Jan I imagine we might have some questions. Can you save those settings Bob asked. Can you save those output settings when deploying from the IDE. Oh I think that’s related to the. That gets saved Bob when when you if I go and rerun the export it actually does get saved so it’ll be the same every time it’s related to the IDE. is not under revision control. There was something else that I forgot to mention the field wizard actually saves that in your workspace so. So you can it’s just like your templates so you can keep those configurations across multiple workstations that can go under revision control. Okay, mostly these are comments that are positive which is good. But I don’t see any other questions. Okay, well we are over time. Finally, I forgot the main thing. If you can still see my screen. Download dot serve way.com. We’re not announcing this yet. Like as an RC we still have some work to do so it’s not feature frozen or anything like that. It’s also a known issue that this is going to break some. Some of the existing components that have to be modified to be compatible with a two because there was a I think it’s because there’s an. An update to the angular version that’s used in the ng client. But if you want to. To try this out you can copy down this. This address and we’ll probably be announcing this on the forum in the coming days or weeks as we get into more. And then eventually we’ll go to RC. We’re looking to do a final release of a two. Sometime this summer. So. And we’ll be announcing all of that on the forum but we’ll do we’ll do some some public betas before we get into. Release candidates they get close to final build. Again, keep track of the forum. There’s a thread there about this series and also announcements for for new versions of Servoy and give us some feedback there. Thanks everyone. Goodbye.

Close