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:
- creates an
UINode
instance from the current registered class reference - tests the
isRenderable
method with the currentnode
- if the test succeeds, the
UINode
isrendered
and inserted in the layout - otherwise it proceeds with the next
UINode
class reference of the array - if the search fails, than the common UI node is used
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:
-
[options]
Object optionalas well as the following properties, all the options of the ResultSetLayout are provided. This allows for example to render the node in a compact way in case the column count is greater than one. Furthermore a particular implementation of this class could require other properties that thus can be provided by setting them in the ResultSetLayout options (see GBIF_UINode properties as example)
-
[sectionDom]
Function optionalreturns the DOM of the
<section>
element -
[asideDom]
Function optionalreturns the DOM of the
<aside>
element -
[onSectionReady]
Function optionalcallback function called when
<section>
element is ready -
[onAsideReady]
Function optionalcallback function called when
<aside>
element is ready
-
Item Index
Methods
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.
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:
-
node
GINodethe node to use for rendering
-
rowNumber
Integerthe number of the current row of the ResultSetLayout
-
rowId
Stringthe identifier of the current row of the ResultSetLayout
-
colNumber
Integerthe number of the current column of the ResultSetLayout
-
colId
Stringthe identifier of the current column of the ResultSetLayout; the
<section>
and a<aside>
elements are appended to this column