30 minutes with Servoy: 8.2 launch 2 of 3 Development Enhancements
30 minutes with Servoy: 8.2 launch 2 of 3 Development Enhancements
Good morning or good afternoon depending on where you are and welcome to today’s webinar. My name is Jan Edelman and I will be hosting this session and Jan Devlin, one of our senior engineers, is going to be presenting and demoing. Today we have a pretty packed webinar with all the developer and new developer capabilities in server 8.2 and a great way to find out what server 8.2 can do for you. So if you have any questions during the webinar then please post them in the questions Jan Edelman should take as many questions as possible as we have time for. And we have set out of our way welcome, Sean, to the floor. Thank you, Jan. Can you hear me well? Yes. Is my screen visible? It is, yes. Excellent. This time I promised I fixed typos in my slides minutes before the presentation. Yeah, welcome to this three-part mini-series. If you’re just joining us, I see some questions already about recording. So if you’re just joining us, we are recording these sessions and we will have them all posted on our YouTube channel on our website and the forum by the end of the week. We already did all about the client manager plug-in on Monday. It was a lot of fun. Today we are doing all of the enhancements in Servoy developer. So what’s new in Servoy 8.2? You guys have been waiting. It’s finally here. Servoy has gone to the dark side. That’s right. We have a dark theme available and I’m ready to show it to you. There is the dark theme in Eclipse with new icons in Servoy that are compatible with the dark theme. So a lot of developers were requesting us for a long time. It’s kind of tricky because it’s half Servoy and half Eclipse. So we can do the dark theme in Eclipse but then all the old Servoy stuff has to be made compatible icons and styling with the dark theme. So in 8.2 now you can have a dark theme that looks like this. The way that you enable it is you go to your windows and your preferences and you go to general appearance and you select the default theme will be selected by default and you change it to dark. And then after that you go down to Servoy and there’s also a checkbox here to use the dark theme icons. So I’m going to undo this and take it back to the way that it would look when you start. So I apply everything and I think I did the dark theme icons here. Apply those and then you would do a restart. So well it’s restarting. I’ll talk about our next topic. Another feature that I think people have been asking for for years in some form or another or they’ve been having a certain issue and now we have a feature to solve that issue is the idea of design time or named found sets. And these are found sets that a developer can establish at runtime or at design time, a name of a particular found set, almost like how you have a related design time. Then you can create data binding in forms also at design time to the named found set. This way you can have groups of forms that share a single found set but at the same time that group of forms is separate from maybe another group of forms which are based on the same data source but not based on the same design time found set. And finally you have programmatic access to the named found sets because there is it’s like one named instance of a found set at runtime. So if you use the data sources object and you call to get found set there’s now an optional argument, normally a word return a factory found set. So a newly constructed found set each time but if you pass in the found set name it will return to you the instance of the name found set that other objects might be sharing. So hopefully the IDE is restarted with the classic view and I’ll show you an example of this. So I have here a form called order detail. If I launch the web client or the ng client here we’ll take a look at that form and that’s a good thing. Okay so we have an order we have some search some scrolls the order items a map etc. And what we want to do is basically have another copy of this form that uses a separate found set. So what I’m going to do is I’ll create an inherited version of this form so create new sub form. I’m going to call this order detail to everything else is the same and I’m just going to change one thing on this form. So if we go to the form properties where we have what was always called the name found set property but it was always separate or default we can now just type directly in there and I’m going to call this found set orders to. So now this form is based on the same data source but a separate found set orders to. Now if I also go to the main form here and I’m going to add to the tab panel our new I don’t want it through a relation order detail to at the same time I’m going to create another sub form here and we’ll call this order detail three and actually let’s call this to and call it copy or something because I wanted to to show that these are also shared so we go to finish here and on this form we’ll also set it to the same data source as the the other one. So you can see now that under named found set because I’ve already created it I have orders to. We’re going to save that and go back to our tab panel here and add ordered to to copy. So those are basically identical. So now if I launch the client again just in case. So now you can see I have my original order detail my order detail to copy or order detail to copy on the screen so what I’m going to do here is show that I can enter a search in the first form you see I have 28 records but if I go to the second form I still have the full found set and I put in see food and you can see that we still have more than 200 friends 30 okay so we got it down to 30 now if I go to over to the third form you can see that it’s also 30 records and if I scroll through this and go back to the second form I’m on record 3 second form is also on record 3 so those two are sharing but the first form is still showing record 1 of 28 with the different search criteria that I entered so you can see that the latter two forms are sharing the first two forms still using the original default found set that came with the form one other way that this is useful is you may have a form which has tab panels on it which you want to make based on the same data source so you might have a few insert forms that that are also on the orders data source and you want them all to stay linked so you could you could do the internal tab panels to to keep those connected but then if you have another sort of copy of that form or something you could do the same but with a different name found set also this works programmatically so if I I’ll just go into my command console it’s probably easiest way to do this and we’ll do forms order detail to I’m sorry I want to do the data sources data sources DB example data orders and then I do get found set but this time instead of getting factory found set I’ll put in the name which I believe was orders underscore 2 I’ll store this to a variable right here in the command console what did I do wrong I forgot my equals equals okay so now I can look at my orders to found set state maybe get selected index and if you remember we were on record 3 of 30 I believe it was so now what I could do is I could do something like set selected index 25 and so I programmatically modify that name found set if I go back to the running client and I go to the forms that were sharing that you could see that they’re already on record 25 so you have programmatic access to a name found set the way you do it is you go through the the data source and and the get found set but you pass in the name so it’s pretty easy to do okay so that’s name found sets another enhancement that’s in 8 to go back to present mode here is the form hierarchy viewer and this is a feature that allows you to more easily view the chain of inheritance on a form or on a group of forms it allows you to filter out if you want to see variables methods elements and form parts so that you can focus on what you’re interested in one thing that’s really nice is you can show all implementations of an inherited member so if you have a component say on a base form and then on a child form from there let’s say you didn’t do anything to that component but then in the grandchild form maybe you modified the component you could then see in the hierarchy that you have an example of or an implementation of that label where it’s modified in the in the grandchild form and then the original in the base form the same is true of methods as well it’s also nice because you can show an hide inherited member so sometimes it’s it’s too cluttered to see everything that’s inherited and you can just visualize what’s what’s in that form and you can talk about that on and off and I’ll show that to you now so probably the easiest way to do this is if we take that order detail to form here and I’ll just click in the whitespace and open form hierarchy and over here on the right hand side of my screen you have the list of you know the chain of inheritance so we have example base which is a form that has no UI but has all the code for some of the logic like the searching then you have example base UI and if I double click that here I can open it and you can see that it has a bit of the UI inserted but but none of the content that might go in an implementation form then I have order detail in order detail to so it shows first of all the chain of inheritance which is good to see so if I wanted to see order detail to and what it inherits from I can visualize that the next thing that we might want to do is look at in elements in the form hierarchy so you can right click and element open and form hierarchy and you can see where this element was implemented you can see search text here as it’s highlighted in the hierarchy was implemented in the base UI and you can see that if I were to I don’t know let’s modify this let’s move it over by 10 pixels let’s save it I think I have to open and form hierarchy again oh I do this in base UI I didn’t mean to do that I want to go back to order detail to and do it there so now I’m going to I’m in the implementation form several layers descendent from the base form and I want to override something about that component so I moved it to the left 10 pixels and I saved it I think I have to show and form hierarchy again so now you can see in the inheritance chain search text appearing the element search text appearing under order detail too and also appearing where it’s originally declared in example base UI and you can see here the little override triangle here to indicate that’s been overridden from the base form so so you could do the same with methods as well so if I were to look at the the get search provider method of order detail to here and open and form hierarchy and expand all these you could see that that it was implemented in example base which is the the deepest base form which only has logic and then it’s it’s left there and then it’s it’s overridden in the get search providers this is in the search logic this is the part that actually returns which data providers should be searched when I typed in coffee it searched through some relations so you could see if I double click it it will take me there to that level of where it was over written so I can I can look at the base form version and double click here and look at the implementation form version you can see where I added the relations so it allows you to visualize the chain of inheritance on methods as well as as well as elements then there’s there’s the ability if you’re just looking at say a form here order detail too you can look at all of the members that are overridden there’s only that one search text that I moved but I could toggle to show inherited members and then you can see the full list of of members of that form and where they where they originate from in the hierarchy also what you can visualize is filtering so let’s I’m only interested in code so I want to suppress form parts and suppress elements so now you can see that and this is this is quite calm and for me if I want to look at really inheritance a lot of times I’m more interested in code than you I then I can see which methods are implemented and where they’re where they’re coming from and again if I were to untarget the the inherited one you can see that there’s nothing here but if I look at it say in this form I can see you know where it’s coming from so it’s quite useful for inspecting inheritance especially when you go pretty deep and you can see that if you click through the forms here you get where where everything’s coming in it so play with that and and and may use of it is quite helpful I find finally I have another note about inheritance and that’s we now have the ability to for our base form to be totally abstract and know UI and now you can share or inherit logic and code methods and variables from a base form into both responsive and absolute and I’ve encountered this problem already so if I was if I was say we look at example base this is the sort of grandmother base form and I open this in the form editor you can see that I’ve I’ve removed the parts it has no parts I took the body and removed it from the original design by doing that this form is now completely abstract it has no parts therefore it has no UI and so now you can see that when I want to create a subform from it typically if I had any if I had made a absolute an absolute form as a base form or I had not specified responsible layout this would be grayed out I have to I’d have to make a responsive base form to have a responsive child form but now I can have a totally abstract base form you can see that I can still toggle this and I could make you know orders responsive and go about making a responsive version that still has all the logic from the base form so this is quite handy. Okay what else? This is the slide for that so you just have to remove the parts to get to be able to do the responsive or absolute place field wizard so we now have a wizard to enhance when you’re placing fields on a form and it allows you to specify different component types for different data types you can create predefined templates and use those as well as components so you can really customize when you’re placing placing fields how you want stuff to look and this includes spacing sizes label placement options on top you know to the left place horizontal for grid views etc it’s also nice you can auto generate I18N keys so you don’t have to do that later so you place a label generate the key for it and then you can go in and start to provide translations right away finally you can save and reuse named configurations so that if you want to for example have default configuration for a grid form a default configuration for a data form versus some other kind of dialogue or something you can save and reuse many different configurations when you save it it goes into your workspace which then ideally goes under revision control so you can share this across with your other team members and and a few change things you could you can see it over time in your revision history so let’s do a demo of this switch back to Servoy developer I think the first thing we should do is maybe I made a blank form here ready to go I’ll open this in the form editor I call it order fields I’ll close the other tabs just to give us a bit more clarity okay so if I’m going to place fields on this form I typically go to the place field wizard and this looks a little different than then 8-1 but not much this is the the basic version and it looks just like how you would normally place fields one thing you’ll notice is that I have toggled here single click so rather than control clicking a bunch of stuff in the right order that I want and clicking okay here now I can just go I want customer employee in order date these are coming from it I’m predefined configuration already but you could see that you know by default order date is calendar if I wanted to that’s weird if I wanted to override that and do you know checkbox or something I could do that if I go to the advanced view this is where it really comes into play this was this would be the default so normally text everything is a text field a date is a calendar the media is a media field and that’s that there’s no special settings for spacing but what I can do is start to customize this and before I customize it I might want to create a new configuration so you know I can do mic on fig and I type that in and now I can say you know I want fields spacing to be 10 default size 150 by 20 something like that I’m going to delete the mic and fig and use one that I already prepared so that so that it looks nice I’ll call it data form and you can see that the all of the field types I didn’t change from the default however I did set the field spacing and the default sizes the labels going to go directly on top it’ll fill the name property so now if I go through here do custom ID employee ID order date and click okay you can see how the components are arranged on the form I’ll also add this to the the main form so we can see it in the client we can get rid of these order fields so now you can see that these are placed label on top and and space the way that we like so let’s take it to the next step if I go back to my order fields form I’ll delete these and show you that the next thing you can do which would be to use different kinds of components so I could say for you know for text fields I want to do let’s say it was a web component that I’ve included like a tokenizer from a Servoy extra package or something like that I could do that you can also include templates and so what I’ve done is prepared a different configuration file I call it with template and you can see that now I have predefined templates and if you haven’t used templates before it’s really you take an element you add some properties do you change some properties on it and then you save it as a template it goes in your resources project and then you can place that element with all the properties preconfigured so you can combine templates with the field wizard and so for here I have for the first three fields I’m using a one field template really all I’ve done is attached to style class to it and then I created a different one for the calendar template and then finally for the label I made a label template so if I place the same fields here and click OK and save these and I switch back to the client you can see that it already has some some CSS applied as well one thing that I think is worth pointing out is that of course you’re going to have exceptions to the setup that you want so you can always change those as you’re placing it so I could for example pick the order total calculation and instead of doing the default field template I could have another template prepared here called currency template which maybe does some formatting in a different CSS and now you can see that when I place that on the form as I’m placing out I can just specify what it’s going to be I don’t have to first place a template and then go hook it up to the data provider which I think is more work so again you can just dynamically change them as you’re placing them OK I think that what we’ll do one more example of this in combination with with the next example that I want to show you if we go back to our slides here we have a couple of enhancements on in memory data sources it used to be in a one that although you could define the in memory data source at design time you were restricted from setting any of the call of properties we now have full support for the call of properties when you’re defining a data source it’s just like any other table editor we also added an eight two an on load event to in memory data sources which allows you to do a lazy load if you’re creating the in memory table from I don’t know an arbitrary SQL query or a web service or just a bunch of predefined stuff you load a file etc there’s a way now you don’t have to to proactively do that on startup and you might you might have a form where you have to remember to initialize the data source before you show the form that’s connected to the data source and then you have to refresh everything you don’t have to do that anymore all you have to do is make your data source make your form and then provide the handler to this event which which supplies the data and then it’ll lazy load it so the very first time it gets referenced then it will it will call the load event and it gives you the opportunity to populate it so I can show you what that would look like we’ll go to the the data source node in the solution explorer select in memory right click and create a data source I’ll call it my in mem okay and I’ll add a I don’t two fields to it ID like 36 and that can be the pk and so what’s new is is all of the the column properties that you see here and also the sequence types so I could say well that’s a uiD generator and give it a label ID and description whatever so I’ll add another one label text and I don’t know we’ll do an auto enter just for example so now you can do that it’s just like any other table editor but what I’m going to do is save that and create a new form and call this my in mem and the data source will be also my in mem and we’ll place some fields on that form I have another configuration in the place field wizard that is more for for grids so I’ll go ahead and do ID and label and click okay and you can see that it placed them horizontal and it made the form table for you here so we get a grid I also have it it sets anchoring here so those those are going to grow with the with the form I’ll also disable horizontal scroll bars that helps with the display so now I have a form which is bound to the the design time in memory data source now all we need to do is if I show this form how’s it going to load the data so if I go back to my data source you can see under events it has all of the same events that any table would have plus this one called on load and I have a predefined method in the global scope called on foundset load and I will bind it to that and show it and you can see what it does in this method it’s passed in just the the name of the data source that is loading and it gives you the option to do an opportunity to create the data source to populate it so I just have a list of labels here in a array of strings the topics for today’s webinar I create my empty data set I iterate over those labels and I add rows to the data set and on this line here when create data source we pass in the the data source name is when you know that actually populates that that method itself hasn’t changed just just now that it you know we can call this on demand rather than proactively so if I did everything correctly what I’ll do is go back to my main form here oops not in and open it in the form editor and we’ll add the in-mem so now if I did everything right you’ll see that when I select this it comes already pre-populated with with the data that I had created and you can see the little message that I put in that method at the very end says data source my in-mem initialized with 10 rows so that all happened on demand when the form show I didn’t have to proactively do it so that’s probably a best practice for most in-memory debt and memory tables is to create them lazy load that way so you’ll want to sort of stick that in your tool belt all right back to our slides we have a few more enhancements to cover there’s actually quite a bit of enhancements I’m only covering the ones that are the most I think the most relevant some are just really odds and ends this one I’m particularly excited about you know the web package manager if you’re using the ng client already you know that you can import into your applications predefined web components and service and G service components and layouts we finally now have the ability to do solutions so the modules that we distribute on GitHub such as the search module the utils module etc we can now expose those to be imported through the web package manager it does a regular dot Servoy import right into your workspace and we also added support for third party indexes so it doesn’t just have to be Servoy’s components it could be your own company you could set up a place where you publish your components and modules etc and for your developers if you want to include stuff as binaries then you can do it that way so not too much of a demo but I’ll show you if I were adding to this application a module I could download it install with a web package manager and now you will see after it pings the service the index file on GitHub you see that Servoy solutions shows on the right and we already have all of the sfy utils stuff published as well as the security module that we’ll be talking about on friday and the search module that you saw right here in this application where we were doing the tech searching so I’m really excited about that because you know me and my colleagues we were developing modules and trying to improve extensions to Servoy all the time however it’s always been a bit tricky on you know how do we release it and give it to people and let them know that it’s available and now you can just go here and say what’s available and of course there’s always links to a wiki documentation in the project home on GitHub so that’s pretty exciting please take advantage of that we have added some enhancements all around importing and exporting solutions so one of the things that’s nice is for the for the dot Servoy export when you export a file you can specify the options that you want when you import it so you don’t have to remember this or if someone is importing it that didn’t generate the export and they forget what properties should be it’s all encoded directly in the import file so you could do that probably more importantly or I guess flowing from that is that you can also directly import it to an app server right from the export wizard so after you’ve specified the import options you can say here’s the URL and it will import it to your application server that uses a REST API that is now exposed from the app server itself to sort of consume an incoming import file and and imported into the repository so right now this only supports the dot Servoy kind of export not a dot war kind of export which includes you know the whole application server as part of the export another neat features that you can include web packages so if you have components services layouts things like that when you export a Servoy solution there’s just a checkbox to say include referenced web packages so that if you import those right now for developer only you import those it’s it’s going it’s going right into your workspace and including those web package zip files so that you don’t have to it used to be in 8.1 you did do the import then you get your warrant or your errors and your build markers to say you’re missing you know this web component that’s referenced on some form and then you have to figure out where to get it and if you got the right version etc now you can just do the import right into developer and it has everything another nice little thing is when you’re importing a module or solution that has a reference to a database it used to be that it would it would tell you and in develop or say you know do you want to pick another database to use as that database now you can actually prompt its auto create a database if you have a connect a database server set up they can do that like Postgres then you could just say okay create the database so that really an export file can bring in sample data the database schema and even create the database all in one go so that’s really useful for you know just sending someone an export to look at something and it generates everything for you don’t have to go through extra steps I can show that to you real quick in in the IDE if I were to just export this solution file export and you can see first of all that we have the checkbox which is checked by default to export referenced web packages and also down here if I were to check create import settings then as I come to the options here I have I have the import options here so like if I want to import you know sample data metadata etc so that that applies when you import if I check this box you can see that the next button becomes enabled because if I wanted to deploy to an app server I can actually give it the credentials and the URL to deploy to and if I run that then I’ll get the the response that normally you see in the in the server admin page will come right back here letting me know if it was successful or not so yeah that’s some pretty useful enhancements to importing and exporting another small thing the ng client ng utils plugin now let’s you add and remove a form style class at runtime so you can you can apply styling to a whole form you know dynamically so for example let’s say you were on a form and you wanted to start editing or something and then the you know fields become enabled and things happen you know you can change the style class of the whole form that way by just adding and removing the style class dynamically adding and removing style class on individual components is already already supported so again there’s a lot more enhancements particularly stuff I didn’t cover was on the deployment side on server scaling and stuff like that we hope to have future webinars specifically about those topics so stay tuned for that but you can first of all you can read all about what’s new because I covered it what I think are the most you know the nicest things to show in a webinar like this but there’s a whole lot of other small things as well so go to the release notes on the wiki and check it out you can download from server.com slash download you can find recordings of this webinar and all the other ones in the tech series we’ve done this is number 20 now so there’s quite a lot there if you want to go back and catch up go to our website the tech series page and please please please extra please give us feedback give us questions abuse whatever you want then we have a running Servoy form thread called 30 minutes with Servoy and it’s under the announcements page and it’s pinned there so it’s always there so go find us there and give us your feedback that is also the location where we will post the recordings of the webinars the slides the example solutions that you saw can all be downloaded from that form thread and we’ll be posting that stuff at the end of this week after we do the mini series I know we’re over time but I saw some questions yeah there’s a couple the shanforsaval let me read a few reactions to your demos impossible wow love the dark theme OMG that’s really awesome sweet very nice holy crap these are not questions this is some of the stuff coming in so is that all Bob can’t sit up and it’s not just Bob there’s a few there’s a few people and a question from Graham first of all he says I love the dark theme I have a number of seven dot four solutions that do not require NG is it recommended at the pages to import and develop them at 8.2 yeah I mean we showed a lot of stuff related to the NG client we also were demoing the solution in the NG client however I should distinguish that a lot of the the features that we showed of the enhancements are really in the IDE itself so it doesn’t really apply strictly to the NG client of course the web package manager stuff the NG utils plugin thing that I just mentioned do but name found sets for example don’t apply to to the NG client specifically the dark theme is of course just for the IDE the form hierarchy and the place field wizard also just in the IDE so absolutely stay up to date with the latest version of Servoy because this release was primarily focused on enhancements in developer okay does the new fields wizard work with responsive forums is something that one would like to know yes it does however keep in mind that things will be different but one thing that’s nice is if you were placing fields and you want to have a responsive configuration then you can automatically change the the type to be like bootstrap label or field or something something that’s compatible with responsive because the default Servoy components are for absolute positioning so you’ll have to probably set up your configuration in advance okay can I use the same workspace between 8.1 and 8.2 to allow me to test this a question from Rafi the same works that no once you once you use the same workspace it will flag the the file version essentially the Servoy version in your route metadata file for for a project and then if you go back it’ll say this has been opened in a new version so best to create another workspace and important into that workspace yeah create a branch and your svn if you want to okay then there’s a question from Paul for the specify import options directly in export file does that support extent to the command line version of building the dot Servoy file or is there functionality only built into Servoy developer uh I don’t know I don’t know I’ll have to check and get back okay I don’t see why why why couldn’t be in the exporter um well make sure to post this question on the forum so that you don’t forget to respond and there’s a question from Bob will those this is about the the exports to the server but with those settings stick with the solution so you don’t have to set them over and over every time you export yeah it’s it sort of sticks with the with the eclipse um instance that you’re using so um so once you do it once and you go back and do it it’ll stay there although if you if you I think if you change workspaces it changes so um it’ll be per works for a workspace yeah but it will stay there if you go back through it it’s there it’s the same as the word deployment word deployments like that as well it’s it already sort of sticky so it’s nice the question from arrows is there any way to change the font color on the dark theme uh I don’t know I think there’s more of any clips thing um so please post it on the forum yeah I’m pretty sure you can change the font to anything any clips yeah yeah and especially like the editors you can get really um really custom with the editors all right it looks like those are all the the questions so we’re running a little bit late but I think we covered a lot today um on Friday uh the etherd and uh last the eight point two launch series although in the tech series you can expect more on a specific eight point two themes and Friday’s going to be very exciting with a new security module that I’m pretty sure you guys will be quite uh at least I was very impressed and I saw it the first time it’ll be very impressed so don’t miss Friday thanks all for joining and Sean for presenting we will upload this uh recording in a few days thanks