Purpose

To describe how to set a hookfunction to a connection using the BDE.

Introduction

Sometimes you will need to process the value of a slot before it propagated through a connection. For example, you may need to do some data transformation to fit the target slots expected structure. To aim that you should use  hook function. To declare a hook function, which will be called each time a connection triggers. The hook function will be called with the propagated value and a callback function next, which should be called after the data is processed. A hook function should look as follows:

function (value, next) {
    // Do your data transformation based on value
    var newValue = value * 2;

    // Call next callback with transformed value
    next(newValue);
}

The following sections will show you how to set and use a hook function using the BDE.

An example component

The hook functions are defined for connections between two members. Therefore, we will compose component, we will use the cubx-color-input and the cubx-textarea components to get the following compound:

When you chose a color using the cubx-color-input, its hexadecimal code will be displayed on a text area. Switch to the application view, wait until the component loads, then choose another color to see the component working:

Adding a hook function

Since the purpose of this tutorial is to understand how hook functions are used, we will use a very simple function. Whenever the user chooses a color, on the text area its hexadecimal and rgb code will be displayed. Our function is the following:

function (value, next) {
	var rgb = parseInt(value.substring(1, 3), 16) + ',' + parseInt(value.substring(3, 5), 16) + ',' + parseInt(value.substring(5, 7), 16)
	next ('Hexadecimal: ' + value + '\nRGB: ' + rgb)
}

TODO: show the process in BD