Using the Plugin Documentation and Widget Reference Apps
Zen Mojo includes two applications that provide documentation resources:
-
Plugin Documentation — provides reference information for the plugins, including details on the layout objects provided by each helper plugin.
-
Widget Reference — provides an online reference system for widgets from Bootstrap, jQuery Mobile, Chart.js, and HighCharts. Each widget sample includes a description, the rendered widget or widgets, and a button to display source code.
Plugin Documentation
The Plugin Documentation application provides reference information for all plugins, including detailed information on all layout objects provided by each helper plugin. It uses the Dojo plugin and requires the Dojo library files. This application consists of a set of classes in the %ZEN.Mojo.PluginDocumentation package.
Using the Plugin Documentation App
To access the Plugin Documentation, use a URL of the following form:
http://host:port/csp/sys/%25ZEN.Mojo.PluginDocumentation.HomePage.cls
where host is the name of the host on which Caché is running and port is the port that Caché is using.
For example, the following URL would be used by for instance of Caché running on the local machine and using the Caché default port number:
http://localhost:57772/csp/sys/%25ZEN.Mojo.PluginDocumentation.HomePage.cls
On startup, the app displays lists of helper plugins and page manager plugins. When you select a plugin, a new list displays layout objects for that plugin. When you select a layout object, a tab is created on the right, containing a list of all available attributes for that layout object:
If you click on the bar labeled Legend (lower left), it expands to display an explanation for the colored icons in front of each attribute (for example, 
is a Boolean, 
is a String, and so forth).
Installing Plugin Documentation from a Kit
If you are using Caché or Ensemble 2015.1 or higher, this application is installed automatically. If you are using the Zen Mojo kit, install this application as follows:
-
Make the CACHELIB database read/write.
-
The Plugin Documentation classes are in the %ZEN.Mojo.PluginDocumentation package. Load the class files into the %SYS namespace and compile them.
-
Copy the Dojo library files into the directory install-dir/csp/broker, so that you have a directory named install-dir/csp/broker/dojo-release-1-9-1.
-
Copy the folder zenmojo-images into install-dir/csp/broker, so that you have a directory named install-dir/csp/broker/zenmojo-images.
Widget Reference
Zen Mojo also provides an online reference system for widgets, which demonstrates each widget with different configurations. The widget reference currently includes samples for jQuery Mobile, Chart.js, HighCharts, and Bootstrap.
The purpose of the widget reference is to provide code samples in a copy-and-paste format and to reduce the learning curve for Zen Mojo. Each sample includes a description, a display that renders the widget, and a button to display source code for the layout object, sample data, and CSS styles. This application consists of a set of classes in the %ZEN.Mojo.WidgetReference package.
Using the Widget Reference App
To access the Widget Reference, use a URL of the following form:
http://host:port/csp/sys/%25ZEN.Mojo.WidgetReference.Home.cls
where host is the name of the host on which Caché is running and port is the port that Caché is using. For example, the following URL would be used for an instance of Caché running on the local machine and using the Caché default port number:
http://localhost:57772/csp/sys/%25ZEN.Mojo.WidgetReference.Home.cls
On startup, the app displays a list of plugins for which a widget reference is available. When you select a plugin, a list of layout objects is displayed for that plugin:
Each widget reference also displays a link to the official documentation for that library (for example, the Charts.js documentation link shown above would take you to http://www.chartjs.org/docs/).
When a layout object is selected, one or more working examples will be displayed:
When you click the View Source button, a popup window displays code for the layout and data, which can be copied and pasted into your own applications:
