Servoy 8.4 launch part 1: Delivering great UX: simple layout

Hi, welcome everybody. My name is Ayam Elman and I am very proud to present today’s webinar on which we are again launching a new version of a Servoy by doing three webinars, each dedicated to some of the key capabilities of a Servoy 8.4. And as usual, a shared development is going to be presenting. If you do have any questions, feel free to post them in the questions of the channel. We’ll make sure to answer as many as possible. Welcome, show. Good morning, Jan. Good morning. Okay, well, as you know, this is 8.4 launch week, having a party here by myself. We’re going to kick it off with a topic today about building, making user interfaces easier to build, and we’ll be doing another webinar on Wednesday a final webinar on Friday, so it’s going to be a busy week. We’ll try to keep these webinars compact, full of useful information, but not too long, so that you can digest it and take this along while you download and try things out and learn. We are in a release candidate, so this is not the final release. Once we get all of the minor quality issues worked out, as well as finalizing some of the documentation, we should be making a release early next year, so right after new year, sometime. Okay, with that, I’ll get started. The tradition here is that we always demo first, and then we give you an overview after we’ve shown you some nice things. I will switch over to a layout that I have built here. So, Servoy8.4 introduces a new way of doing sort of what you see is what you get. Form design, it’s not drastically different. There’s nothing new that you have to really learn other than a few things, but now we support a full, what is CSS positioning, but it’s not that complicated you don’t have to know too much about CSS to do it. So, what I have here is sort of a reference interface that I built that takes advantage of some of these properties, and what you’ll notice is that different from the classic anchor view where elements can grow and or slide, but that’s it. Now, elements can grow and slide, but in a relativistic way. So, not just based on an absolute pixel location, but also with percentages and combinations of pixels and percentages. So, to I seem to have a layout issue over here where some of the elements aren’t showing up. I am going to make a small adjustment here and send this to the back and save that and let’s try to relaunch that. Okay, there we go. So, now I get my fields here. So, what we’re looking at here is kind of the screen split up with a 20% object over here width-wise. These are more like 40% and 40% height-wise were split up about 50% and 50% down here, and I’ve sort of stuck an object over here to the right to see, you know, if something just kind of hanging off to the right, keeping its width absolute, you’ll notice that as I close and open the menu, everything is now resizing dynamically and it’s also relative. So, all of those percentages stay the same whereas the absolute things like the heights here and the width down here remain the same. They remain constant. So, what I can do is I could also bring this down to a much smaller level and you can see that if I want to have this sort of side-by-side view of these two little field containers, that’s quite easy to do and as I grow this way, they all move all parts of this move relativistic and if I grow this way, you’ll notice that I get kind of that 50% split between the top and bottom here are also maintained. So, this was not possible before a 4, unless you did a fully responsive form. But a fully responsive form is definitely more work, it requires a bit more expertise. It’s a bit more difficult to maintain. So, this makes kind of the same functionality a lot simpler. That’s why we call it simple layout. Why don’t I show you sort of, excuse me, a real-world example. So, if I were to build a form with some data on it connected to the database, it might look something like this. Slide this menu and again, you can see that everything’s kind of growing, sliding, shrinking. And again, we have this sort of side-by-side view of these forms. We sort of have the screen split up 1, 3rd, 1, 3rd, 1, 3rd, and then sort of two 3rds down here across the bottom right. And again, if I make this window smaller, you can see that everything is shrinking and growing relative to each other. You may notice that here when I lay this out, I put some strange looking values here on these blue labels. This was to show you what the actual position value that I assigned to each element looks like. And I’m going to also dive into the IDE and kind of show you where that set. But for example, you can see that the top blue bar here has this value and these go across top right, bottom left, width and height. So, it’s 10 pixels from the top, 10 pixels from the left, also 10 pixels from the right, and it has a height of 40. And you can see that the width is minus 1, which means it’s not set. And the bottom is minus 1, which means it’s not set. So, we’re going with the pixel locations for left and right, but then up to down, we’re using a height instead of a bottom coordinate. If we go under the hood and we look at this form, you can see that as I select one of these elements over here in the properties area, where we used to see, for layout, we would see position and we’d have, you know, x, y, width and height, and then an anchors property. The anchors property here is deprecated. And now we really do the full CSS position, which is top right, bottom left, width and height. And you can see that when I set the right coordinate and the left coordinate, I don’t need a width. And in fact, if I put a a width in here, it will ignore it because I’ve set left and right. Same is true for top and bottom. I set the top coordinate here. If I were to set a bottom, it would ignore the height, but since I haven’t set the bottom, it’s going to use the height. And so that just means that this thing is going to stretch the whole way across minus 10 pixels kind of around the sides. That one’s pretty simple, and it works a lot like the way anchoring it. Down here, we have something more interesting, this side component, the width of it is about 20%. And you can see that for the top coordinate, I use absolute 60 pixels. For the left location, I’m using, again, absolute 10 pixels, and same for the bottom. But for the right-hand edge of this, what this means is I’m going to make a calculation that goes 80% of the way from the right plus another 10 pixels. So I get that sort of little 10 pixel buffer from that 20% line or that 80% vertical line if you can imagine it. So you can see each one of these has their own position property. I’ll select this bottom area here, which kind of occupies sort of two-thirds of the width and sort of a little bit less than one-half of the height that’s anchored to the bottom. And you can see that for the the top coordinate, what we’re really doing is saying down from the top 50%, plus another 60 pixels, which gets us kind of from right in the middle here down to here. And then again, for the left coordinate, we’re saying that it’s this 20% plus another 10 pixels in. So it’s really easy to use the position and the calculation to sort of control the flow of all your components. I would also add that there’s a little editor here. If you click the value and click the button here, then you can select pixels per centage or calculation. And the calculation always takes the form pixels per centage plus or minus and then pixels per centage. So that’s pretty much it if you were to look at the second form. You’ll see that it’s very much the same, even though we use some different components here, we have a grid. You can see that the position of the grid over here is again using some percentages and pixel values mixed. So that’s the simple layout. It’s fairly straightforward and easy to implement. One thing that I would add is that when you’re if you’re migrating from a dot three or older and you have anchored forms, the anchored forms will still work because if you think about it, this is sort of a superset of anchoring. And in fact, at runtime, we actually convert the anchors into CSS position anyway and push it to the browser. So that will still work. But you also have the option in the IDE. You can right-click an individual form and migrate it to or upgrade it to CSS position. It’ll make that translation and permanently set it for all the elements in your form. And you can do that as a global setting too. So if you just want to upgrade and then convert everything at once, you can do that or you go through one by one and make the change. Once you do that, it won’t actually change how your application runs, but it will allow you to then extend it and change the position in a more nuanced way. Okay. So for the next example, I want to show how you can use the simple layout in combination with with the responsive layout. And maybe I should just point out the difference here, although maybe this layout here felt pretty responsive, right, because I can shrink it down to a smaller size like this, and it responds to what I’m doing. But there’s nothing in here that allows me to, for example, say that it is certain with the order details here are going to stack below the order list, something like that. For that, you need a responsive layout. So what I’m going to show now is how we mix a responsive layout with the simple layout. So we don’t have to do everything fully responsive. So in this view here, you can see I have a form here with basically right now, this is that uses the bootstrap 12 grid, and these are three, three, and four. So kind of one fourth, one fourth, and sorry, and one half, and three, three, and six. And you can see as I change these, they are adjusting accordingly. But if I shrink this down a little bit smaller, you can see now the map has stacked below the other two containers. And if I go all the way down to a small size, you can see that they stack one, two, three. So that’s the functionality you’ve always had with a responsive form. The challenge is that previously, you would have had to design all of this fully responsive, which is more work and more maintenance, or you would have to break these up into individual forms and then reassemble them in the responsive containers with it, with a tab panel container. But today, you don’t have to do that because we have an object called a CSS position container. And I’ll show you what that looks like under the hood here. If we switch over to that form, and probably I want to show the outline view. There we go. So now we can take this apart and deconstruct it a bit. Essentially, what we have is one row with the three columns. And the first two columns at the larger size, they take up a quarter of the width each. But at the smaller size, they take up a half. And if you’re new to the the bootstrap layout, don’t worry about it too much. It’s just these these style classes are they indicate the difference of that. And there’s another webinar back in the past about how to set this up. And then you can see that the third column, the one that has the map, takes up half the width at the larger size, but the full width at the smaller size. And and it’s those those columns and those class names that control how those containers kind of grow and stack when we reduce the screen size. Now inside each one is where we added the the CSS position container. So you can see here that inside there’s the container which contains then the elements. And the way that you could do this is you could just right click here and do add CSS position container, or you could come over here, find it in the palette, and drag it into the element that you want to drop it into the column or what have you that you want to put it in. Now once you’ve done that, we’ve added another feature in eight four to the IDE to the form designer that lets you now zoom. So what I can do is I can right click here and select zoom in form editor or right here on the form editor, I could right click and zoom in. Now this is not a different form, but it sort of limits what you can see. And it gives us that wizzy wig feel because you may notice back in the responsive editor it’s kind of hard to do wizzy wig because it doesn’t really make sense and responsive because what you get also depends on your screen layout and what’s going on. But once you get into the the CSS position container, it really is kind of wizzy wig again. And so this is a lot like the first examples I showed you where we have an element, we can click on it, I can look at the CSS position and say okay it’s 10 pixels from the top left and right and it’s 30 pixels high. You know these are going to occupy kind of 50% less the little padding around them. And you can see that here in the calculated value here. So it’s again like the previous example, the good news is I don’t have to deal with the bootstrap layout manager, I don’t have to deal with doing responsive design here. I can just build forms the way I’ve always done it. But then when I zoom out, you can do that here by right clicking zoom out or you can just zoom out here on the elements. But when I zoom out, I get the full thing again. So that’s kind of the gist of it and each one of these contains one of those. So for the map here, here’s another position container. And then once you’re inside that, you just get something quite simple. So those are the examples I wanted to show you. I think it’s worth it to just do a brief overview of some slides and then we’ll take some questions and we’ll talk about what’s on deck for Wednesday. So just to recap, when you’re doing the simple layout or the CSS positioning, everything is relative to the parent container. So in the case of regular forms, it’s going to be relative to the boundaries of the form, even if it’s shown in another container. So you don’t have to worry about the full layout of the screen, just the area that you’re working in. And the first thing that confused me, the very first time I tried to do this was that right and bottom, those coordinate locations or those position locations are relative to the right edge in the bottom. At first, I thought it would be all the way out from the left or all the way down from the top, like real coordinate pairs. But they’re not there in from the right and up from the bottom. And every value can be expressed in pixels or percentages. So in the basic position, you either put in a pixel value or a percentage value. And there’s six of them top right, bottom left width and height. You can edit them as one single string value. You can edit them individually. You saw them and I expand it. There’s also the little editor to pop up for to make calculations easier to do until you get used to it. And one thing to just remember is that left and right, if you set them both, it’ll override width. And if you do top and bottom, it’ll override the height. I did mention that that anchored forms are still supported and they can be easily migrated. In the other example, I showed you with the calculated value, just keep in mind that it’s always taking the form of pixel plus or minus, or pixel or percentage plus or minus pixel or percentage. So the simplest example here is you have something which is 25%. You want this child element to sort of float 10 pixels in from that imaginary line. Then you just do calculate 25% plus 10 pixels and it’ll get you there. And you can do that on all four dimensions of any element. The main use case for this, I would point out is that when you get a bunch of elements together, it can be difficult to keep track of where they are. So this always helps you kind of keep them relative to each other. Then in the second example, the more complicated one, we mix simple and responsive. And again, those are fully responsive containers, but then everything inside them goes back to that simple layout if you want. And so in the case I showed you, sort of it had three columns with different sort of responsive behavior. But then in the child elements, once we zoomed in, we got the three simple layouts. So the responsiveness is managed by the container, but the position is managed by the CSS position container. And again, when you’re in the IDE, you can right click and zoom in and out on any element now. And that’s supported. So that’s nice because then you can sort of forget about all the other stuff and nesting that’s around you and just focus on individual portions of the screen. And then what I find nice is that you get that what you see is what you get experience, which you don’t get with responsive. But once you zoom in to position container, then you can really say, okay, this is what it’s going to look like, you know, given this container and you know how it’s going to move a grow slide shrink, etc. So with that said, that’s, that’s our demo for today. We got more stuff later in the week. I’ll leave up some of these links. I would just point out here that you can go and download today. If you go to form.surboy.com in the announcement section, you’ll see the announcement and are in the latest releases, I believe it is. And you can go there and you can download the RC1, the first release candidate. And there’s instructions there for how to get started. There’s also a link to the release notes, but I’ll put that up here too. If you just want to browse what’s in the release notes, that’s on our wiki. And this session is recorded. So if you want to watch it again later, you can go to the tech series homepage. Do you have any questions, Yarn? Yeah, there’s a couple of questions coming in. The first one is from Martin. I missed the last webinar. Do you know when it will be posted? But yes, we are actually one behind posting on our website. So we will make sure to catch up this week and to post both today’s recording and the previous one as soon as possible is a good point. Then Bob Q6 says, I love the zoom that makes the layout much easier to deal with. And Steven has a question. What happens if you drag an element that has had CSS position sets to a new position on form? Okay, yeah, a good question. If you do that, it will update the position for you, depending on what you’ve set. It will generally just add or remove some pixels from that. So if you’ve used an absolute pixel value, it will just on each dimension, it will change that. And keep in mind that width and height are overridden by if you have both left, right, or both top, bottom selected. So it really depends on the way the component is already positioned. In a lot of cases, it won’t do exactly what you think it’s going to do, it is relative. If you’re using percentages and you move it, then you probably should go and check those values. Typically what happens is it looks good in the designer. And then when you run it and the container changes, then it doesn’t grow or slide or shrink the way you thought it would. What’s different about this and maybe a little bit more challenging is you really have to sort of plan out the way your layout is going to be. But I think you should plan out your layout is going to be anyway. So this just makes it easier to implement what you’ve planned. Okay. And another question, does it possible to scale the form size as well? No, no, this doesn’t affect font size at all. This is just coordinate location. Okay. There’s a question from Imra. Is what you showed? Does that is it fully compatible with mobile platforms and Android and iOS? Yes. If you’re using the the NG hybrid approach, then this will be supported because at the end of the day, those use HTML5 and the underlying mobile browser. So it will work the same. Okay. And the question from Rafi, I think you covered this, but it’s good to update, can form components be converted to see a zest position? Yes. Yeah. In fact, you noticed that I put a map in there to address that. Oh, oh, form components. Sorry. I misunderstood the question. Web components, I’ll answer the question I meant to answer first. Web components such as the map, you notice out of the box, you get it. Form components are the same. So if you place a form component inside a CSS position container, so either a simple layout form or a responsive form with the CSS position container, then you can do regular CSS positioning on the form component. So short answers. Yes. Okay. As a question from Gary, are you going to implement SCS S in the future? I don’t believe so. Okay. I don’t even know whether that is. I don’t know what it is. Yeah. Okay. Well, it’s maybe a good discussion to continue on the forum then. All right. Well, it looks like those are all the questions for today. So with one minute to spare, what is next? Okay. So again, we’re all about keeping the UI simple this week. So on Wednesday, we’re going to come back and look at how to do some styling in your applications where you don’t have to know completely all about CSS to be able to do it. So we’re going to talk about CSS less styling. And then on Friday, we’ll be talking about some performance enhancements. Excellent. So I’m very good. And I look forward to meeting all of you on Wednesday and Sean, thanks for presenting. Thank you.

Close