Going Mobile with the Mendix Spring 2012 Release

Benny van Reeven
June 20, 2012

The world is going mobile. Smartphone sales have long overtaken PC sales, and tablet sales are increasing rapidly^[1]. Employees are using mobile devices in their personal lives, and are expecting nothing less from the enterprise systems they have to work with professionally. More and more people own smartphones and tablets, and would like to be able to do their work on those devices instead of on their PCs.

The increased mobility allows employees to work from home or on the road.

A few years ago, the consumerization of IT led to a better user experience for enterprise applications. Today, the mobilization of IT is encouraging enterprise systems to become mobile-enabled. Luckily for all of you, Mendix is right on top of this development with the Spring 2012 Release. Version 4.0 introduces the ability to add Mobile User Interfaces (UIs) to your enterprise applications, allowing you to reuse your existing business logic in the process.

Activate Mobile

When you start up version 4 of the Mendix Business Modeler and create a new project, you will be presented with an extra option: Activate mobile. Enabling this option allows you to instantly start building a mobile user interface for your Mendix application. For existing projects, open the ‘Mobile Navigation’ document in the project explorer and tick the ‘Enable mobile’ option to enable the mobile UI component.

Mobile Navigation

In this menu you can also configure your mobile UI home page and menu bar. Just as in the web/desktop client you can configure alternative home pages for different user roles. Likewise, the visibility of menu items in the mobile UI is based on the roles that you specify on mobile forms. The mobile menu bar is visualized at the bottom of the screen as a row of icons with accompanying texts. The menu bar is a flat list; there are no sub-menus. However, there are other options to implement navigation, which we will come back to later.

The Mobile Form Editor

The lion’s share of building your mobile UI will be spent building mobile forms. This is a new document type in the Modeler that you use to create pages for your mobile UI, analogous to web forms for your web UI. Mobile forms are constructed in the mobile form editor. As an extra, the regular form editor has been completely rebuilt, but I will leave that for another blog post. Suffice it to say that it is now easier than ever before to build your UI for web or mobile.

Mobile Form Editor

Upon opening a mobile form in the form editor, the first thing that stands out is the template used for mobile forms. It consists of a header with a title and a footer that contains a menu bar. The header has space for two buttons, one on the left and one on the right (“back” and “edit” in the image above). Instead of showing the menu bar, the footer can also be customized or hidden.

Mobile Widgets

In the toolbar you will find some new widgets that are optimized for mobile devices. For example, the data grid would not make a very elegant impression on a smartphone, as space would be limited to a small number of columns. Therefore, we created the List View widget, which features a template-based approach to showing a list of items. As the template for an item is free-form, you can create various layouts for lists based on this widget.

List View

Another common pattern in mobile applications is to have a full-screen navigation menu, for example as the home page of the app. That is where the Navigation List widget comes into play. This widget features a pre-configured number of items that can trigger either a form or a microflow. Just as with the normal navigation options, items in this list can be hidden based on user roles.

Navigation List

The full list of built-in widgets for mobile forms can be found at the Mobile Forms documentation page.

Deploying Your Mobile App

When you first run your mobile application from the version 4 Modeler, you might notice a change. We have extended the ‘Open Browser’ button so that both the web client and the mobile client can be opened. They both have shortcut keys as well now, F9 for the web client and Ctrl+F9 for the mobile client. Choosing ‘Show mobile client’ opens the mobile client in your browser using a typical smartphone resolution, so that you can test whether your UI looks all right on smartphones.

Mobile Client

Our cloud environments have been updated so that you can run apps created with version 4 of Mendix. When mobile users visit your app, they will be automatically redirected to the mobile client if you have enabled it. Of course, it is still possible to visit the web client on a mobile device.

Conclusion

With the Mendix Spring 2012 Release, it is easier than ever to build and deploy a mobile app in minutes. If you have an existing Mendix app, you can leverage the business logic that you already created and build a mobile UI on top of it. The widgets of the new mobile form editor are optimized for mobile devices, enabling you to create the best user experience for your mobile users.