Better Form Design
Hi, my name is Janeleman and I’m the founder of Servoy and very proud to announce a next generation of Servoy, 8.1. In Servoy 8.1 we have introduced a new HTML5 forum editor to further enhance our HTML5 capabilities and make it even easier to deliver applications with a great user experience. It also comes with easy ways to create responsive applications that we will demonstrate in this webinar. I’d like to welcome Sean Devlin, Senior Engineer at Servoy. He will be demonstrating in today’s session. What we’re looking at here is a sample forum that I built and it’s showing in my browser. And I really want to explain sort of the concept of what we mean by responsive design. And really what it means is that the layout of your screen is responding to the size of the device that is being shown on. We hear the term mobile first a lot, responsive design a lot, but really what it means is that your components on your form or your screen are arranged to suit the device that the user is using. So what I’d like to do is I’ve laid out 12 blocks here and I want those blocks to rearrange themselves according to some rules depending on what kind of device I send on. Right now I’m on a large desktop but I’m going to simulate that I’m viewing this from different devices as I drag my browser window. So you’ll see that everything is resizing and at a certain break point we’re going to hit the medium view port and you can see that between large and medium nothing changed except for blocks one and two. They stacked on top of each other. So this simulates a medium size desktop and as I keep dragging we’re going to go to a small view port or a tablet and you can see that now three through six which were on one line are now stacking below each other. However they are still showing with side by side so there’s two items side by side but they did stack below each other. Then through 12 you’ll notice also stacked below each other but their arrangement is three columns across. And if I go all the way down to an extra small view port you can see that one through six completely take up a whole row and seven through 12 are now split into two columns. So that’s really the idea behind responsive design is to have a screen which is compatible with the device that the user is using. So that’s my 15 second demo. Let’s talk a bit more about sort of the agenda of what we’re going to do today. It’s a pretty short webinar we’ll keep it to about 25 minutes with some room for questions. The focus is just on how to do what I just showed you. We’re going to talk about layout managers because that’s a new concept in Servoy8. We need to introduce this concept to be able to support responsive design. There’s also a new form editor. We also had to introduce that because different quite different from absolute layout designing responsive form really requires that you visually interact with the editor in a different way. We’re going to cover the basic principles of responsive design. We’ll do some tips and tricks and at the end of the longer demo we’ll build a responsive form so you can kind of see how it’s done. So there’s this new concept in Servoy8 called layout managers and we introduced this because we really had to decouple the form editor from the layout structure that is driving responsive design. So we’re going to look at the layout manager in the form editor but I think it’s important for you to understand that Servoy8 is not just bootstrap grit. That is what we did. That’s the one layout manager that we’re currently shipping but in the future we might ship additional layout managers and it’s even possible that a user could create their own layout manager to be used in Servoy8. So in the future maybe we offer flex box or a different kind of responsive manager. There’s also a new feature in the IDE called the web packages manager. I’m just going to show this a little bit in the demo and we’re going to see this more throughout the week especially on Friday when we deal with web components. But just to explain a little bit about what this is is that because we’re decoupling some things from the core product we’re able to distribute those in a different way. So we have layout managers but also components and services that we can bundle and distribute sort of independent from the platform that you used to develop and deploy applications. So if you want to grab a new component you can incorporate it into your project without having to get an upgrade of Servoy8. So this is really good for our release cycle. We can iterate much faster on components and services and improvements that we make there than we can on the core product. So you don’t have to wait for the next version of Servoy8 to get the next component. It’s also conceivable that we have third party additions to the web package manager so the community can also contribute to that. So I’m going to show that in the demo. We’re going to show the form editor and really what it is it’s an HTML5 based preview that allows us to develop responsive forms. It has a wireframe view which sort of shows the outline because the structure of a responsive form is really important in an absolute form. It kind of just puts stuff and that’s where it goes and it’s really easy to visualize but we needed a new way to visualize sort of the layout manager. But it’s still Wizzy wig because there is the preview mode and you can see what your form will look like actually in HTML5. It’s quite nice. A bit about the basics for responsive design. It’s very different if you have no exposure to it. It’s very different from a map. Absolutely. Absolutely. It’s kind of easy to visualize because everything goes in a specific spot and that’s where it stays. But responsive is all relative. Components are relative. It’s in position to the surrounding components and also the content that’s inside them. So depending on screen sizes and different content, things can be growing and shrinking and sliding and even hiding and showing. So it’s really about containerization and these layout managers and the structure which dictates how components will behave. Something of the specifics about the grid layout, the bootstrap 12 grid is what we currently ship to do responsive design. That’s all about device size. There are sort of predefined break points in the grid system at which the components in your layout can respond to. So you’ll see it. It’s kind of difficult to explain without showing but it’s actually just CSS. So it’s that easy. All you have to do is put style classes on some of the containers and it will tell the manager what size they should be for different devices. So you can say for a desktop that this column is going to take up 25%, but when it shrinks down to a tablet, then it will take up 50%. And the layout manager handles all of the details. So if something next to it no longer fits on the first row, it will stack beneath it which is what we just saw in that little demo. And then everything is about nesting. It’s about where it is relative in its parent containers. So the thing about responsive design is that you can nest pretty deep depending on what kind of structure you want. Some sort of tips and tricks we’ll look at. We can toggle things to show and hide depending on different devices. We can actually save and reuse containers so we can sort of build a structure and say I want to say this as a template which is a feature that’s been around forever in Servoy and now it also applies to the actual responsive structure that you want. You can save that as a template and then drop it on a form later. So it’s a little bit, I would say a little bit steeper learning curve to get started in absolute layout. But the good news is that once you arrive at sort of a structure that you like, you can save as a template and then add it to forms and rapidly reuse it. I think one of the coolest parts is that you can mix and match absolute and relative layouts. It’s not like you say my application is going to be completely responsive because that’s actually really difficult to do. You have to think of everything. I think really the way that we’re seeing that it’s most productive and as the best experiences is that we really have like the content forms kind of stay, or absolute, but they can be inside responsive containers and then you really get the best of both worlds and we’ll see what that looks like. So enough of the conceptual stuff, let’s dive into a bit longer version of the demo. I’m going to switch over to my Servoy8.1 IDE. And to start with, I did mention a lot of things. The first thing I talked about was the layout managers and the way we’re distributing that through the web packages manager. So inside my project, you’ll now see a new node in the solution explorer. For those of you who are familiar with Servoy, this wasn’t here in the 8.0 version. And this is new, it’s called the web packages manager. And you can see that beneath this node, I have some bootstrap components and the bootstrap 12 grid container components. The way that what this node does is it sort of aggregates everything that you’ve added to your project that’s not part of the core offering. And the way that we can get stuff in and out of there is by launching the web packages manager. And this is really just kind of a browser that shows up in right in the IDE. And it’s going out onto our site and sort of seeing what’s available. There was just some stuff added today by some of my colleagues. And it’s organized in NG components, services and layouts. Now components and services will get into more later in the week, especially on Friday. They’re really just things that you can put on a form and then services are services that you can invoke inside of a browser from your code. And it operates just like a plugin. So we’ll see some examples of those. But really what we needed to drive this demo is the bootstrap 12 grid layout. If I click here, it gives me a description about what it is. So it’s possible we could distribute more layout manning and they would just show up right here. And you could pick the one that you like and to build the UX that you want. So I’ve already done that. What you would normally do is click and download and it would just add it right into your project. And then you would see all of the components and containers here in your solution explorer. And then also here you can see them in the form editor. Speaking of which, let’s jump into the form editor. You can see that this is quite a bit different from the classic editor, which is more for absolute positioning. The first thing that you’ll note is that we get a full preview. Really we’re seeing HTML rendered right here in the editor and it’s showing what our form would look like. Across the top I have some buttons here. I’ll just explain what those are quickly. I can highlight my web components or not. That’s helpful when you get a pretty complex structure to be able to see the difference between components and containers. I can save as a template. I mentioned that earlier and we’re going to incorporate this into our demo in a few minutes. I can toggle on and off the wireframe. This is convenient because if you toggle it off then you actually really get to sort of preview mode. When you toggle back on you get sort of the gray wireframe around the different levels of your structure. One of the cooler features is that I can toggle between view ports. Right now I’m on a desktop but I can collapse this down to a tablet or even an extra small phone type view port. So down the side here I have my palette of components that are available. You’ll notice that I have some boost-drop components. I have some of the 12 grid sort of container components or helper classes there. You’ll notice that I don’t have the sort of default Servoy components. When you do a responsive form then you use pure web components that you can add in there. You’re not limited just to bootstrap components. You can add all sorts of other third party components and we’re going to see that more on Friday. So over on the right here you’ll notice that I’ve split my outline view from my sort of traditional properties view for the form. The reason that I’ve done that is that the outline sort of the structure of the markup in the form is a lot more important in responsive than it is in absolute. We don’t really pay attention to the outline. But here it’s all about the structure and it’s all about nesting as I said before. So when I’m working I usually leave the outline up and then I can see kind of the structure of my form in there. Let’s dive into the structure a little bit. You’ll notice that at the top level I have a container and beneath that container I have four rows and those four rows are sort of the viewport title here. The one and two blocks, the three through six block and then the seven through 12 blocks. Within a row I have columns. So in for example my second column I have my second row I have two columns here and it’s possible that columns could also contain rows so you can really get sort of nested kind of structure. You’ll also notice that when I select a column and I look at the properties down here I have some style classes assigned to it. These may look kind of like gibberish if you haven’t seen them before if you’re familiar with bootstrap. These are the sort of breakpoint styles and I’ll explain what these are. So I have assigned two classes to this column. DMD 12 and the LG 6 and really if you look at the, I’ll show you some of the code complete for some of the column classes. We really have several categories, LG, MD, SM and XS. That’s really large, medium, small and extra small or large desktop, medium desktop, tablet phone if you can think of it that way. And then there’s a number and the number goes from 1 to 12. So in this example I have for my medium, for my medium size display I have 12 and for my large display I have 6. And what that means is there’s the option to go all the way up to 12 which means that the column takes up the full width of the container down to 1 which means the column takes up essentially 1, 12 of the container. So it’s all a relative sizing. It’s not nothing absolute about this. So what I’m saying by adding these two style classes to my column is that for a medium size display I want my column to take up the whole width of the container that it’s in. But if I move to a large display I want the column to take up just half. And so what that means is that for my large display you saw that 1 and 2 blocks 1 and 2 were side by side and when I shrunk down to the medium viewport they stacked one below each other. What’s driving that is merely the fact that I assigned some CSS to the container. There’s nothing else, there’s no JavaScript or anything like that. This is all just layout and CSS. So it may take a minute for that to sink in if it’s new to you. But just be patient. It took a few minutes for me and then once I got it it was easy. It’s just CSS, it’s just saying what percentage of the width do I want to take up for a given device. So if you look at some of their columns in the structure here I have now in the next row down to 3 through 6. I’ve done a bit more stuff there. For the medium devices they take up 3 which is essentially 1-quarter of 12. For the small devices like a tablet they take up half and then when we go to extra smaller phone then they take up the whole 12th the whole row. And so when we saw in the demo here when I collapsed down from large to medium see they stay the same but as soon as I hit the small then they take up that 6 is what’s driving the sort of 50% split here and they start to stack and then when they go to 12 at the small viewport then they take up the whole row. So that’s really it’s just a bit of CSS and then I’ve done the same down here in the last row you can see that in the style class for the extra small category they’re taking up 6 which means they still stay at sort of 50% for the 7 through 12 blocks everything in that row. So that’s really the basics of it. There’s one other thing that I did here you’ll notice that as I’m sliding here I’m changing the text or the block there from small viewport to medium viewport large viewport etc. So what I’ve done in the first column is I’ve done a little bit of tricks. I put actually 4 buttons in there for labels and you can see that the text for them is just a different large viewport medium viewport small viewport etc. And what I’ve done for each of those buttons is I’ve assigned some style classes for the visibility for different viewports. You can ignore the other style classes though just make them look the way that they look but this one right here visible LG block means that for this for this particular component that’s selected the one that says large viewport it’s only visible for the LG cutoff the large cutoff. And so really what’s happening is I have 4 buttons here they all have different text on them and they’re all showing and hiding in their column for different viewports. So that’s what’s sort of giving that view that as I’m sliding or changing my device I get a different visibility. So that’s one of the tricks that you can do to make some things you just might not want them to show up on a phone for example. And so we’ll look at a use case of that that’s more real world. So let’s take a look at another form in the demo. You can see that I have a second form here called an example container. This is maybe a more real world use case than just a bunch of blocks. And what I’ve done here is I’ve positioned some components and some forms in a responsive container. And what I want to do is that when I change my viewport from a large viewport to a medium down to a small at the point where I hit small you can see that the fields which were sort of side by side that the company information and I didn’t give that text that says header label but the contact information they stacked below each other now. And then now the selection list here is taking up the full column versus being taking up I think I had set that to take up one quarter of the area. When I get all the way down to the extra small viewport what I’ve done is I’ve hit in the selection list and I’ve shown a little button to toggle it to bring it back. So I can sort of show and hide that list by toggling the button but the default behavior is that it’s going to hide when I’m on a phone. So maybe on a phone I don’t want to see the list unless I hit a menu to show it. So let’s dive in real quickly and look at the form for that. I’ve called it responsive container one. I’m going to open in the new form editor. And this is one of the tricks that I mentioned about mixing absolute and relative layouts. So this is just very similar to the other structure that I had. I have the row at the top which just shows what viewport we’re in. Then I have one more row with two columns in it. One that has my customer picker form and then another that has my responsive detail form. What I’ve done is I’ve done a little bit of nesting. These are just tab panels. So the customer picker if I look at the tab panel and the form that it’s showing. This is just a plain Jane regular Servoy absolute form that you’re probably familiar with looking at. One thing that I would point out is that even on the absolute forms you can toggle the HTML5 view if you want to see sort of more of the preview of what it looks like. So you can do that and then you can toggle back to the classic editor by hitting this HTML5 logo. If I go back to my responsive container and look at the one that’s in the other column and navigate to that form. This is another responsive form. So I’m showing here that you can also have nesting. This is another responsive form where I have two detail forms which are side by side and this was the company info in the contact info. So if I jump into one of these then you see again it’s just an absolute form. And what I’ve done is I’ve turned on some anchoring. You can see that the components are anchored left and right. So that’s what causes them to grow and shrink because anchoring has always been a part of Servoy. So if you mix absolute forms with anchoring with relative containers then you really get the effect that you want. And so really in the responsive detail these are 50-50 and in the outer container it’s sort of 25% and 75% based on the 4 and 8 classes on those column containers. So that’s really how it was done. And again if you look at the tab panel here I did add the style class that shows that it’s visible for large, medium and small but for the extra small it’s hidden. So it hides when we go down to the phone size. Similarly on the detail one I did put a little glyph icon there for that toggle button. And even though this is not a responsive form the CSS works and all I did was put that this is visible for the extra small block. So again these are sort of internal bootstrap 12 grid classes. These are sort of helper classes and this turns that thing on and off as it goes in and out of that extra small range. And then I did do a method to sort of toggle that the list view shows and hides but that’s just a line of JavaScript. So we’re getting close on our time limit. There’s one more thing that I wanted to show you which is how do you do this? I mean I’m showing you forms that are already built but I want to assure you that it’s really not that hard. And so what I’d like to do is go back to my let’s say responsive grid form. One thing that I can do is save the entire container as a template. And I’m just going to call this my template. Click OK. So you can see that in the list of templates here. Well now I have I had you can see that I practiced this. I think I named it my template here. The other one is a misspelling. I have a template object there and also in my resources project underneath templates. You see my list of templates templates have been around forever in Servoy. There’s nothing that much different about this. But if I want to start from scratch. I’m going to create a new form call it new form. I’m going to check the responsive layout checkbox here. This tells us that that this is going to be responsive form. It’s going to open in the new form editor because you can’t really look at a responsive form in the classic editor. I’m going to click and drag my template onto the form. I think I click there on one. I’m going to do that. Sorry. My template. Now that’s the wrong one. Maybe if I named it this. There we go. Sorry. So there it is. Well, so now what I can do is I could go through and sort of get rid of these buttons because they were really just these blocks. They were really just placeholders. And probably in reality I would save my template to not even include those. And it would just look like this. So now it’s like, well, the work that I put into designing the template and how things are going to work. The structure I just do once I save this and now what I could start to do is I can drag components. So I could put some bootstrap components on here. So check boxes and some buttons. In reality I’d probably be placing tab panels with absolute layout forms or even more relative forms inside of them. I did also make some templates for some of those colored buttons that I had because anything can be a template. So you get the idea. And then if we want to sort of see this in action, one more over here. You also notice that as I mouse over it sort of highlights the container that it drops in and it fills out the content here in the outline. So it’s pretty easy to do. And if I were to then go back to my main form, which is just a regular plain Jane absolute form and I’m going to place my new form in the tab panel that was there and save it and flick back to the client. Now I have some of the stuff that I dropped into that editor. So that’s really how it’s done. You can sort of use your imagination to project what it would really look like with real forms and components nested in there.