Servoy 2022.12 – Responsive Containers

Hi, Sean from ServeOi here with a quick video. I’d like to show you how to enhance your form layouts using the responsive container, which is new in ServeOi version 2022.12. But first, let’s cover a little background to set the stage. ServeOi supports two distinct layout managers. Simple Layout uses a flattened view and coordinate positioning. It’s easy to use intuitive and doesn’t require special knowledge of web technologies. ServeOi uses a nested markup structure and requires a bit of web experience. And while it can be quite powerful, it is more challenging to build and maintain screens. In this video, I will show the responsive container. ServeOi’s latest offering to build the best of both worlds. This feature allows developers to use the simple layout manager to build forms, yet manage regions of responsive content on those forms. The result is productivity and power. Let’s take a look. First, I’d like to show some of the limitations of the simple layout manager. Here is an example application with the toolbar across the top, having different buttons. When using the simple layout manager, all components, including buttons, will be positioned with absolute or relative coordinates, meaning pixels or percentages. While this is easy to manage, it is challenging to handle dynamic content. For example, I have a button that runs a bit of logic to change the text content of button 1. Notice how the text is too long and gets truncated. I have another button which toggles the visibility of button 1. Notice how it seems to leave a gap in the layout. Not so nice. And, suppose I wanted to dynamically hide or show the company name field below. I have the same problem. Let’s take a look at how using a responsive container could easily fix this. In this example, I have placed a responsive container on this form to hold the buttons. Now when I change the text content, the button responds accordingly. And, as I toggle the visibility, button 2 is sliding to fill the gap, much nicer. Also, when I toggle the company name field and label, the other fields respond by moving up. Let’s switch over to the Servoy developer and have a look at how it’s done. In the form designer, I have added the responsive container component to hold the buttons. This component is available in the palette from version 2022.12. The buttons themselves are no longer positioned by pixel or percentage. Instead, they are simply placed inside the container, which manages the layout. I’ve used a nested structure by placing them in one of two div tags, which organizes them left and right. This is controlled by the CSS class called button bar, which I have attached to the container. Let’s take a quick look. Here you can see I’m using the CSS flex display property to control the layout. The space between justification is how I’m able to push the buttons either right or left. The added div selector is used to control the spacing between the buttons. Let’s switch back to our form and take a closer look at the structure of the fields and labels. For these, I’ve used another responsive container and another style class called label field. The best part of this approach is that I don’t have to fuss over the positioning of the components. I only need to add labels and fields in alternating format. The layout manager will handle the positioning. Also notice that the city and country fields are arranged on the same line. This is easily achieved by nesting them in a div with another class called multi-field. Again, it takes a few lines of CSS to drive this, so let’s take a look. This time I’m using the CSS grid display property. This is similar to the flex property used in the toolbar, but it manages to lay out in two dimensions instead of a single row. I’ve defined the spacing between the rows and columns, and this grid template columns property really just indicates the number and sizes of the columns. The max content setting for the first column is what really allows those labels to grow as needed, whereas the fields take up just the remaining amounts. I’ve made a selector called multi-fields for the div which contains the city and the country fields, and this also uses a grid layout manager. In this case, each field takes up an equal fraction. It’s like a small grid with an grid to be able to easily enhance the layout this way. Now just to make sure you get this, I’m going to show how to do this from scratch. I’m going to create a new form, notice that I use the simple positioning to manage my layouts. Once I’ve created that form, I can drag the responsive container onto the form, and I can position it manually because it’s just simple positioning. By right-clicking the container, I can begin adding components. Let’s start with a label component, and I’m going to do it once more. This time I’m going to add a text component. Great. Now if I just copy these inside the outline view, I can paste them in and kind of repeat them inside the container. Now the magic really happens when I select this container, and I change that class and choose my label field layout manager class. As soon as I select that, you can see they pop into place. Now I want to do one more thing. I’m going to add another response of container, which is really just a div, and I’m going to drag that down kind of in the bottom of my layout manager, and I’m going to drag my text box inside, and I’m going to copy it once and paste it. Now I have two text box inside that div. By change that class to my multi-fields layout manager, the other one, you can see that it places them 50-50. Okay, let’s recap the main points. First, when to use a response from container. This is really ideal for situations where you want the layout of the components to respond to their content. For example, when you support multiple languages or have data-driven text, anytime you don’t know the size of the content upfront. Second, you may wish to dynamically change the presence or visibility of components. In these cases, you don’t want to leave holes or gaps in the screen. And finally, anytime you want to easily layout components without fussing over alignment or spacing or pushing pixels around, just let the responsive container work its magic. And remember that a responsive container is really just an element that you can place on a simple layout form. You can control its layout with a little CSS, then just add items as you wish. I recommend that you choose a layout manager that fits your scenario. Flex layout is ideal for controlling a single dimension. Grid layout is preferred for two-dimensional arrangements. You don’t need to be a CSS guru, but if you are willing to get your hands a little dirty, then the responsive container can really drive productivity. And it’s great user experience. Well I hope you found this short video helpful. Thanks for watching!

Close