README
For impatients, you can jump to the test
folder to see a simple node. However, we will recommend to read this guide as there are naming conventions that every single kumologica developer will have to follow to develop contrib nodes.
Project structure
Contrib nodes will be made of two files:
- a js file that defines the behaviour at runtime of the node
- an html file that defines and captures the properties of the node from the designer
The whole project will be bundled together with a package.json
package.json
kumologica imposes the following convention into this file:
-
name
: it will follow the convention /kumologica-contrib- -
kumologica
: This property will be responsible to register all the nodes that your contrib module is exporting
Example:
{
"name": "@acme/kumologica-contrib-echo",
"kumologica": {
"nodes": {
"echo": "echo.js"
}
}
}
The JS file
module.exports = function(App) {
const { KLNode } = require('@kumologica/devkit');
class Echo extends KLNode {
constructor(props) {
// Do not forget to call the constructor!!
super(App, props);
this.message = props.message;
}
handle(msg) {
App.log.info(`Echo node says: ${this.message}`);
this.send(msg);
}
}
// Do not forget to register the node
App.nodes.registerType('echo', Echo);
};
This node is named Echo
, and the runtime will ensure to invoke the handle
method when a message is received by the node.
A few points to remember here:
- Do not forget to extend from KLNode, otherwise your node will not receive any message.
- Do not forget to override the method
handle
. -
send
method can be invoked to send the message linked as an output in the designer.
The HTML file
This file provides the following:
- Registration with the designer
- A window to capture the properties to the node
<script type="text/x-kumologica" data-template-name="echo">
<!-- name field -->
<div class="form-row">
<label for="node-input-name">
<span>Name</span>
</label>
<input type="text" id="node-input-name" placeholder="Display name">
</div>
<!-- message field -->
<div class="form-row" style="margin-bottom:0px">
<label for="node-input-message">
<span>Message</span>
</label>
<input type="text" id="node-input-message">
</div>
</script>
<script type="text/javascript">
App.nodes.registerType('echo', {
category: 'echo_contrib',
icon: 'browser.png',
color: '#FFF59D',
defaults: {
name: { value: '' },
message: { value: '' }
},
inputs: 1,
outputs: 1,
label: function() {
return this.name || 'echo';
}
});
</script>
WARNING: the category property only takes alphanumerical and _ which will be replaced by a whitespace in the designer |
---|
All the icons will need to placed in the directory called icons
in the same directory that the html
and js
files are.