View and Data Layers of Dynamic Server Pages

A dynamic server page (DSP) running in a client browser consists of a view layer containing DSP layout and widgets, and a data layer consisting of a collection of entity occurrences.

Both layers are generated from the DSP's component definition, with the view layer being defined by the layout and the data layer controlled by the component's data structure. HTML elements in the layout are bound to occurrences and fields in the layout by means of element IDs.

View Layer

The view layer is used to provide the user interface, but it may actually consist of multiple views, with each view representing a different layout. One of the views is the visible view and is represented as the Document Object Model (DOM) in the browser, and can be manipulated using JavaScript. (The DOM can be examined using the browser's Developer Tools.)

Data Layer

Data may exist in the data layer but not be visible in the view layer because a different view is being displayed. For example, a primary field may be included in the component structure but not in the layout. Or a field is present in one view, but not in the current view.

Uniface automatically synchronizes the data layer with the visible view layer, so if data is updated by a response from the server, this is reflected in the current view, but not in other views that may use the same data. The developer is responsible for ensuring that this happens.

Document Object Model (DOM)

Elements of the DOM can be manipulated in JavaScript. To manipulate elements bound to Uniface data, you can use the Uniface JavaScript API. The functions of this API are associated with Uniface data objects, not the HTML elements, so the API exists in the data layer.

For optimization, Uniface maintains a DOM reuse pool, which contains Uniface-bound DOM elements ready for use. When a new occurrence is created, an element of the pool is used and the new data is applied to the bound elements.

Uniface provides a getBoundElement() JavaScript function on Field and FieldErrorContext objects to enable you to synchronize the view with the data.

Data Layer Triggers

If validation errors are encountered when data is submitted to the server, you need to be able to provide feedback to the user about the errors, and to clear any error reporting or styling when the data is resubmitted.

To do so, you can use the showError and clearError web triggers. You can use JavaScript APIs in these triggers to provide custom styling, reporting, and clearing for validation errors on the server.

These triggers are defined on fields in the component structure, but they are executed in the data layer and belong to the JavaScript API object uniface.FieldErrorContext, which is referenced by the JavaScript this pointer in these triggers.

For example, in the showError trigger, you can use the this.getBoundElement() to do some kind of error visualization. In the clearError trigger, you could use the same API to reverse the styling.

Related Topics Link IconRelated Topics