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)
}

To add a hook function to a connection you should:

1. Right click on the desired connection
2. Click on edit on the context menu that appears
3. Type the function in the Hook function field of the Connection properties dialog and save

This process is illustrated by the image below:

Final result

Switch to the application-view and  and choose a new color the result should look similar to:

Image Modified