2 Modifying a compound component's layout

Owned by Edwin Gamboa
Last updated: Nov 24, 2016 by H.-Dieter Böhlau


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@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 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 components of the loaded compound containers. By default there are only 2 containers:

  1. Hidden container: the components that you drop here would be hidden.
  2. Flexbox container: the components 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 components to the hidden container, since they have no view.
  3. Move buttonBar component to the second flexbox container.
  4. Move the volumeSlider, middleSlider, bassSlider and trebbleSlider components to the third normal container

If you switch to the application-view the 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 Reverse
    2. Then set Align Items as Center
  2. Click on the second flexbox container, Flexbox Layouter panel:
    1. Set the Direction as Vertical
    2. Then set Justify Content as Center

After those settings the component should looks as follows: