Widgets - the building blocks of front end development
In a previous article, I went over the 3 components of the domain model and how to build the foundation of an app. Now I’m going to focus on the building blocks of the user interface. The user interface is comprised of pages within which users navigate. Application pages are styled using CSS and modeled using widgets built on JavaScript.
The majority of the widgets in our App Store, such as data grids, input text, and drop downs, come out of the box. In my first article, I highlighted some of my favorite widgets. Today, we’ll delve deeper into the main widgets that help deliver a great user interface and show how easy it is to build with them.
The examples I’ll use in this post are taken from our App Store employee directory app.
Data View and Data Grid
The data view and data grid are a Mendix developer’s bread and butter. They are the foundation for displaying dynamic data to end users. The data view shows a single object in the database, whereas the data grid shows a list of objects in the database.
Consider any overview page you may need. The easiest way to create overview pages is to add a data grid in a page and select the entity you wish to display. From there, I always autopopulate and autogenerate the rest of the pages. After I create the main pages, I display only the data that is relevant to the users and fix up the interface by adding containers, groupbox or tabs.