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.

We recommend you to use Chrome due to compatibility issues.

First steps

The hook functions are defined for connections between two members. Therefore, we will compose a component, to aim that we need to:

First you need to perform the following steps:

Open the latest version of BDE at: https://www.cubbles.world/bde/bde@2.0.0-SNAPSHOT/bde/index.html.
If needed, change to the bde-store (Check Changing the store at this tutorial if necessary).
Add the cubx-color-input and the cubx-textarea components (both version 1.0) as members using the dataflow-view.
Then connect the value output slot of cubx-color-input to the value input slot of cubx-textarea, again within the dataflow-view.

After that, you should get the a component with the following dataflow:

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:

If you are not sure about how to compose that component, check the Compose a compound using BDE tutorial.

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:

Right click on the desired connection
Click on edit on the context menu that appears
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 choose a new color the result should look similar to:

Browser not supported