Servoy tech webinar series 11: Web components update

Good morning. Good afternoon. Good evening. Depending on where you are. Welcome to webinar number 11. My name is Jan Elman. I’m the founder of Servoyand again, I’m joined by Sean Defland. Sean, welcome. Hi, Jan. Thanks. Today’s webinar, before we get started, one more note about servo. We’ll the schedule, as we can probably see in the next slide, is completed. There are still two or three more sessions to come, but the main schedule is up on our website. So if you go to our homepage or to servo.com slash Servoya world, there’s a link now to the schedule so you can start planning what sessions you want to go to. And the training classes are getting full. So if you are interested in following a training, then make sure to subscribe in time. Last year, we had to disappoint a few people because we tried to keep the classes small enough that everybody can follow along. So on Wednesday, May 17, there will be a session on building a first-world component. So this is great. If you’re new to web components and Servoyand G client, there will be a session on end to end testing how to build and write and execute tests for your Servoyapplications. And then there will be the third session will be go and G, which is an intermediate web client and G client session. Then on Saturday after the conference, there will be advanced Servoyby Sean himself. There will be a Servoystarter training. So if you’re new to servo, it is a great training to join. And then there will also be an advanced web component training. So if you already feel quite confident with web components and this training number six is the best one for you to go to. If you have any questions during this webinar, then feel free to post them in the questions channel. We are here to answer all your questions and ready to take them for you. All right, without further ado, again, I’m really excited. Session number 11 and again about web components, some great updates that Sean will be presenting with you. And as usual, he is well prepared. He’s been preparing this for weeks. As always, Sean. Well prepared. Yeah, cramming it in last minute, but we’re committed to doing this every two weeks because if we waited till everything was perfect, then we wouldn’t be showing you stuff very frequently. So better to keep the hard, hard beat going. Yet today we’re back on web components. We’re trying to mix in our topics. So about every three sessions or so, we’re doing an update on what’s new in the world of web components and NG services. So this one will be all sort of NG client focused. Today’s agenda, we have two new NG services available and two new bootstrap extra components. The last web component update we showed the whole repository of the bootstrap extra components. There was quite a few. In sense then, my colleague Patrick Rusert has added two others and prepared some samples for that. So then we’re going to demo these and then we’ll talk about sort of how they work and how you can find out more. So let’s jump into the demo. Gonna go over to my browser. If you were in the last tech webinar, you’ll remember that we introduced this sample gallery. So the goal going forward is that all of the example solutions that we build to show a new web component or a new module or even a best practice, we’re going to be able to not only deliver the source code to you, not only record the webinar, but also actually have it live on a sample gallery so you can go find it and try it out. That’s also sort of the home base where you can get to all the other links. So I’m actually running this locally today. I tried to push a build up just before the webinar. Unfortunately, I had some issues with that and I decided that better to focus on getting the webinar ready and afterwards we can deploy this next build of the sample gallery so you guys can go to demo.serveway.com and check it out. So let’s jump into the bootstrap extras. I’m sort of hiding all the other ones so we focus on just the two new ones here. We have the drop down component and the progress bar component. They’re both pretty simple. The drop down component comes in a few flavors. The most plain one, the unstyled one, if you will, is just a simple leak. So you click on it and you get a drop down menu and of course, when you click on any of those items, you can see that you can handle the callback and down here. We’re displaying what the last callback was. You can also have a drop down button so rather than a link it just looks like a button and again, the same sort of thing. You can also have the bootstrap split button so if I click the menu drop down and get the menu, but if I just click the button itself then I get the action handler for that button. This is what the disabled version of it looks like and of course you can programmatically create and modify the drop down. So if I create a drop down menu and sort of append it to that one that was disabled, now you can see that I have the split one with it with the drop down and of course, I can handle the click callbacks and even after I’ve created it, let’s say I wanted to add an action to it. I can add another menu item and now you can see I’ve added one there. I can disable it, re-enable it, etc. So fully programmable, easy to set up at design time and also interact with at runtime. Let’s dive in real quick to developer and have a look. You can see that on my form, I drop those three components. The simple one, the first one with the link one and you can see in the properties panel, I haven’t checked that it’s a button or a split button and therefore I get the link view. There’s also no additional styling so this is the very plain Jane one. You can see that there’s two events, there’s the on action and on menu item selected. I’m not handling on action here in this case, it’s just showing the menu and then when I select an item it calls this method. The menu itself is here under menu items which is an array of these menu item objects and they’re pretty simple. You give the text, you give the, it can have a specific action handler if you want. You can also add dividers. You can see that some of these may have a font icon. I’ll find one that does. Last one, there’s the font awesome car, style class which gives us that little icon and of course anywhere you can show text, you can do everything like merge text and I18n and markup etc. So fully functional that way. The other two are just variations of that so it’s the same component but in this case I have is button toggled. Again I get the same menu items here but I just toggled is button and then the third one is button and is split button toggle and that’s what gave us the split versus the dropdown. You’ll also notice that the on action is supplied in this one versus these other two it’s not. So if you’re doing the split button then you handle both the on action and the on menu item selected. So that’s pretty much how it works and programmatically creating the dropdown which is take a look at the code real quick. It’s really easy, it’s just a simple array of items that you can pass in to set the items and then it calls that menu items and of course you can change the text the style class if I show you this in the let me grab one of these and show you in the editor you can see the properties here. So anything we did at design time we can do programmatically and then there’s also the API for interacting with the menu items. So that is the bootstrap dropdown there’s one other bootstrap extra that we have. Let’s take a look at our sample here it is the progress bar. So progress bar of course shows the indication of progress on some action. It’s pretty simple you have a minimum value of maximum value and the current value and then the progress bar shows you visualizes that. I’m going to click the randomized button here and it’s just going to kind of take us through the you know the different randomized values. So you can see that the first three and the last one all animate as the value changes however this orange one here has no animation applied. So it just it just changes instantaneously. These are all different options that you can apply whether or not there’s the zebra stripes or if you’re showing the absolute value or the value as a percentage. And of course the most realistic example of this would be if you were actually doing some action on the server that maybe took longer than a user’s use to waiting for. So you want to show progress indicator and because the ng client is enabled with web sockets you can actually just push down the value to the browser very easily just by setting the value of that component and and it will always update whatever the progress is on the server. So no hacking tricks to do that it’s all right in the API. Let’s jump in and take a look. So here we have our progress bars laid out. I’ll just click on one of these and you can see some of the properties here whether or not it animates. Of course you set the the max value and the current value you can have starting at design time. There’s some style class available so you can apply style class. There’s some built-in ones like doing the progress striped. And of course you can see that for the other ones there’s just some different options like showing value or showing percentage. If we look at the perform heavy job this is simulating heavy job because all we’re really doing is sleeping the thread every iteration. So iterating 1 to 200 and every time I’m going to sleep 10 milliseconds and every time I’m going to increment the progress with the current value. So set progress i. If we look at the if we look at the runtime API here you can see all of the properties available design time are available programmatically and you can programmatically set the progress or update the progress bar. So you can imagine that if you were doing some heavy batch update or something that in a four loop all you have to do is is call this method set progress and and that will actually suck it down to the browser and tell it what what value the progress bar should be set at. So this is really nice for enhancing the UX. All right back to our new NG services. Remember that an NG service is it’s not really a component that you put on a form and design it’s more of an API that you can call that does something directly in the browser. So the first one is the block UI service and this is ideal if you want to sort of block the UI while some action happens momentarily on the server so that you block the user from doing anything also you give them the feedback so they know that this will be done shortly. So we have we have in this service quite some options the kind of spinner you want to show a bit about the colors and the opacity also an option to add a delay so it doesn’t start right away. This is useful if you want to maybe cancel it before it’s even shown because you might not know that if it’s going to take half a second or 10 seconds before you start something if you put it into the lay then maybe you just don’t even want to show this for something really short so you have that option without having to needing to know that up front. So let’s take a look. Okay pretty easy I might want to change to I don’t know pulse and of course I can change things like make the overlay color maybe something more dibd dibd now you can see it’s a bit grayer and of course you could change the spinner color let’s make it I don’t know blue so pretty easy to work with you can also use your own custom styling so you can add some CSS to it if we want to take a look at this in developer let’s close these guys down and bring it up it is I believe this one right here so if we look at really what’s going on here all of that stuff is captured in form variables and these are just properties remember that an ng services expose is another plug-in so it’s just plug-ins.as few yblock ui and then we can set what all the properties are we can set any kind of message that we want and style class and I’m sorry the message is set when you actually call it set the style class and then you can see down here what it’s doing is updating the message as well so the first one shows it so maybe we’re about to save in a transaction and it takes 10 seconds or something so we show we show it but throughout the progress we might also want to update and say hey now we’re saving this part now we’re saving that part so you can also do that again that sockets down to the browser and updates that right in the browser and we’re sleeping the thread here a second every time that just simulates something taking longer so that’s where you would insert some real logic and then at the very end you can stop it and that will hide it one thing that I didn’t show was was this delay so let’s say I didn’t want this to show for for a whole second now you can see after I’ve pushed the button it took a second it may be that if the function ran quickly enough and and called to hide after before that second then we would never even see the blocker and so that’s a nice little feature so you’re not like constantly showing this when you don’t need it so there’s I think 11 spinners here so you can go and try that out and have fun with it finally we’re going to do another another NG service this one is called key listener and it’s a simple service to send keystrokes to the server so you can handle in a callback method the example that I came up with here would be actually doing searches in a grid on keystrokes rather than searching in memory in in a grid this could be done as real queries which is what the way I haven’t set up here so if I was typing in keystrokes instead of I forgot to add the listener add the listener okay I start typing in the keystrokes you can see that quickly I narrow down to my result so traditionally in Servoy you don’t have an event for this you have an event you know on on action or on data change on the field but this is a way of adding an event listener down to the browser so that it tells you it tells you to run a callback method on the server on every keystroke pretty simple to implement if we take a look at this need is key listener example and if we look at sorry the add listener method here it has one method plug-in set key listener add key listener you give it the component I was going to do a password thing that’s why I called this pw but instead I did the search so I passed in that that element which was the text field that I was typing in and then my callback on key here which is a function down here where I was printing out to the console if I move my go to meeting thing I can show you that you can see here I was printing out every callback that was sent up so I typed chop and it sent one for each keystroke so that was sent and then I ran my search method which which just runs a query little query builder and searched some of the columns that were there on the grid to contain a case and sensitive contains on on company name and the sales rep and the country so pretty pretty easy to implement you can do whatever you want in the callback I should say though that this is sending every keystroke so you want to keep performance in mind and use some discretion on what you use this for we may look in two ways to optimize the performance of this maybe it’s not ideal to send every keystroke maybe there should be a delay built in so that if you type really quickly it’ll wait until input stops for an arbitrary 200 milliseconds or something and then and then send the request so so there could be a like a little delay built into throttle it down a bit so maybe something like that there’s also this is still released in beta there’s also a known issue that sometimes if you try to attach a key listener on on show of the form we don’t really know when all of the elements have fully rendered down in the browser it’s not really possible to know that so some elements get missed we have a fix for this in eight dot two that allows us to to add attributes and then we can bind directly to components of that that attribute so there will be a fix for that so keep those two ideas in mind number one performance number two that on show is not super reliable so you may have to find another another place to add the listener but go ahead and try it out and give us some feedback one more thing that I just want to remind you about all of these is that if you look at any one of the examples I’ve shown you is that more information is available right here in the oops I have a style issue there more information is available right here in the in the client also code examples if you want to find the project home I jumped right here to the wiki documentation and of course if you want to download a sample I get the dot Servoy file of this exact not the full gallery just the the individual sample that I’m looking at available through downloads so that’s what we’re trying to do here is that that everything we show you is going to have handlers for these four buttons so it’s pretty easy to just go and see what’s available and you know take it from there we realize that not all of the demos that we’ve done so far are on here not all of the components or services or modules that we’ve released on GitHub are on here it’s going to take a little bit of time to get everything in there but it’s coming together and I expect over the next few weeks that that this site really starts to become a bit more of a real thing than just a demo so I encourage you guys to go to demo.servoy.com after I push the new war file up so that you can try out these new samples you can also just go directly to some useful links here Servoy or github.com slash Servoy and that’s where all of these projects live demo.servoy.com is where the sample gallery is and of course we’ll take feedback on the forum and if you want to catch any recordings or stay up to date on announcements go to the tech series link on our site Y’all do we have any questions? Yeah thanks for the great demo again a couple of questions coming in on the dropdown button can you also display an icon is a question from Andreas. On the dropdown button can you display an icon on the button itself yeah I think that’s that should be possible I haven’t tried. All right Patrick says he doesn’t think so yet. Okay. File a request this is just you. Yeah go to the the github issue tracker for that and file a request. Is the submenu orientation setable there’s a question from Andreas as well. The submenu orientation meaning I don’t know exactly what that is. There’s a question and Andreas perhaps you can expand on your question. Then the next question is from Bob for the for the block UI. The best is the best practice like the buzzy the buzzy plug in and do in a try catch block so you can unblock manually or does it unblock on an error. I don’t think it’s going to unblock on an error so I think that you probably want to do that. You probably want to do that in a try catch manually. There’s also a known issue with that that if you if you refresh the page like the whole browser page then you lose the blocker if it won’t stay there so it’s kind of really just down in the browser. I’ve also seen one other example where someone had shown a dialogue but there was a timing issue and so they couldn’t close the modal dialogue because the the the blocker was on top of it. So there’s there’s potentially a timing issue if you show a modal dialogue in in close proximity and time to the to the blocker. But again all of these issues can be resolved if you if you try these out and if you find any issues to file them on the project github issue trackers for each individual project. All right so and reas as I’ve spent it on this question and he means that in your example you have the sub menu that that the small pointer on the right hand side of the text can you also put it on the other side. Yeah Patrick if you’re on the webinar maybe you can answer that. I think maybe if we see us as it possible. Patrick says not sure so I guess that means that Andreas will have to file an issue on on git so that we can we can dive into it and not let it drop off our to do list. All right well if there are no further questions then it looks like we’re a few minutes before time. What is up in the next session John? So like I said we want to mix in stuff that’s focused on the ng client but also not forgetting about other areas so next we’re going to talk about word employment. The yawn made this title not me. War deployment is an alternative to the traditional dot Servoy import files it’s a way of it’s a way of deploying the entire build including all the dependencies so it’s it’s pretty powerful. It’s also therefore more complicated so we’ve seen some folks asking questions about this and struggling this with this a bit. So next session April 19th is a best practices on word employment and for those of you who are maybe new to that who aren’t using the ng client this also applies to the other client types as well this is not this is required for doing the ng client but the other client types this is also supported so it’s for you as well.

Close