Nodes

In "Webriko" a node is a code entity and can have properties definable through the "Inspector" panel.

You can insert nodes directly from the library, or duplicate/copy nodes already present in the pages.

Types of nodes

Types of nodes already present in the Webriko library:

javascript

Classes, methods, functions and inline code, class for HTML component.

PHP

Classes, methods, functions and inline code.

HTML

Online components and code

css

Online code

Node properties

Each selected node shows its properties in the "Inspector" panel.

The main property is the name of the node: "name".

The node name is the first property shown large in its graphical representation.

Properties can be added through the "Inspector" panel by clicking on the "Edit properties" button.

The properties can be named and ordered as desired.

These properties represent the input properties of the node and are placed to the left of the node.

Each node has only one output property represented by the small circle to the right of the node.

The code of a node uses the values of the properties through a placeholder.

Example of code contained in a node of a Javascript class that extends another class:

class __node_name__ extends __linked_node_name_extends__
{
__linked_node_data_methods__
}

At compile time, the placeholder properties will be replaced by the values:
1) "__node_name__" will be replaced by the value of the node's "name" property.
2) "__linked_node_name_extends__" will be replaced by the value of the "name" property of the node connected to the "extends" property.
3) "__linked_node_data_methods__" will be replaced with the code of all nodes connected to the "methods" property.

Add and edit the properties of a node

The image below shows the panel for editing the properties. The panel is shown by clicking on the "Edit properties" button.

As you can see the panel lists the names of the node properties.

The toolbar, at the top of the panel, allows you to:

1) Add properties

2) Move the selected property up

3) Move the selected property down

4) Delete the property