How to Build a Mobile UI and Bind to Data

This article explores the current state of mobile app builders and the manner in which they allow developers to construct an application’s user interface and bind these UI elements to data.

Popular solutions include UI generation models that take a widget first approach and those that rely upon template pages to auto-generate the UI. Each approach offers unique strengths and distinct disadvantages.

Create the UI with widgets and bind to data individually. This approach closely resembles the experience found in traditional desktop IDEs — you place controls onto a form then configure them individually. The obvious advantage of this approach is its familiarity, but perhaps its most important benefit is flexibility. You have much more control over the resulting UI when compared to interfaces built from templates or when delegating this task to the machine. You can achieve a truly unique look, feel and layout by combining individual widgets and introduce non-trivial business logic via custom data binding. As you would expect, the primary drawback to this approach is time.

Use page templates. With this approach, the app designer provides a number of predefined page templates. Each template represents a typical functional mobile app page or portions thereof (a contacts list a navigation module, etc). The entire template is bound to data as one entity. This allows you to integrate robust functionality with minimal effort. Your primary role as a developer is to ensure correct data binding and configure navigation between individual application pages. Unfortunately, this approach limits the options available to you. It may be well suited for scenarios that serve internal needs, but it can never address the vast range of functions required of today’s best mobile apps.

Generate the UI automatically. Some mobile app constructors assume full control over UI design. These frameworks generate a UI based upon the data you provide and functionality patterns you wish to implement. The biggest advantage of this approach lies in its simplicity. Though limited in overall capabilities, auto-generated apps such as these can address specific business needs with minimal investment.

The Xenarius Approach

To give you the widest range of options, Xenarius uses the first approach described within this document — building your mobile UI with widgets and binding them to data individually. Xenarius also offers a set of page templates as a starting point for your mobile projects. Though Xenarius uses an IDE-like designer, we’ve gone to great lengths to minimize its learning curve. Once you start using Xenarius, you’ll discover that it does not force you to learn a particular language or use a specific technology stack.