You’ll make breakthroughs by
extending the value of InterSystems’ products

Zen Mojo

What is Zen Mojo?

Zen Mojo – an extension of InterSystems Zen™ – is a set of Caché classes that allow you to rapidly build modern user interfaces for mobile and desktop web applications.

Why use Zen Mojo?

Building web applications is great fun, until you realize you have to maintain a lot of functionality on multiple platforms – which cuts into your productivity. The intention behind Zen Mojo is to enable you to focus on the important aspects of your solution: application design, and the user experience.

Introducing Zen Mojo

How it works

Applications built with Zen Mojo use a Single Page Architecture (SPA). Instead of generating HTML code at the server, which is then shipped to the client, the server transmits JSON packages that drive the content of the page. Transitioning between pages is as easy as changing the underlying metadata and calling a method.

Page rendering is handled by Zen Mojo plugins. Plugins can use third party libraries to provide state-of-the-art widgets or to invoke your own library code base.

What makes a Single Page Architecture different?

The Single Page Architecture is an efficient approach for reducing client-server communication. The page consists of a rather small amount of HTML skeleton code and can update its content with metadata transmitted by a server. By changing the underlying metadata, the page can change the currently displayed data or even transition to a new display page – without actually moving to a new physical page. Zen Mojo uses JSON (an efficient raw data format) for communication, so the SPA minimizes the payload between client and server, and ensures optimized control by the developer.

How do plugins work?

Zen Mojo uses plugins for easy integration of state-of-the-art JavaScript libraries, like jQuery Mobile or the Dojo Toolkit. Therefore, developers can select new UI paradigms as soon as they arise.

There are two kinds of plugins: PageManager and Helper.

A PageManager creates the basic shell your application lives in and defines how to manage page transitions within the Single Page Architecture.

Helper Plugins add support for positioning and rendering objects that can be defined in the metadata. Some of those elements might be very simple and just expose a <div> container. Others might be very powerful, providing complex visual effects or integrating 3rd party libraries.

Building mobile web apps

We support several mobile JavaScript libraries. jQuery Mobile makes it easy for you to build your own custom look and feel for a cross-platform audience, while ChocolateChip-UI provides components and specific style sheets that emulate the look and feel of iOS, Android, and Windows Phone devices.

jQuery Mobile

ChocolateChip UI

Can I build mobile apps with Zen Mojo?

Absolutely. You can set up a native application written in Objective-C (for iOS) or Java (for Android) and embed your Web application in it. This approach is called a hybrid application, in contrast to an application built natively. A very good tool for this is PhoneGap based on Apache Cordova.

By default Zen Mojo applications are deployed within a server environment. Such applications are called Web applications and require server connectivity, at least at startup time.

Zen Mojo allows compiling and packaging of an application bundle, which can be run locally from anywhere. A bundle can still talk to a server without any change in the code, but it does not require the server at startup. Bundles are intended for usage in hybrid applications.


Building desktop web applications

The plugin approach of Zen Mojo allows you to integrate popular libraries for building rich desktop applications. Currently we support the Dojo Toolkit with its huge number of Dijit widgets and its capability to render interactive 2D charts.

The Dojo Toolkit

How can I get Zen Mojo?

Zen Mojo can be downloaded from the WRC Distribution Portal. (Access is restricted to customers with a valid license.) Starting with version 2014.2, Caché will ship with the current release of Zen Mojo.

WRC Distribution Portal

Zen Mojo 1.0.7 key features

Zen Mojo 1.0.7 comes with a lot of new features. We would like to point out the most important ones:

Introduction of the Widget Reference

The new Widget Reference is intended to provide “ready-to-steal” code samples and to shorten the learning curve for Zen Mojo. The widget reference showcases the widgets and demonstrates their usage in common configurations. Each sample includes a description, the rendered widget(s) and a button to access the source code. This button displays a popup that describes every piece of code involved to produce the sample: the layout object, the associated data, and any CSS. Currently, the widget reference provides content for jQuery Mobile 1.3.2 using the jQMHelper plugin.

Support for $if

The mojoDefaultHelper now supports a $if construct. This layout object does not emit any HTML code. Instead it renders all child elements if its condition resolves to true, otherwise it ignores the child elements. The $if element uses two attributes to build the condition: value and expectedValue. The condition always checks for equality.

Dynamic startup setting for documentView

The documentView component now provides the onload callback, which you can use to initialize the component. This callback provides a way to set the initial keys at runtime e.g. based on localStorage, with data saved from a previous session.

Bundling of files for hybrid app deployment

To ease the task of including all needed files in a PhoneGap project, %ZEN.Mojo.Utils now provides a utility method that generates a Zen Mojo offline page, identifies the generated files needed by that page, and copies all these files to a target directory. Note that this utility cannot identify all the dependencies such as those implied by the CSSINCLUDES and JSINCLUDES parameters, because some of those dependences can only be determined at runtime.

More complete support for the jQuery Mobile library

This kit provides more completed options for the layout objects in the jQMHelper plugin.