Multiple Views for Dynamic Server Pages

A View is an HTML layout that is displayed inside an unbound HTML element in the layout of the web page. Each instance of a dynamic server page (DSP) can have multiple views that provide different layouts for its data.

For example, you can use Views to create a tab construction in which each tab is a view that contains different data, or selectively make read-only data editable, or adjust the layout for a mobile device based on its orientation.

Default Views

Every DSP instance has a default view, which is the layout set by the weblayout ProcScript statement. In the main DSP used to start the application, a default view is associated with <body> element of the HTML layout. When DSP container widgets are used, the default view is displayed in the widget when the DSP instance is assigned to the DSP container widget.

You can use the DSP container widget to display different layouts of the same data, but this requires you to create a separate DSP for each layout. It is not possible to change the view without changing the DSP in the widget.

JavaScript Views

An alternative and more flexible approach is to create different HTML layouts and dynamically load them into the DSP instance, using the Uniface JavaScript API. In this case, a View is created in JavaScript using a layout (stored as an HTML file) and displayed inside a specified element of the DSP.

Note:  It is not possible to display a View inside an element that is bound to a data element in the DSP's component structure.

To make use of this approach, the default view of your DSP should contain only a basic layout with identifiable elements (such as <div id = "something">), which can be used to hold the views you want to display.

JavaScript APIs for Views

The Uniface JavaScript API provides the following functions to dynamically create, show, and hide and delete views:

  • Create a view for a component instance: uniface.Instance.createView(View,Layout, ParentElement)
  • Address one or more views of a component instance: uniface.Instance.getViews() and uniface.Instance.getView(View)
  • Show a view: uniface.View.show()
  • Hide a view: uniface.View.hide()
  • Delete a view: uniface.View.remove()
  • Check that view object is valid: uniface.View.isValid()
  • Get the DOM node of a DSP widget in a view: uniface.Field.getBoundElement(View)

For more information, see uniface.Instance and uniface.View.

Addressing Views in JavaScript

The following code creates a view and displays it inside the <div id="mydiv"> element

webtrigger detail
javascript
   var instance = uniface.getInstance('PERSONDSP');
   if (instance != null) {
      var parentElement = document.getElementById('mydiv');
      var view = instance.createView('myview', '../common/myapp/person_def.html',parentElement)['catch'](
	 function(e) {
	    console.log(e);
           }).then(function(){
         view.show();
      });
   }

endjavascript
end

Related Topics