Designing Flexible User Interfaces with Layouts

Skip navigation

Designing Flexible User Interfaces with Layouts

Designing Flexible User Interfaces with Layouts by Arjan van IJzendoorn

Previously, I wrote about the Navigation Editor in Mendix 5 and how it helps you to develop multi-device UIs.   Today, I would like to discuss another major new feature: Layouts. Layouts specify what comes where on a page, and provide you with greater flexibility and reusability to more easily design great-looking apps. Note that we renamed ‘form’ to ‘page’ in Mendix 5 to reflect the fact that a page describes a whole web page including its layout. So, each page is based on a layout and fills the open areas of the layout with content. One layout can be used by many pages, allowing you to easily reuse the same look on all of them.

The layout container is the most important widget when building a layout. It divides the available space of a page into regions. A layout container always has a center region and optionally adds header, footer, and side bar regions. You can put a menu widget in the header if you want to simulate the Mendix 4 look or you can create your own menu structure in a side bar. This freedom allows you to make every Mendix 5 app look unique and stylish.

Another important widget that can be used while creating layouts is the placeholder widget. It defines an open area that can be filled by a page. You will very likely put a placeholder in the center region of a layout container so that each page can put concrete content there, such as data views and data grids. A placeholder can also be added to a side bar region and every page can then vary the contents of that area as well.

Layouts 1
A layout container with all possible regions and placeholders in each region

Apart from placeholders, there are a lot of widgets that can be placed in a layout to define the common look of pages based on that layout. You can add buttons, menu widgets and titles. You can put a logo in the header by using the new image widget. The new ‘ShowHomePage’ microflow in the System module can be used to navigate to the home page from this logo.

Layouts 2
Page based on layout with logo and menu

Styling can also be defined at the level of a layout. The layout as a whole has a ‘Class’ property that will be applied to each page and the layout container regions also offer a place to specify values for class and style. In this way, you can let a styling expert create a framework for styling your app and other people focus on building the contents of pages.

Pop-ups have layouts, too. You probably do not want pop-ups to contain menus and sign out buttons so the pop-up layout might only consist of a single placeholder. However, you can add a side bar that will reappear on each pop-up if you like. Previously, pop-ups did not have layouts. They would simply show the contents of the main placeholder (see layout properties). Old Mendix 5 layouts are converted with the property ‘Use main placeholder for pop-ups’ set to true. This is for backward compatibility only and you should strive to have an explicit pop-up layout and use that instead.

Advanced users can even base layouts on other layouts. A layout can have a ‘Master layout‘ which means that the layout does not define the ‘outside’ of the layout but it can fill the areas that are placeholders in the master layout. This allows for even more reuse in the design of your apps. The master layout, for example, only defines a header and the derived layout adds a side bar. Pages can then be based on either the master layout or the derived layout and changes to the master layout will show up everywhere.

We look forward to the cool new interfaces that you will build with layouts in Mendix 5!  We’d love to hear about your experiences – leave a comment below!

Author Info

Arjan van IJzendoorn