Skip to main content
Next section

About This Book

This book describes how to use the built-in components that Zen provides for laying out tables, charts, forms, menus, dialogs, and other items for web applications.

This book contains the following sections:

  • Zen Tables” explains how to display the results of a database query as an HTML table.

  • Zen and SVG” describes how to use Scalable Vector Graphics (SVG) to display data-driven charts and meters.

  • Zen Charts” explains how to place a chart on a Zen page.

  • Zen Forms” explains how to lay out a form that allows a user to edit data.

  • Zen Controls” describes the user controls that you can place on a form.

  • Model View Controller” explains how the MVC model can assist the flow of data to a Zen page.

  • Navigation Components” describes menu and link components that support user navigation.

  • Popup Windows and Dialogs” describes components that display their contents over the main application page.

  • Other Zen Components” describes built-in components that do not fit into the categories listed above.

There is also a detailed table of contents.

The following books provide related information:

  • Using Zen provides the conceptual foundation for developing web applications using Zen.

  • Using JSON in Caché describes how to use the %Object and %Array classes, which provide support for JSON, which is a useful format to ship data between client and server.

  • Developing Zen Applications explores programming issues and explains how to extend the Zen component library with custom code and client-side components.

  • Using Zen Reports explains how to generate reports in XHTML and PDF formats based on data stored in Caché.

For general information, see Using InterSystems Documentation.

Zen Attribute Data Types

Many attributes of Zen objects have one of the following underlying data types:

  • %ZEN.Datatype.boolean which has the value "true" or "false" in XData Contents, 1 or 0 in server-side code, true or false in client-side code.

  • %ZEN.Datatype.caption. which makes it easy to localize text into other languages, as long as a language DOMAIN parameter is defined in the Zen page class. The %ZEN.Datatype.caption data type also enables you to use $$$Text macros when you assign values to the property from client-side or server-side code.

Zen Component Event Handlers

Many Zen components have attributes with names that begin with “on...”. These attributes identify event handlers for the component. The value of the attribute is a client-side JavaScript expression that Zen invokes when the related event occurs. This expression generally invokes a client-side JavaScript method defined in the page class. This method is the “handler” for the event.

When providing a value for an event-handler attribute, use double quotes to enclose the value and single quotes (if needed) within the JavaScript expression. For example:

<svgFrame ondragCanvas="alert('HEY');"/>

The JavaScript expression can contain Zen #()# runtime expressions.