Register Interface

Interface where you can interact with nodes created in Blackprint Engine.

Interface?

For example, if you want to create button where you can:

• Click it on the browser

• Displaying output on browser visually

• Interacting with Browser/Node.js/Deno API

• Trigger it from external script

You will need to register it as an interface on Blackprint.

Node element registration

Default node (Blackprint/nodes/default) type that was used by example below is distributed on each engine.

Register new node interface type

An interface on browser is designed for communicate the node handler with the HTML elements. Blackprint is using ScarletsFrame to help control the element templating system and two-way data binding.

For non-browser, you will need to use bindfor polyfilling the two-way data binding.

Let's register an interface (Please scroll down to see the node registration's example).

Browser

// Blackprint.registerInterface("interface/name", options, newScope)

// Template already defined in window.templates['Blackprint/nodes/default']
Blackprint.registerInterface('Blackprint/nodes/default', {
    // `iface` will extend from Blackprint.Node (Optional)
    extend: Blackprint.Node,
}, function(iface){
    // iface = ScarletsFrame component handler (that control the HTML element)

    // If the element would have value that can be exported to JSON
    // It must being set inside options object
    iface.options = {};

    // Run after this component was initialized
    iface.init = function(){
        // You can use it like jQuery
        iface.$el('.button').on('click', function(ev){

            // We call the node handler that using this component
            // `node` from Blackprint.registerNode('', (node, iface) => {})
            iface.node.onclicked(ev);
        });
    }
});

Node.js/Deno

// Engine.registerInterface("interface/name", options, newScope)

Engine.registerInterface('Blackprint/nodes/default', {
    // `iface` will extend from Blackprint.Node (Optional)
    extend: Blackprint.Node,
}, function(iface, bind){
    // If the element would have value that can be exported to JSON
    // It must being set inside options object
    bind({
      options: {}
    });
    
    // Can be accessed with iface.options

    // Run when this interface is initialized
    iface.init = function(){
        // Because Node.js/Deno doesn't have GUI
        // We will trigger it after 5 sec just for example
        setTimeout(function(){
            // We call the node handler that using this component
            // `node` from Engine.registerNode('', (node, iface) => {})
            iface.node.onclicked(ev);
        }, 5000);
    }
});

PHP

Python

# Work in progress

Small example for using registered element above. The node registration structure should be similar with different engine implementation.

Browser

// -> (namespace, callback)
Blackprint.registerNode('myspace/button', function(node, iface){
    // Use node handler from sketch.registerInterface('Blackprint/nodes/default')
    iface.interface = 'Blackprint/nodes/default';
    iface.title = "My simple button";

    // Called after `.button` have been clicked
    node.onclicked = function(ev){
        console.log("Henlo", ev);
    }
});

Node.js/Deno

// -> (namespace, callback)
Engine.registerNode('myspace/button', function(node, iface){
    // Use node handler from sketch.registerInterface('Blackprint/nodes/default')
    iface.interface = 'Blackprint/nodes/default';
    iface.title = "My simple button";

    // Called after `.button` have been clicked
    node.onclicked = function(ev){
        console.log("Henlo", ev);
    }
});

PHP

Python

 # Work in progress