Servoy 2019.06 Launch Part 2: Layout Managers – Servoy Tech Webinar #60
Servoy 2019.06 Launch Part 2: Layout Managers – Servoy Tech Webinar #60
Today is the second installment in our three part series to kick off the second quarter bill this year of Servoy and I think this particular webinar has Focused is a bit more on some new stuff that we had We’re gonna talk about layout managers, but I Instead of just talking about what’s brand new because people might be joining with various levels of experience I thought we’d sort of rewind a bit and just sort of look at holistically What are the different ways to build forms in Servoy and what are the different layout managers that we offer? So in order to do that I’m going to do three demos. I’m gonna demo the sort of simple layout manager. We call which is based on CSS positioning Then I’ll show the 12 grid layout which is for building Responsive and adaptive applications and then I’ll show the newest addition to the layout manager family which is the flex layout container which allows us to do some other interesting things and What I hope at the end of this this webinar is that you sort of understand what each one does and why you might use each one and a little bit about how you could use it and how you could mix them together With that how the way why don’t we jump into our first demo and I’ve switched over to a Solution that I’m recycling from an older webinar. We launched the CSS positioning in eight dot four which was about six months ago so This is just a review of that positioning system and it’s really based on Kind of location within a container either based on pixel location or a relative percentage location and What I’m gonna do here is I’m going to Minimize this window and and what I’ve put on some of these labels here are What we’ve put into the positioning system in terms of instructions and it really goes top right bottom left With and height and those if they’re just numbers they could be in pixels, but they could also be in percentages and be calculated and as I Sort of minimize this You can see that things are growing and shrinking with the screen size and I could also do this top and bottom so for example you can see that that this middle Label here is kind of hovering right at the 50% mark top to bottom Whereas these two panels with the buttons and with the labels and fields in them are hovering Or growing and shrinking to kind of occupy 50% of this allocated area So they’re split up equally and this was all done without any of the more complex like grid system It’s just done with that that relative CSS positioning And and really what you can see is that It’s either a pixel location or in this case. It’s a bit of a combination you calculate for the the top here. It’s gonna be 50% down, but then 10 pixels lower and For for example here the right position is going to be 80% of the way from the right side of the screen plus another 10 pixels and it’s those little plus pixels that get us the nice little margins here between the different panels that we’re showing. I didn’t have to do that with CSS like you know margin and padding or everything I just did that with purely with positioning So show you another example of how this might look with a real screen You can see that as I grow This the the fields themselves are kind of occupying 50% each of this space Whereas the grid below is occupying kind of a hundred percent of this inner space, but the grid over here stays at a percentage width of the total screen So it gives you a lot of control without having to really dive too deep without having to write any code or do any special lay out tricks And at the end of this will take a look under the hood at that I wanted to sort of talk a bit about the responsive layout As it can mix with a simple layout We won’t get yet into full responsive using the 12 grid system But this is using the The grid system to set up how the containers will be but inside we still have this simple layout mechanism, so you could see that I have three different containers here each of which are Going to be responsive to the screen size But the content inside is positioned with the simple layout mechanism So just doing the pixel coordinate or the percentage coordinate location from the edges or width and height And what I’m going to do now is again, I’m going to start to minimize this and And what you’re going to see is something you can’t do with simple position alone You actually need to do the responsive because what responsive means is that it adapts to the screen size So as I narrow this screen, you’ll notice that at some point The map drops below the other The other two containers And I can’t remember if I keep going. Yeah, I do all three if I keep going So, you know, for example, if this were on a phone, you get a layout like this But if you look at it on a desktop, you get it exploded this way So in order to really have a layout that That Response to the screen size You have to use the grid system, which is Definitely more complex and a bit more work to layout The good news is that since Servoy8.4 You’ve been able to mix the two of those and actually put the simple layout inside the containers And I’ll show you under the hood what that looks like as well So let’s let’s dive into the IDE for a moment and have a look So in the in the first example Let me just clear some space here You can see that it’s just really based on this CSS positioning uh Property and if I expand that you can see that it is really top right bottom and left Um, and that will be you know pixels from any of those edges or If they’re not specified, it’ll use the width and the height. It’ll ignore the width and the height if you Don’t set the The left right and the top bottom in such a way One thing that we added in this latest release is going back to earlier versions of ServoyWe had something called anchoring which kind of predated Exposing CSS positioning right here in the developer And you were able to just kind of right-click an element and anchor it Where you wanted in the form Of course CSS positioning is almost sort of Super set of that it lets you do more But if you wanted to quickly do the anchoring we brought back the context menu So now you can do You know anchoring and pick top left right bottom etc Or or do it this way and what that will do is it will calculate for you what the CSS position Coordinates should be and it’ll plug them into that that value So if you’re used to that feature or you want a little shortcut You can do that and you can do that on select a bunch of elements at once and choose the anchoring from all of them And it will it will calculate that for you Um the other thing to point out is I’m going to select this one that actually has a calculated value And if I click the Button here it’ll it’ll show a little dialogue which will sort of plug that in for you So you don’t have to type it in perfect yourself if you want to just use the dialogue you can Excuse me so that that is the the Simple View the other example we showed sort of a form And what you can see is that I have like a grid over here a grid component on this form and if I look at the position of that Again, it’s doing a bit of relative position here. It’s doing about two-thirds the way over from The right edge. So that’s why that that grid was growing and shrinking but only proportional to the whole screen Whereas For example, some of these fields are doing one-third of the screen size Plus a bit of padding here of 20 pixels So you could see that That’s why those sort of look equal space and they were growing together So that’s kind of a real-world view of how you do it if you look at the grid down here it’ll it’ll again look like You can see that the Left coordinate is you know two-thirds the way in to pick up where this one left off, but the right coordinate Is going to just be 10 pixels pixels from the edge. So it gives you that that level of control and it’s pretty easy to understand and to plug those values in The third example that I showed Was a mix and In this one you’ll notice that we’ve actually placed Some of the 12 grid stuff on the form I’m going to switch a demo in a minute and sort of explain how the 12 grid works But what I wanted to show here is that the simple Positioning system can be used inside the grid system So that you don’t have to go really deep in response of layout design You can kind of specify the rules for your screen kind of at large and then fill it in with Some of the easier stuff and so what we really have here are these these three responsive columns And they do different things at different sizes But inside them what we’ve done is we’ve placed this component called a CSS position container and you can find that right here on the palette You could drag and drop it into a responsive container You could also right-click a responsive container And I’ll do it down here right click and add and then you could pick it from this menu as well I like to often work on the On the outline at the right helps me see things more clearly So really everything that’s inside and something that we’ve added that works really nicely is Is the zoom so if I were to click on One of these CSS positions. Let me get the first one And I can right-click here and zoom in full editor or you can see there’s a zoom button up here Which we added in this latest release So there’s a little context. There’s several ways to do it. It’ll actually drill in Unless you just use kind of the classic Simple layout positioning form editor here for dragging and dropping and positioning your components without having to worry The outer structure so so really if you say this is the rules of my my form with a few responsive containers You can zoom in and the rest can be just done more simply these are you know, you can just drag and drop these you don’t have that that more cumbersome hierarchy And When you’re done doing that you just click zoom out with that Magnifying glass button and it’ll it’ll re-render the form Back in the responsive view so that’s kind of how you mix and match the two I do want to just kind of touch on The 12 grid system for those that might be New to it and explain a bit more detail how it works So I’m gonna Activate another Solution which if you’re new to Servoy is like an application or a project That I have in my workspace and I’m gonna go ahead and and launch that Okay So as I said before the response of design or the I seem to have double-click the launch button and kill one of the sessions There’s the other one Okay So as I said before the Responsive design or the responsive layout manager or the responsive grid system Is a grid system that lets you design how Components will behave depending on the screen size It’s the depending on the screen size that is the important part and the main reason you want to use this as you want to support Different size devices So in the 12 grid system, there’s really a few viewports and what I’m going to do is sort of minimize this and Click and drag and show you the different sizes. So there’s the large viewport And what you’ll see is that some of these I have set rules on and as it gets smaller They’re going to do they’re going to take up different spaces in the grid system depending on on the viewport size So as I kind of shrink down to medium viewport you can see that The first two One and two instead of taking up half of the grid they now take up a full row But they stack one under the other And that’s the medium viewport that could be a small laptop or large tablet This could be a tablet and now you can see three and four and five and six did the same thing And as I keep going This could be The extra small viewport could be a phone. Anything below that is extra small And just to give you an idea what that could look like in a real world example Again, here’s a bit of data bound stuff. These are just Customer records from a sample database and what I want to show here is that As we go down one of these responsive containers having simple layout stuff inside them There you go you can see that at a small viewport they stack Same three things and they stack But if I keep going I might want to set a rule that the customer chooser is going to hide at the extra small viewport So you can see that that list box that allows me to select the customer It shows up in the small viewport But it’s gone in the extra small viewport So you may want to have things showing and hiding or changing depending on the viewport size And that’s what the responsive layout manager gives you And the I don’t want to get too much into how it works But just to look at that one example we had You can see that there’s quite some nesting in the In the outline here, but it’s really That I had four rows and then each row had some columns in it and it’s these classes here these excess 12 LG 12 those are all indicating what it’s going to do At different sizes. I probably should make this bigger so you can read it and you can see that That some of these are going to be take up the full size for everything Whereas I start to put Let me see here Some of these like LG 6 means it takes up half of the grid because there’s 12 grid system at Once you Are in the large viewport, but as you as you shrink down and you go to medium It takes up the whole thing and so the one next to it will stack Which is what we saw with some of those buttons And then going farther down you can see there’s some more rules about how well it takes up a third of the grid at a medium Half the grid at a small and then The whole row at Extra small so just by simply adding some of those style classes you can you can dictate what’s going to happen There’s also you’ll notice that the text wasn’t really switching here I was actually showing and hiding the different buttons for the viewport here and some of these Style classes. I’ve added are visible MD block What that what that indicates is that It’s going to be visible only at medium and then by default It’s it’s hidden so each one of those as I was scrolling In the in the application here and you can see that it changes the actual text It’s really showing and hiding those based on the screen size so it’s that You can change where positions or how much space it takes up and also whether it shows or hides and that’s kind of the gist of it So that kind of catches you up to a bit of what we where we at our today and also a bit of the new stuff What I like to do is is go into the Flex layout manager or container which we added just in this last release And it’s a bit different than it responsive. It still feels like responsive It’s still dynamic, but it has a bit more to do with content and for like how Different parts of the screen flow and maybe push things out of the way how space is allocated where the 12 grid systems very rigid It takes up a certain percentage of the grid and That switches on or off depending on the viewport the flex layout is Not depending really on the viewport. It’s more about how much space is available and how that gets allocated and So it’s first start by launching this one Okay, so here we have kind of three Containers on the form and what I want to show you is what changing some of the properties do so we have here a flex container Form I should Give a bit more room here so you can see And then inside the flex container there are three flex items And so the container kind of controls How spaces distributed the first and probably most obvious is the direction so I could switch that from From row to column And you can see that it’s going to stack them instead of arranging them and if I save that it’ll broadcast it into the Into the client The other thing I’m going to put that back to row The other thing is how it justifies So I want the leftover space now this is driven by content So it’s really the size of those buttons and I’ve specified that through some CSS It’s really the size and it’s also specified by the content itself how much text is there That drives how much space is left over and the container decides how to distribute that space So you may want to say that I want all of the space between the components to be allocated equally So you’ll see what that’ll do as I save it and Let it broadcast in here is that it pushes to contain the items and the flex items have the gray border Whereas the actual content are these blue buttons It pushes them to the edges of the sort of that layout and it evenly distributes all of the space in between the items I’m going to change that to something a little kind of subtly different which is I want to evenly distribute the space around the items So now the space Around outside the items is evenly distributed so between the left edge and the right edge and then Space evenly means all Also subtly different that the these spaces here The four spaces are all even so the kind of the margin area here and and in between is all the same The The other the other thing you can control is is where do these things Align within the container right now is that they’re aligned center and you can see there they are vertically aligned center I could say that they’re going to align to The start which depends really on the direction so in this case it would be the top And if I want to switch that To the bottom I go to flex and And now you can see that they’re lining up along the bottom The other thing you could do is say well they’re going to stretch And so now you can see that the contain the item itself the flex item or the the inner container is really stretched top to bottom It doesn’t so much effect how the content shows up unless the content itself is also having some relative positioning maybe it grows Or you know That depends on what you put in there, but it’s it’s more the rule of how that space will get allocated And there’s something called baseline Which will line things up sort of on it will look the same as center in this view But it lines it up sort of on the baseline of the of the text here The other thing you have control over is inside the items themselves so One is how how components will align inside the items and it’s it’s really the same The same properties another thing you might want to do is say I want to let left over space be allocated Specifically to one item. So let’s say I had in In the third I third flex item here with the big button I want to say that that one’s going to grow One and what that means is sort of like one multiple or one division of the leftover space And now you can see by looking at the gray area This is how much space is really allocated to To that container The height is driven by the content and the width is normally driven by the content But now the width is driven by How much space is left over and everything else gets squeezed if I also set Say the The first one to grow by a factor of one Now you can see that these two are equally spaced to take over the leftover space and this one only has enough space for its content And what I could do is say yeah, but I I want the the big button to have Two times the space of the of the small button. So I’ll set that one to two So it’s really going to be two to one to zero multiples of the leftover space So now you can see that that this one grows a bit this one grows Double of that and this one stays So it really gives you control a use case I could think of would be That you have sections of the screen where you want to make them You behave differently depending on the content and have different rules Another area we see is where you just have a flow of say some buttons and You want to they may take up different space depending on the content that’s in them Or some sometimes a data-driven labels. It’s really all about content. It’s not about Like the grid system which is very top down or the CSS position which is Very absolute This is more really driven by the content The good news is that you could combine this layout manager also with The other one so this is by default. This is on a responsive form Which means you could go ahead and add this into the grid system for example And this could just be one small part of a larger form that is based on the grid system But the content inside is going to drive what happens just within that layout manager You could also put in a Positioning panel say inside one of these This is the use case. I thought I’d like to show you if I had more time is to take the simple layout put it inside this Like I did with the with the grid system and then show you how How you could arrange those with that But again, it makes more sense that it’s all kind of responsive because it’s it’s content driven One other thing I’ll show you is I’m gonna set the I’m gonna set the justified as center And I’m gonna turn off the the grow For both of these Yeah, that should put them and then What I want to do is I want to actually hide these buttons and show you how they things can collapse in all One another You’re still going to see the container, but I sort of made it so that if I push this button it toggles it You see the little container here because I’ve styled it that way and you can see the the margins The container itself isn’t gone, but Typically you wouldn’t see this the container you wouldn’t style it so that it’s visible But you can see that the space is actually is actually removed except for The padding and the margins and stuff and if I click this it Click this it toggles it back So that’s how you could Say you had some flowing content, but depending on you know something from the data Some things are showing and hiding and you don’t want to leave holes in your screen And you also don’t want to write a bunch of code to repositioning things or dynamically add and remove style classes etc This it flows more based on content and that’s kind of the point So those are the demos I can jump into some slides. Well you guys think of some questions and we’ll just do a quick overview of what we saw So Far away the easiest And most common way that people are building applications with Servoys with the simple layout. It’s all based on The position of an element within the parent container and it’s really those six Those six coordinate positions which are top Right bottom left and then width and height and depending on what you put in for them For example width and height will be overridden if both left and right are put in But if you were to just say put left and then not right But you put a width, you know that is going to sort of anchor left at a certain width So that really gives you control about where things sit within a container unless you do a lot of you know sort of fluid kinds of layouts without getting into Some of the more complicated layout managers Another thing you can do is you can use those relative Positionings so you can see that I have the child element which is position 25 pixels Sorry 25% from the left But then we also want that little padding of 10 pixels Well, then we just put in cow 25% plus 10 and so you have these different calculation rules which lets you Get a bit more nuanced Um Just skip over that I think it’s obvious Um one thing I really wanted to make sure you understood is that in one of those examples I showed responsive containers that actually contained um Some of the simple layouts so the way that works is you just have a responsive container It could be like a the grid system and it could be a column within the 12 grid system But inside that you just have a regular CSS position Panel and you saw that in the form designer I was able to zoom in and zoom out of that Um So you really would want to use the the responsive layout if you want to have Rules about how things are going to look depending on screens height screen size It’s really ideal for those multi-channel applications web to have a phone and you want to kind of have one screen That looks right on different devices That’s the the main use case for doing responsive If you don’t need that I really recommend that you do not use responsive because it adds a bit of overhead It’s a bit more complicated. There’s a bit more nesting as you saw So I would say stay away from responsive for you know pure You know desktop browser type applications The flex layout is really based on content and it’s really about how your screens flow with the content We saw that there’s rules really on how space is allocated between content or within the containers inside the the main layout container So it’s if you have stuff which is really content driven Where you know the content is going to be changing? Then you want to go for the flex layout and you can you can drop that in on any any responsive form Keep in mind that it’s not adapted to screen sizes. So it’s not like the 12 grid system So it’s not like you can say I want my flex layout manager to look this way on mobile and this way on a desktop But you can easily mix it with the 12 grid system which can control that There’s one other thing I wanted to point out and this was For those of you that are Servable experts. I hope you noticed that every time I was launching the client I was actually launching the ng desktop client And this is one more announcement that I wanted to make in terms of our offerings This quarter with the latest version of Servoy. The ng desktop client is the same ng client that I would I could run if I launched this in my browser so I could I could launch this in Chrome And you can see that I get this right here in my browser with my address bar But what I was doing today which was launching this in the ng desktop client Which actually puts a And icon down here in my system tray I’ve launched several of these I should clean this up It puts an icon down here in my system tray and I get a native You know, I’m on windows 10 I get a native windows Application that has the the application that I built embedded in it. So it’s still a pure hmo5 CSS type application, but it’s now Embedded in a native window Which gives me some things This is just the sort of bare metal version of our ng desktop But we’ll be shipping this with every future version of Servoy And we’ll begin to add plugins that allow you to get to the desktop itself. So for example, file system access access to hardware Access to things like scanners or Installed software executing system commands that type of thing What you normally cannot get with a browser application You’ll be able to start to make those bridge that gap By running the ng desktop Client here what we’re going to have in the future for that too is also with the ability to To come in here and file export and actually generate the binary That you could distribute to your customers or your users That they could then put on just install as a regular executable On it still connects to a you know to an application server So it still fully runs over the internet. It’s just a nice way to distribute an application and if you really need Those desktop features and the desktop integration you can have that So I I wanted to point that out that that I was doing that each each time here when I launched a demo And that is now available for you to try out with your applications and we’ll be adding plugins to that With every release and and perhaps in between every release because we get we can actually update that without updating the servoic core So that’s that’s pretty nice