High performance
multi-model database

Building Rich Web Applications Fast with InterSystems Zen Technology

Many of today’s applications provide a user interface that runs in a Web browser. And many of those interfaces are as rich and sophisticated as those of applications deployed on a desktop computer. Caché includes InterSystems Zen technology, which enables the creation of rich Web database applications in record time.

CSP technology

Underpinning Zen, and providing the mechanisms for running Web applications, is our Caché Server Pages (CSP) technology. Some of the characteristics of Caché Server Pages are:

  • Dynamic Server Pages – Pages are created dynamically on the application server by application code, rather than having a Web server simply return static HTML. Applications can respond rapidly to a variety of different requests and tailor the resulting pages that get sent back to the browser.
  • Session Model – All of the processing related to pages from a single browser are considered part of a session – from the first browser request until either the application is completed or a programmable timeout occurs.
  • Server State Preservation – Within a session, application data on the server – and even the entire application context – can be automatically retained across browser requests, making it much easier to develop and run complex applications.
  • User Authentication – Any of Caché’s authentication mechanisms may be used.
  • Encryption – Caché automatically encrypts data in the URL, to help authenticate requests and prevent tampering. The encryption key is kept only on the server, and it is only good for the life of the single session.

Class Architecture of Web Pages

Class Architecture Of Web PagesIn Caché, every Web page is an object – an instance of a page class that contains methods (code) to generate the page contents. Usually page classes are derived from a standard Web page class “%CSP.Page” that provides every page with various built-in capabilities, such as the generation of headers and encryption. This class architecture makes it easy to change behavior for an entire application and to enforce a common style. It also brings all of the other programming advantages of object programming to Web development.

In general, we recommend that page classes contain only user interface logic. Business logic and database logic should be put into different classes, so that there is a clean separation of user interface code from the business and database logic, and it is easier to add additional user interfaces later.

Zen and Component-based Web Pages

Zen provides a simple way to rapidly create complex, data-rich Web applications with a sophisticated visual appearance and highly interactive user interface. Zen is not a 4GL – it is a rich library of pre-built object components and development tools based on InterSystems’ CSP and object technology. Zen is especially appropriate for developing a Web version of client/server applications that were originally built with tools such as Visual Basic or PowerBuilder.

Zen components allow much more dynamic interactions – you’re not restricted to the “submit” mechanism to send values to the server. For example, with the Zen form component, you can define your own custom validation, including immediate calls to the server without requiring a page request and subsequent repainting. For users, this represents a more natural way to enter data.

Zen uses the session management mechanism of CSP, providing user authentication, data encryption, and the retention of persistent session data across page requests. All communication between the browser and server occurs by sending objects back and forth using a more sophisticated version of the technique often referred to as AJAX (Asynchronous JavaScript and XML).

Zen-based pages can be easily intermixed with pages developed using other CSP-based approaches to Web development.

What Is a Zen Component?

A Zen component is a class definition that specifies the appearance and behavior of the component on the page. The Zen class definition contains, in a single document, the entire definition of a component, including the style sheets, server code, and client code.

At run time, Zen creates two objects for each component used in a page: a client-side object that Zen automatically creates as a JavaScript object within the browser, and a server-side object. Zen automatically manages the state of both objects and manages the flow of information between them.

Types of Zen Components

The Zen library includes components that implement all the standard HTML control types: input boxes, text boxes, buttons, check boxes, etc. These components have additional behaviors inherited from the Zen control class.

Zen also includes a set of more complex, data-rich components that automatically display data from the database and know how to dynamically update this data in response to user events. For example, Zen’s powerful table component automatically displays data within an HTML table using a database query. The table component supports paging, scrolling, sorting by columns, filtering, and a variety of styles. The contents of the table can be refreshed from the server without repainting the entire page

Other Zen components include:

  • Menu – A variety of menu types are supported.
  • Grid – Add spreadsheet-style behavior to a Web page.
  • Tree – Display hierarchical data with a tree control.
  • Tab – A tab component contains a series of tabs, each of which contains a series of other components.
  • Chart – A rich set of chart components are implemented using SVG, including line, area, bar, pie, hi-low, and XY charts.
  • Graphical Meters – Speedometers, gauges, etc., let you display data as dynamic visual components.

Changing the Appearance of the Zen Library Components

All Zen components support a set of properties that control look and feel. Applications can set these properties at run time to change the values, appearance, and behavior of components.

The visual appearance is also controlled by Standard CSS (Cascading Style Sheet) style definitions. You can override these styles (to change fonts, colors, size, etc.) on an application wide, a page-wide, or an individual component basis.

You can create sub-classes of the Zen library components to further override appearance and behavior.

Creating New Zen Components

One of the main strengths of Zen is that it is easy to create new components.

Every component is implemented as a class. To create a new component: (1) create a new component class that can be a subclass of an existing component; (2) implement a method that renders the HTML content of the component; (3) define the server-side and client-side methods that implement the runtime behavior of the component; and (4) make sure the class includes the CSS-style definitions needed to specify the visual appearance of the component.

How to Localize a Zen Application for Different Languages

If desired, Zen automatically maintains a set of all text values (titles, captions, etc.) displayed by an application’s incorporated components in a special localization table. You can export the application’s localization table as an XML document, translate the values to other languages, and import the new tables.

At run time, Zen uses the text values based on the current language preference of the user’s browser.

SVG Support

SVG (Scalable Vector Graphics) provides a powerful, standard way to display rich graphical data within a Web page. Zen includes the ability to create graphical components that render themselves using SVG and includes a rich set of pre-built SVG-based components.

What Browsers Does Zen Support?

Zen works with Firefox, Chrome, Safari, and Internet Explorer (v7.0 and above). For Internet Explorer, the Adobe SVG plug-in is needed if you wish to use Zen’s SVG components.

Zen Reports

hammockZen comes with an extensible framework for defining and generating customized reports. A Zen Report is a special kind of Zen class that allows you to specify database reports in XHTML or PDF. Our graphical layout editor gives you complete control over the layout and appearance of reports, and allows the inclusion of (static) Zen charts and graphs. Reports may be output to a browser, or printed, either on the server-side or on a local printer. With Zen reports your Rich Internet Application can exactly replicate the reports users are accustomed to seeing, or easily generate useful new ones.

The Caché Advantage

Rich Web User Interfaces: Visually sophisticated, highly interactive pages can be generated that are visually more similar to GUI client/server applications than a traditional simple browser form with a SUBMIT button. The user finds the interactive format more natural and easier to use.

Fast Object-based Development: The utilization of pre-built components speeds development and makes it simpler to modify later.

Consistent User Interfaces: The component-based architecture makes it easier to define and enforce application-wide style and behavior guidelines.

Automatic Generation of Reports: Reports can be automatically created and printed, or sent to users’ browsers.