Willem Gorisse on August 13, 2015
Design is increasingly important. But for many, breaking down application design components can be challenging. If you’re struggling to get your slick design into your Mendix application – this post is for you. In this blog post, I’ll help you lay out the broad strokes of your application.
Like most complex problems, focusing on the big picture before diving into details is the best way forward. So before diving into fonts, color schemes, images and CSS, you need to create your applications layouts.
In Mendix, there are two levels of layout structuring: global layouts and micro layouts. Page layouts will take care of our global layouts where a multitude of ways exist for micro layouts. But before we dive into Mendix implementations, let’s first get an idea of our goal.
To come up with a sound plan, you first need to know what your design is. Let’s take the Mendix Blog as an example (simplifying it just a bit).
Start by analyzing the design to determine its structure. Creating UI elements is not that much different from coding (from a best practices point of view). We’re looking for ways to reach our goal with the least amount of work and the most efficient flexibility for future changes. Meaning no ‘code’ repetition and reusing our elements as often as possible.
After carefully inspecting the Mendix Blog three types of content pages can be distinguished:
Notice the abstraction level in inspecting a design of a page. At this point in our process, we’re not interested in headers, images or buttons, only the large functional blocks.
Having sketched out the three main page types, it’s time to translate them into page layouts. But wait, what about our best practices of not repeating ourselves? By analyzing each page type, you can find a clever way of doing less work.
Notice how each page type has the same elements and the only real difference is how content blocks are placed. Let’s translate that into a system where there is no repetition. That way, if something needs to be changed, we only have to change it in one location.
If we can somehow implement these three levels with proper inheritance we’ll have a very flexible, non-repetitive and solid base to build our application pages with.
Now that we’ve defined our page structure, it’s time to start up the Business Modeler. The magic words in Mendix for global layouts is “Layout container.” We can create an inheriting layout architecture which the content pages can then use as a template.
Let’s start with our top level layout page and our second Mendix blog level:
The Mendix Blog Master layout uses the Main Application Master layout as a parent. Hence, every page based on the Mendix Blog Master layout will inherit every change made to the Main Application Master layout.
Notice that the Main App Footer element is placed inside the Mendix Blog layout. Layout containers have two modes of scrolling behavior: per region or per full widget. Now, our application needs the Mendix top navigation to be always visible, making the rest of its content scrollable. This requires both the Mendix Blog placeholder as well as the Main App footer to share a placeholder. The quickest way is to add this into the Mendix Blog Master layout.
With our new Mendix Blog Master layout we can create our content page layouts:
Finally, we’re ready to create our first pages in the Modeler using our freshly created page layouts. Let’s see what the homepage would look like:
And there we have it: a homepage with five content areas to fill and which inherits all its repetitive header and footer material from the same source as any other page. All that’s left now is to actually fill it with content.
If we look at a “Recent Posts” item on the Mendix Blog homepage, we can see an image on the left, with title, author and category.
A page layout with its layout containers will not provide us with a solution for implementing layouts on this level. Fortunately we have a multitude of options available to us:
It’s safe to say that there are many ways to solve micro layouts, and most of them are a bit more complicated than layout containers. Fortunately, Mendix is working really hard to improve in this subject – so stay tuned for future blog posts!
Here’s my recommended workflow for transforming your design into a Mendix application:
Well, to be honest, the above seems to target desktop but it actually doesn’t. The exact same story applies for mobile and tablet. This is especially true when creating different Mendix pages for each device.
Receive Mendix platform tips, tricks, and other resources straight to your inbox every two weeks.