Desktop like GUI in Browser

Thomas Holzer

Abstract

HRworks is a web-based employee portal, offered as Software as a Service via Internet. It is used by 80,000 user in more than 550 companies in Germany. Administrative processes, e.g. travel expense calculations or vacation planning, are self-served by the employees based on user-roles. HRworks is entirely developed in Smalltalk and consists of 300 views. The HTML-based interface is used via browser.

The classic HTML-based interface is in service since 2002. It will be replaced by a modern interface providing the comfort of a native Windows, Mac OS or Linux GUI. The current functional object-model shall be maintained and be responded to by the new interface. There are already JavaScript-libraries, e.g. ExtJS, YUI, SmartClient, providing powerful widgets like trees, grids, etc. Therefore, it is obvious to use and connect them with Smalltalk. The question to solve is, how Smalltalk shall respond to the existing widgets. The implemented approach was to develop classes, which represent the components of these JavaScript libraries. Furthermore, classes create the possibility to change widgets in the browser directly from Smalltalk; like programming a native Windows or Mac OS application.

The first step to this approach is, to mirror the wigdet-class-hierarchy of the JavaScript-components-library in Smalltalk. Thus views can be encoded as tree-structure within Smalltalk using the widgets. The tree-structure then exists as an instance attribute in a view-class. Based on this tree-structure you can generate a JavaScript/JSON which displays the view in the browser. But how shall the user-interactions return to Smalltalk? And how is the reaction of Smalltalk returned to the browser?

While defining the widgets-tree-structure callbacks are placed additionally for certain events, like e.g. pressing a button. These callbacks are referred to the appropriate view instances automatically, all changes accomplished by the user in the browser are transferred to the Smalltalk-image.

Now, the view-class is capable of reacting to the user-input and applying the methods of the component-tree. The classes of the component-tree use the Smalltalk-proxy-mechanism in order to generate the corresponding JavaScript for reflecting the changes in the component tree to the browser. Hereby the loop of user-entries and reactions of the Smalltalk-image is completed.

Moreover, special features have been developed for displaying and directly editing collections of even thousands of objects in grids. Smalltalk meta-programming was utilised for this purpose, as well.

This results in a browser interface which can be developed directly from Smalltalk comfortably and utterly object-oriented and is not distinguishable from a native interface.

Bio

In 1995, Thomas Holzer graduated from university of applied sciences Furtwangen. After working in several consulting projects he set up HRworks GmbH in 1997. While studying, he was inspired by object-orientation and detected the basis for his business idea: Smalltalk. His intention was to take advantage of Smalltalk for economic software. The internet boom during the years of the turn of the millennium provided the basis for browser-based, specialized employee portals like HRworks. Conventional programming languages do not effectively meet the complex requirements of applications for such specific themes. And on the other hand occupying these niches is not of interest for the global players in the software business. As a result, HRworks developed and enhanced step by step and is now a successful product at the disposal of over 80,000 users.

Slides

http://prezi.com/n343x7z-mrqx/desktop-like-gui-in-browser/