The GEOSS Discovery And Access Broker APIs
Authors: Fabrizio Papeschi, Mattia Santoro, Stefano Nativi
API version: 1.4.3-beta

UINode

Module: UI

A UINode is a graphical representation of a node which can be displayed by a ResultSetLayout.
This class can be considered as an abstract class which provides methods and options that can be overridden by the subclasses as shown in this section.
The following CSS is required:


 <!-- API CSS -->
 <link rel="stylesheet" type="text/css" href="http://api.eurogeoss-broker.eu/docs/assets/css/giapi.css" />

Choosing the graphical representation of a node

Each subclass can render one or more different kind of nodes basing on some criteria and/or characteristic. In most part of the cases some particular fields and/or values of the node report can be choose
to determine the graphic representation.

For example, a subclass of UINode called Green_UINode could render all the nodes with the word "green" in the report title using a green background, and a subclass of UINode called Sea_UINode could render all the nodes with the word "sea" in the report description using a an image of the sea as background. Of course making a subclass of UINode which manage a single characteristic can lead to a class explosion; often the best solution is to create a single subclass which is able to manage several different kind of cases (in the example above the same class could render both nodes with the word "green" in the report title and with the word "sea" in the report description).
This API provides a UINode implementation which provides a common graphical nodes representation.

Another possible rendering criterion can be the type of the node source. Since the source type information is not provided by the nodes nor by the report, the isRenderable method must be somehow able to obtain it.
For example, this API provides the GBIF_UINode which renders in a particular way nodes provided by the DABSource of type GBIF. In this case the GBIF_UINode is renderable if the report.id of the node contains the word "gbif"

Renderable nodes

The ResultSetLayout renders the nodes of the current page scrolling the registered UI nodes in search of a renderable UINode.

To determine which registered UI node class is able to render the current node, the ResultSetLayout applies these rules:

  1. creates an UINode instance from the current registered class reference
  2. tests the isRenderable method with the current node
    • if the test succeeds, the UINode is rendered and inserted in the layout
    • otherwise it proceeds with the next UINode class reference of the array
  3. if the search fails, than the common UI node is used
In the example of the Green_UINode and Sea_UINode the isRenderable method returns true if the node report has respectively the word "green" in the report title and the word "sea" in the report description

Extending the UINode

A UINode includes by default a <section> and a <aside> elements; the functions options.sectionDom and options.asideDom return the DOM to insert in the correspondent elements. This class provides an implementation which returns an empty <div>.
This class also provides a default implementation of the render method which places the <section> element on the left of the <aside> element with respectively the 85% and 15% of the horizontal space, according to the ui-node class in the API CSS file. If the options.asideDom function returns an empty element, than all the horizontal space is assigned to the <section> element.

In the most part of the cases there is no need to overwrite the render method, so providing an implementation of the options.sectionDom, options.asideDom and of the renderable method is enough.
The code snippet below shows how to use this approach to create the Green_UINode and Sea_UINode classes:

// creates the Green_UINode class
var Green_UINode = function(options) {
// creates an instance of the UINode superclass var uiNode = GIAPI.UINode(options);
// provides an implementation of the options.sectionDom function // the options.asideDom function is not implemented so the section // takes 100% of the horizontal space options.sectionDom = function(node,options,sectionId){
// creates the div with a green background var sectionDiv = '<div style="background: green">'; // adds other content to the div
sectionDiv += '...'; // closes the div
sectionDiv += '</div>';
return sectionDiv; };
// overwrite the isRenderable method uiNode.isRenderable = function(node){
// get the node report var report = node.report(); // get the title var title = report.title(); // return true if the title contains the word "green" return title.indexOf('green') >= 0;
};
// returns the reference to the extended UINode return uiNode; }

// creates the Sea_UINode class var Sea_UINode = function(options) {
// creates an instance of the UINode superclass var uiNode = GIAPI.UINode(options);
// provides an implementation of the options.sectionDom function options.sectionDom = function(node,options,sectionId){
// creates the div var sectionDiv = '<div>'; // adds other content to the div
sectionDiv += '...'; // closes the div
sectionDiv += '</div>';
return sectionDiv; };
// provides an implementation of the options.asideDom function options.asideDom = function(node,options,sectionId){
// creates a div with an image of the sea as background var asideDiv = '<div style="background-image: url("sea-image.png")" >';
// closes the div
asideDiv += '</div>';
return asideDiv; };
// overwrite the isRenderable method uiNode.isRenderable = function(node){
// get the node report var report = node.report(); // get the description var title = report.description(); // return true if the description contains the word "sea" return description && description.indexOf('sea') >= 0;
};
// returns the reference to the extended UINode return uiNode; }

If necessary, the render method can be extended in the same way as the isRenderable method in the code snippet above

Registering the UINode classes to the ResultSetLayout

The next step is to create a ResultSetLayout and register the just created UI nodes. The following code snippet shows how to do it:

var layoutId = GIAPI.random();
// creates the layout
var layout = GIAPI.ResultSetLayout(layoutId,{
// registers the classes reference to the layout 'uiNodes': [ Green_UINode, Sea_UINode ] });

Constructor

UINode

(
  • [options]
)

Parameters:

Item Index

Methods

isRenderable

(
  • node
)

Return true if the given node is renderable by this UINode instance, false otherwise.
This implementation returns always true. For more info see this section.

Parameters:

Returns:

returns true

render

(
  • node
  • rowNumber
  • rowId
  • colNumber
  • colId
)

Renders this UINode with the given node.
This implementation creates a component constituted by a <section> and a <aside> elements according to the options.sectionDom and options.asideDom.
When an element is appended to the DOM, the correspondent event function (options.sectionDom or options.asideDom) is called.
In most part of the cases, there is no need to override this method since the implementation of the options.sectionDom and options.asideDom functions is enough.
For more info see this section.

Parameters: