Helping you drive digital innovation
Subscribe
RSS Feed of the Mendix Blog
Thanks for Subscribing

Keep an eye out for Mendix resources coming straight to your inbox.

Easily Develop Intuitive Multi-Device UIs with the Mendix Navigation Editor

on December 6, 2013

Share:

In this series, we spotlight specific features or enhancements in Mendix 5.  Today, Developer Arjan van IJzendoorn outlines some key enhancements to the Navigation node of the Mendix Business Modeler.

One of the most prominent changes in Mendix 5 is how you can build user interfaces (UIs) and integrate apps. We will start looking at these features in detail in this blog series.

With respect to UI, there is a lot to talk about: navigation, layouts, snippets, and more. Today, I want to focus on navigation and how we’ve simplified the process of developing intuitive multi-device UIs. If you followed our beta release, you probably noticed that we evolved the navigation feature considerably to achieve the ideal balance between flexibility and ease of use.  Here is the end result.

In the project explorer, you have a node called ‘Navigation’. The navigation editor shows three tab pages: Desktop, Tablet and Phone. With Mendix 5, you can now build a tablet-specific interface for your application. For each type of device, you can specify a home page and a menu. And, of course, you can still have role-based home pages.

Choosing the menu source of a menu widget

In Mendix 4, the menu was a fixed part of the interface and the type of widget was fixed as well: a drop-down menu for desktop applications and a button bar at the bottom for phone applications. Now, with Mendix 5 layouts, which will be detailed in a future post, you can define the structure of your page including the position and type of menu widgets. So, you can use a button bar in a desktop application or a navigation tree widget in a side bar on tablets.

There are currently three kinds of menu widgets: the menu bar, the simple menu bar (comparable to the phone menu in Mendix 4) and the navigation tree. A menu widget has a menu source which can either be one of the default menus defined in ‘Navigation’ or a custom menu. The former choice is the easy choice and it is enough for applications with simple a navigation structure (for experienced Mendix 4 users this will be very familiar).

Choosing the menu source of a menu widget

Choosing the menu source of a menu widget.

For more advanced needs, you can also point a menu to a custom menu document, which is a new type of document in Mendix 5. Such a document simply describes a menu structure with one or more levels, just like the menus in the navigation editor. By using menu documents you can, for example, have different side menus for different parts of your application.

Of course you can still use a navigation tree in addition to a menu bar. When you convert an existing project that uses that feature to Mendix 5, the Business Modeler will automatically create an additional layout called ‘DesktopLayoutWithTree’ that has a navigation tree widget in the left side bar. The menu items of the tree will be converted to a menu document and the widget will point to that document.

Finally, we improved the usability of the menu editor itself. There are two buttons for creating new items; one of them creates an item next to the currently selected item and the other creates an item underneath the selection. And when creating a new item, you can immediately edit the caption, image and target of the item in a popup dialog. You can quickly edit an item by using the Enter key.

We hope you enjoy the new way navigation is set up and look forward to seeing the cool interfaces that you create. And stay tuned for my next post on building flexible user interfaces with layouts.

Subscribe to Our Blog

Receive Mendix platform tips, tricks, and other resources straight to your inbox every two weeks.

RSS Feed of the Mendix Blog
Arjan van IJzendoorn

About Arjan van IJzendoorn

Arjan is a member of the Mendix R&D department. He started developing the Mendix Modeler a long time ago and is still working on that application most of the time. Currently, he focuses on the modeling side of pages and widgets, with the occasional excursion into the rest of the Modeler.

| Community Profile
  • Remy Willems

    So, a navigation document is similar to what’s inside the menu groupbox in your first
    screenshot, right?

    How does storing a menu layout in a document compare to storing it on a menu widget? I imagine it might be good for reusability, or version control. I’m guessing you’ve already thought about this well ^.^

    To warp it up: it’s good to see Mendix can keep being so user friendly while increasing expressibility. Keep it up 😉

  • Johan den Haan

    Hi Remy,

    Apart from re-use, storing the menu items in a separate document also helps in updating layouts. E.g. if you import a layout with a menu widget that points to the desktop menu, it just works, no need to copy your items to the menu widget.