Creating rich Internet applications with InterSystems Zen

This article was originally published in VSJ, which is now part of Developer Fusion.
InterSystems Caché is a multidimensional database that can be used with both relational and object data, along with the tools and utilities necessary to create database applications that use the database, and administrative tools to work in a more traditional database administrator manner. In previous releases of Caché, if you wanted to develop a web application, you created it using the Caché Server Pages (CSP) technology. This let you dynamically generate Web pages based on data from a Caché database, and the facility is still supported in the most recent release of Caché. However, Zen now provides an alternative way to create web applications based on your data. Zen is complementary to CSP, and is an implementation of AJAX (Asynchronous JavaScript and XML) extended to take full use of InterSystems’ object development capabilities and Caché Server Pages (CSP) framework. Zen provides components that you can use to create web pages based on standard HTML and JavaScript.

Developing in Zen

You develop your Zen applications in the normal Caché Studio development environment. There are wizards to do the basic work of creating a Zen application, Zen page, and Zen report classes, covering aspects such as the layout of the page and what the titles say. Once this underpinning is in place, you then populate your pages using Zen components. Again, there are wizards and templates to help you through the setting up of the page elements, or you can code directly.

You get the strong impression that Zen is designed for database developers who know their database and what data they want to show on their pages. This isn’t a web design package that has a bit of support for showing data from a database – you can tell it started from the database end. You can create good looking applications, but more importantly, you can display the data accurately and without having to jump through hoops to manage the data connections and security.

While the wizards and templates help you through setting up the elements of your application, this isn’t a visual development environment – once you’ve added a component, it’s back to the code. To see how your application will appear, there’s a browser view option.

Screenshot
Choosing a chart from the templates

Zen Component Library

One of the main reasons Zen is useful is its large library of components. You have access to all the elements you could need to create a web application – menus, grids, tables, selection trees, charts and graphical meters are among the data aware components. In each case, the component comes with the information necessary for rendering it within a browser using HTML and XML. Some components can also be rendered as SVG (Scalable Vector Graphics). All the components can be extended and you can also write your own components if necessary.

The simplest components in the library are the standard HTML control types such as input boxes, text boxes, buttons, and check boxes. More important are the data aware components. These expect to show data from your data tables, and have methods to update the information they show based on what the user does, so a user could choose to query the data for a particular product, say, and the control would update to show the results. The main component is the table component, which displays your data as an HTML table. The component supports paging, scrolling, sorting by columns, and filtering the results. The data within the table can be refreshed from the server without repainting the entire page.

In addition to the table component, there’s a separate grid component that you can use when you want to include spreadsheet-like facilities. The grid control displays a two-dimensional, editable grid, and when the user clicks in a cell, they can edit the cell contents. The grid can show data based on underlying tables, and you can include formulae in the cells where you need calculations.

Other data aware components include list boxes, trees to display hierarchical data, combo boxes, radio buttons and checkboxes based on underlying data rather than as a way for the user to make choices. There’s a set of chart components that are implemented using SVG (Scalable Vector Graphics), with display options including line, area, bar, pie, hi-low, and XY charts. A separate set of graphical meters let you display your data using speedometers, gauges such as fuel gauges, and light bars where so many bars in the display are ‘lit’ to show the underlying value of the data being displayed.

If you are the type of programmer who likes to put your own individual twist on things, you can extend the components in Zen in a number of ways. The simplest option is to combine the existing components, but you can also make changes to the style of a built-in Zen component by subclassing it and overriding its style block. Going further still, you can write your own component class, and you can also add custom meters to the selection offered in Zen by subclassing the base meter class and adding the method calls required to render the new meter’s SVG contents.

Screenshot
Creating a report using the Zen report wizard

Reports

Showing data that can be edited is only half the task of database applications; you also need to be able to show data in report formats. Zen has a report facility that lets you generate reports in both HTML and .PDF formats, so your users can view the information in their Web browser or print them off. The reports can include charts and graphs, and you get good control over the formatting and layout of your reports. To create a report in Zen, you start by creating the report class, then include within it two XML documents. A report definition to describe the data, and a report display document specifying the way you want the report to look. You then use the report class either by entering the URI in a browser, or by invoking a GenerateReport method from your application.

Persistence and Security

One of the more difficult tasks facing web developers is handling persistence across pages, and when databases are involved, ensuring session management is dealt with correctly in terms of database connections, user authentication and data encryption. Zen uses the InterSystems CSP framework to manage all these elements, which means you as the developer don’t need to spend time writing code for these aspects as security and session management are automatically “built into” every Zen page.

Zen makes use of a shared object data model. At runtime, when a user views a page, an instance of the page’s object model is created on both the client and the data server. Zen then handles the task of synchronising the objects at both ends, so only changes are passed to and fro. This has the advantage that you get both better performance and increased security as you’re not passing as much data across the Web.

Another advantage if you’re creating applications for users in more than one country is the fact that Zen supports multi-lingual pages. You build a page in one language, and then let Zen extract the text in that original language. This is replaced by a code, which is stored along with the text in a database. The text can be given to a translator to be converted into other languages, and to create a local language version of your pages, you simply retrieve the appropriate text based on the language code at run time.

Screenshot
A web app created using Zen

Conclusion

Developing database applications isn’t easy, because you’re always setting up a view that shows a small slice of a lot of information. Zen dramatically reduces the amount of work involved in creating a database application for the web. The component library is excellent, with a good choice of components, and the fact that Zen deals with the tricky aspects such as persistence and session management removes the more difficult management tasks. It’s not an environment you could recommend to non-programmers – you do need to be able to code, and while there are wizards and templates, you still need to know what you’re doing. However, so long as this is the case, Zen with Caché is a good choice. Caché 2007 is available on Windows, Linux, Mac, UNIX and OpenVMS.


Kay Ewbank, Editor of Server Management magazine, is a highly experienced database analyst who has followed the development of database technology from dbase to today’s modern relational and post relational databases.

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“My definition of an expert in any field is a person who knows enough about what's really going on to be scared.” - P. J. Plauger