Creating Responsive Forms
Welcome to Creating Responsive Forms for Servoy University. This is Scott Butler. This is Tauria. We’re going to show you how to create dynamic, responsive interfaces for your customers. When they’re on a mobile device or a tablet, they’ll get a customized user interface that looks great on their screen. What is a responsive form? The concept here is the UI adjust according to the device’s form factor. So when you’re on a desktop tablet or a phone, each of those devices has a different height and width. And creating a responsive form allows the interface to adjust according to that width of that device. It’s also important to note that it’s responsive. So if you’re on a device where you can change the width dynamically, like a browser on your desktop, you can actually see that responsiveness happening live and unfurning your eyes. So what makes it work? The key here is the fluid grid. So Servoy uses bootstrap, which is developed by Twitter, and it’s a responsive CSS and JavaScript framework. You also need to use relative sizing when you’re doing your designs. So image sizes, things like that, and buttons should be in relative units, not fixed pixels. You also have the ability to use media queries. So these are different CSS styles and directives for different screen sizes. So maybe you want the font to be a little bit different on a larger device than a smaller device. And the key to all of this is the bootstrap fluid grid. So you’ll design your user interface by breaking it up into a grid. And I have a little example here down below. So you can see how the interface dynamically adjusts and things collapse and slide, according to the form factor that you’re viewing it at. So we’re going to take a look into more detail on how to do that using the bootstrap grid system. Now the key parts are containers, rows, and columns. So the most outer layer is your container. Inside of the container you have rows, and then rows are made up of one or more columns. And then your normal content that you think of, like your images, buttons, text, things like that, go inside of the columns. The columns themselves have a style class, made up of three sections. And the style class tells bootstrap how to render that specific column. So the first is the column type for column that’s always going to be COL. And then dash, and you have the grid class for the device size. So MD is an example here. We’re going to go over those in a later slide. And then lastly, the number of columns that you want to span. And we’re going to go over that as well. So let’s go into the grid class for the device size. There are four options that you have. XS for extra small. These are going to be devices less than 768 pixels. Generally those are going to be phones. You have SM for small, generally tablets, MD for medium. Those are going to be your normal laptops or desktops. And LG for your larger desktops. One of the key pieces of bootstrap and something that’s always important to remember is that classes scale up. So what that means is if you have to find a style for SM, that that’s going to be applied for everything that is SM or larger. So MD and LG will also use that same column spanning. Unless of course you’ve defined a custom span for the MD and the LG. Columns will also collapse if there is only a larger grid size defined. And we’ll talk a little bit more about this later to show you the collapse concept. Next, let’s jump into that last number there. And our example we have 12. So every row and bootstrap always have 12 columns. But you can specify how many columns you want to span. And of course you want to make sure that each row always totals up to 12. Since every row can have 12 columns. So in our little diagram down here on the bottom right, you can see we have four different rows showing different ways of having different types of columns. So the first row has 12 separate columns. The second row has a span of eight columns followed by a span of four. The third row is 4, 4, and 4. And the last row is a six and a six. So as you can see you can put these together in many different ways to customize your user interface. So we said to come back to this concept and this is an important one. That columns will automatically collapse based on the device size. So I have our example that we just looked at earlier on the left here. Where we have the fine columns all for an MD. So it’s a medium device. So if you pull that same interface up on a mobile device, you’re going to see that things collapse and begin to stack on top of each other. This is because our design hasn’t defined anything for a call-xs. So every time it sees a new break in the columns, it automatically stacks it one on top of each other. So using this concept, you can build really dynamic interfaces. And there are many more advanced options, and we’re going to do those in later videos, but just to give you a taste of what those are, each column can have multiple different classes. So you can be a MD4 and an XS2. So depending on the device type, it’ll span a different number of columns. You can also add rows inside of columns. So you can go and infinite number of levels deep there. So rows with columns, and then inside of there, you can have more rows with more columns. You can also define the visibility of the columns by device size. So maybe you want something to be visible on a mobile device, or hidden on a desktop. And there’s lots more advanced options that you can do. That’s documented on the Bootstrap website. So let’s jump straight into a demo now. All right, let’s create our first forms. I’m going to right click on Forms and create a new form. And I’m going to give it a name. Now it’s important. At this step, we have to click the responsive layout option. We don’t get the option to change this later. So if you make a mistake, you’ve got to start back over and delete your form and make a new one, and click the responsive layout options. We’ll click Finish, and we’ll get our new layout. Now I’m going to switch to a different perspective here. So we’ll get a little bit more real estate. Okay, so this designer is a little bit different than what you’re used to if you’ve been building these classic style forms. So let’s just do a little bit of an overview first. So you’ve got the Wireframe option that will highlight all the different components that you’re placing on your form. You have some preset options here so that you can size it according to a desktop, a tablet, or a mobile device, and you can click a second time to change from portrait to landscape. It’s also important to note that this design is live. So even though you might have chosen a full desktop view, if you only have your designer width set wide enough for a tablet, you’ll end up getting a tablet style rendering. So make sure you’ve got enough real estate on your screen to display it the way you want to test it. So let’s bring it back here, and let’s start with placing some components on our form. So we have two ways of doing that. We have the classic drag and drop style, and then we also have an outline view. So let’s start with the more classic style of the drag and drop. So remember before we said we first start with a container, and then inside of the container are rows. Well, servois form is actually a container for you already. So you don’t necessarily need to start with a container here. You can just go straight to a row. So we’re going to go to the Bootstrap 12 grid options. So these are responsive fluid grid components that we can use. So we’re going to drag the row onto there. So now we have a row. And then inside of our row, we need to put columns. So we’re going to drag a column over, and you’ll see it’s created a column for us. And it’s defaulted our style class. Notice that it’s set to a call-md. That’s 12. So I’m just going to click in here and change that. And we’re going to choose 4. And here we turn. So notice now it’s changed to 4. And I told you that earlier that there are two different ways that you can add components to your form. So let’s take a look at the second way. I personally like to use the outline view. When you start to get really complicated forms with lots of components on your screen, it starts to become difficult to drag something into just the right position. So if you switch over to the outline view, you can see everything in a more of a hierarchy style. And you can click on what you want to do. So we’re going to click on the row. And we’re going to right click. We’re going to choose add. And we get a list of what things can be added inside of a row. And column is one of them. So we’ll choose column. And we can click on our column. It’ll highlight it in the outline view. And we can click back to the property view. And we’re on our new column. So I’m going to click in there. And I’m going to change this one. Two and eight. So in this example, we now have a 4 and an 8. So we always want to total up to 12. So now that we have these two columns, we can begin placing some normal components inside of them. So we’ll start with something like a label. And we’ll call this my great app. And so we’ll see that. And then maybe we want to take and drag a button inside of there. Now again, notice with the designer view, you’ve got to pause a little bit to give it enough time to make sure it’s placing it in just the right spot. But you can also switch to the outline view and do the same thing. So we could right click on our column, click add. And I could have chosen a component. And I would get a list. And this list is the same set of things that are available over on the left. They’re just named a little bit differently. So that button that I put in there is a bootstrap component button. And now you can see I just added a second one. So we also include some sort of wizard. So it’s a fairly great thing. So it’s a fairly common to do like a two column row or a three column row. And so we can click up here on the root of the elements and hit add. And we can choose a row with three columns. And Servoywould just create that for us in one shot. So notice it’s created the row. And it’s created my MD4 column tool. At this point, once you have your grid started, and you’ve got some elements inside of your columns, you want to begin to start testing it on different devices. So let’s take a look at what it looks like on a tablet. And then let’s take a look at it on a mobile. And that’s a landscape mobile. We can jump down to a portrait mobile here. So notice it’s taken in stacked those. So because those are MD, it’s decided that it can collapse them. Now if I had changed these, for example, I’ll come back to the properties. And I have them as XS. And I’m going to do the same to the other one. I’ll change that from MD to an XS. We can now sort of toggle this back again. Notice it looks the same in a desktop. It looks the same in a tablet. And then when I bring it down to a mobile device, notice that they don’t stack anymore. So generally when you’re designing your form, it’s a good idea to test early and often so you don’t get too far along and have things not collapsing the way you want them to. So let’s go ahead and switch these back now so that we can turn our collapsing back on. And let’s jump over to the other one. Change that one as well. And let’s see what this looks like in the debug client. So you now have a new option here to start the NG client that you might not have been used to before. So you still have the smart client and you have the web client. But this responsive form that we made is only going to work in the NG client. So it’s got a wide view here. Obviously there’s some styling work to do, but let’s see what happens as we start to slide things down. There we go. Notice we had our collapse once we get a certain form factor size. And it is dynamic. So at the end of our getting started video, we’ll be making some additional videos showing some more advanced techniques of building responsive user interfaces. So let’s go ahead and see what happens. So let’s go ahead and see what happens. So let’s go ahead and see what happens. So let’s go ahead and see what happens. So let’s go ahead and see what happens. So let’s go ahead and see what happens. So let’s go ahead and see what happens. So let’s go ahead and see what happens. So let’s go ahead and see what happens.