Rendering a UI in Mendix Components

  1. Home
  2. Mendix
  3. Rendering a UI in Mendix Components

Rendering a UI in Mendix

Mendix is designed to build fully functional applications within hours. Mendix being low code consists of components to accelerate the enterprise application development and deployment. Along with the tools to build custom logic for an application it also provides built-in building blocks of a user interface to render a customer engaged UI for an application developed in Mendix.

Mendix consists of the following component to create the front-end of an application:

  • Page
  • Layout
  • Widget
  • Building Blocks

Page in Mendix

A page in Mendix is defined as the basic end-user interface of a Mendix application. A page contains all the other elements required to render a user interface and display the required information to the user. The page can be laid out in different modes to view the relationship between the elements it contains and edit accordingly. The two modes are:

Structure Mode

Structure Mode is the default editor in Mendix to show the information about the elements on the page and their logical relationship.

A page in Mendix is described as the Mendix application 's basic end-user interface

Design Mode

Design Mode in Mendix displays how the page will look when it is published i.e. the spatial relationship between the elements.

Layout in Mendix

A layout defines the structure of a page. It is considered as a frame the page is placed in and determines a unified and consistent look and feel for the application. The different layout types included in Mendix in order to facilitate the ability of responsiveness for different browsers are – Responsive, Tablet-specific, Phone-specific, Modal pop-up and Pop-up.

A layout consists of:

  • Content: It refers to the information the page inheriting the layout has to display.
  • Placeholders: They are defined as the empty areas that form the canvas for a page that inherits the layout.

Mendix provides with inbuilt layouts – Atlas_Default, Atlas_TopBar,  PopupLayout etc. and gives the option of creating a custom layout.

Widget in Mendix

In Mendix, widgets are single user-interface elements that can be configured. These are basically built-in elements provided by Mendix that are commonly used to create a UI for the end user of an application like Image, Text, Page Title, Check box, Drop-down, Button, Menu bar, Progress bar, area chart etc.

Widgets are grouped based on the category as:

Building Blocks in Mendix

A building block in Mendix is defined as a component that are pre-styled set of widgets and can be re-used for page creation. They can be categorized as:

  • Headers
  • Lists
  • Cards
  • Charts
  • Timeline
  • Notifications
  • Chats and others

They escalate the speed of building and styling a page. These include Card action, Chart Area, Form Vertical, Progress Wizard etc.

Mendix build block is described as a component that is a pre-styled collection of widgets and can be reused for page development
Mendix building block and the layout flow
Mendix to build a UI that activates the user

The variety of tools and components provided by Mendix to create a user engaged UI at a face pace encourage and foster rapid application development.