Servoy 2022.12 – Responsive Containers
Sample File Download: exampleResponsiveComponent.servoy
Introduction (00:00:00)
- Sean from Servoy introduces the responsive container, a new feature in Servoy version 2022.12, which enhances form layouts.
- The video provides background information on Servoy’s two distinct layout managers: simple layout and responsive layout.
Background (00:00:15)
- Simple layout uses a flattened view and coordinate positioning, making it easy to use and intuitive.
- Responsive layout uses a nested markup structure and requires web experience, offering more power but being more challenging to build and maintain screens.
- The responsive container combines the best of both worlds, allowing developers to use the simple layout manager to build forms while managing regions of responsive content.
Form Designer (00:02:13)
- The responsive container component is added to the form in the form designer.
- Buttons are placed inside the container, which manages the layout.
- A nested structure is used by placing buttons in one of two div tags, organized left and right.
- CSS Flex display property controls the layout, with space between justification pushing buttons right or left.
Fields and Labels (00:03:03)
- Another responsive container is used for fields and labels, with a style class called label field.
- Labels and fields are added in alternating format, and the layout manager handles positioning.
- City and country fields are arranged on the same line by nesting them in a div with the class multi-field.
Grid Layout (00:03:34)
- CSS grid display property is used for the grid layout, managing the layout in two dimensions instead of a single row.
- Spacing between rows and columns is defined, and the grid template columns property indicates the number and sizes of the columns.
- The max content setting for the first column allows labels to grow as needed, while fields take up the remaining space.
- A selector called multi-fields is used for the div containing the city and country fields, which also uses a grid layout manager.
Adding Components (00:04:16)
- The responsive container can be added to a form and positioned manually.
- Components can be added to the responsive container by dragging and dropping or by pasting them from the outline view.
- Selecting the appropriate layout manager class for the container will automatically arrange the components within it.
Recap (00:05:34)
- Responsive containers are ideal when the layout of components needs to respond to their content, such as in cases of multiple languages or data-driven text.
- They are useful for dynamically changing the presence or visibility of components without leaving gaps in the screen.
- Responsive containers simplify the layout process by eliminating the need for manual alignment, spacing, or pixel adjustments.
Conclusion (00:06:09)
- A responsive container is an element placed on a simple layout form and controlled through CSS.
- Choosing the appropriate layout manager (Flex for single-dimension control, Grid for two-dimensional arrangements) enhances productivity and user experience.
- While CSS expertise is not necessary, it can further improve the effectiveness of 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!