2.0 | 2 Modifying a compound component's layout

Owned by Edwin Gamboa
Last updated: Dec 15, 2016 by H.-Dieter BöhlauVersion comment


Purpose

Demonstrate how to modify the view layout of a compound component using the BDE.

First steps

Open the latest version of BDE at: https://www.cubbles.world/bde/bde@2.0.0-SNAPSHOT/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.

We recommend you to use Chrome due to compatibility issues.

Change to the bde-store

Since the component 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. 

Load the audio-player compound

To load the component you should use the Load from base option of the Header toolbar:

A dialog should be displayed, here you should type the name of the desired component, which in this case is audio-player. When the component appears in the result list, click on it to add it. The data flow of the the component should look as follows:

Changing the component's view layout

If you switch to the application-view you will see that the components of the audio-player are not correctly arranged:

To modify the layout of the component you should switch to the design-view:

This view allows you to arrange all the cubbles of the loaded compound containers. By default there are only 2 containers:

  1. Hidden container: the cubbles that you drop here would be hidden.
  2. Flexbox container: the cubbles that you drop here would be arrange according to the settings you provide on the Flexbox Layouter (left panel).

Adding flexbox containers

You can add as many flexbox containers as you want and set them up individually.

To achieve a better view perform the following steps:

  1. Add two more containers.
  2. Move the input, output, fft and the eq cubbles to the hidden container, since they have no view.
  3. Move the playButton, pauseButton and stopButton cubbles to the second flexbox container.
  4. Move the volumeSlider, middleSlider, bassSlider and trebbleSlider cubbles to the third flexbox container


If you switch to the application-view the instantiated component should now looks as shown below:

Arranging components

Now you can perform the following steps to modify the alignment and distribution of the two first flexbox containers:

  1. Click on the first flexbox container, and on the Flexbox Layouter panel:
    1. Set the Direction as Horizontal
    2. Then set Align Items as Space Between
  2. Click on the second flexbox container, and on the  Flexbox Layouter panel:
    1. Set the Direction as Horizontal
    2. Then set Justify Content as Center
  3. Click on the third flexbox container, and on the Flexbox Layouter panel:
    1. Set the Direction as Horizontal
    2. Then set Justify Content as Space Between

Final result

After those settings an instance of the component should finally look as follows: