UINode

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="https://api.geodab.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

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 ]
                        });