Purpose

To describe how to compose Cubbles compound components using the BDE.

Composing a compound

Open the latest version of BDE at: https://www.cubbles.world/bde/bde@1.9.0/bde/index.html. When opening the BDE by default a new empty compound is created, which is called new-compound. We can use this compound for the purpose of our tutorial.

Changing the store

Since the components that we are going to use for our compound are in the bde-test store, we need to change the current store. To aim that, you should use the Change store option on the Header Toolbar (shown below):

Click on the option to open the Change Store dialog. This time the Base Url is the same, so you don't need to change it. You should only change the name of the store, which in this case is bde-test. If everything is okay, the Change Store dialog will close and a notification will be displayed on the bottom of the browser. 

Adding members

We will be working on the Dataflow view. This view and its options are shown below:

The compound we are creating is composed by two members:

• review-input: an elementary component that has an input field and a button to propagate the input's value to the text output slot.
• review-list: elementary component with an input slot to add a text to bullet list.

To add these members you should click on the Add member button on the right bottom side of the screen (1. on the image above). Then, the Add member dialog will be displayed. There, you should type the name of the component, i.e. {{review-input}}, a list of components will be loaded as you type. Click on the desired component, and it will be added. Repeat the same process for the review-list component. Now you can use the Autolayout and Zoom to fit options (2. and 3. on the image above). After that, your screen should look as shown below:

Adding connections

In our case we need to add only the connection between the text output slot of review-input and the items input slot of review-list. To aim that you need to click on the text slot and hold the connection until the item slot. Now your component dataflow should look like shown below:

Result

To check your component working you should use the application view. Click on this option on the header toolbar:

After the component loads, you will see an input field and button. The text you type on the input, would be added to a list after clicking on the button. It should look similar to the picture below: