Skip to content

Addressing: Creating Multiple Stages

What are we learning here?

  • Stages with this.registerStage(Element,Id,Access) will set an id for addressing and the access level
  • Multiple stages can also be created with this.element.registerStages() in conjunction with the HTML attributes data-cc-stage and data-cc-stage-access

A component can create as many stages as needed. We are now considering the case where we use a component to define a layout with multiple stages in which several widgets are loaded. We will look now how to build such a layout with the flexbox model.

Furthermore, we want a component to create the stages and the parent component to use them. Therefore we have to mark them as "public" and provide them with an id.

We create a layout based on flexbox and put the file in a new subfolder:

src/demo/apps/stages-flexbox/content.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="h-100 border border-success d-flex flex-column">
  <div class="p-2 flex-grow-1 d-flex flex-row">
    <div class="w-25 flex-grow-1 d-flex flex-column p-2">
      <div>Stage "mario"</div>
      <div
        data-cc-stage="mario"
        data-cc-stage-access="public"
        class="flex-grow-1 border border-primary"
      ></div>
    </div>
    <div class="w-25 flex-grow-1 d-flex flex-column p-2">
      <div>Stage "luigi"</div>
      <div
        data-cc-stage="luigi"
        data-cc-stage-access="public"
        class="flex-grow-1 border border-primary"
      ></div>
    </div>
  </div>
  <div class="p-2 flex-grow-1 d-flex flex-row">
    <div class="w-25 flex-grow-1 d-flex flex-column p-2">
      <div>Stage "peach"</div>
      <div
        data-cc-stage="peach"
        data-cc-stage-access="public"
        class="flex-grow-1 border border-primary"
      ></div>
    </div>
    <div class="w-25 flex-grow-1 d-flex flex-column p-2">
      <div>Stage "daisy"</div>
      <div
        data-cc-stage="daisy"
        data-cc-stage-access="public"
        class="flex-grow-1 border border-primary"
      ></div>
    </div>
  </div>
</div>

Now we create our new component. We have already learned, that we can create a stage with the method registerStage(). So we could do here something like:

this.registerStage(this.element.querySelector("[data-role=stage]"), "mario", "public");
this.registerStage(this.element.querySelector("[data-role=stage]"), "luigi", "public");
this.registerStage(this.element.querySelector("[data-role=stage]"), "peach", "public");
this.registerStage(this.element.querySelector("[data-role=stage]"), "daisy", "public");

As you can see that we create a stage with the method this.registerStage() with two more arguments. The second argument is an id with which we can later address the stage and the third argument is the access level which is by default "private". With "public" you specify that this stage can also be addressed by parent components.

You can simplify the above commands and replace them with only one. The component element offers a simple method named registerStages() to convert all elements that have the attributes data-cc-stage and optional data-cc-stage-access into a stage. The value of the attribute data-cc-stage is then used as the id of the stage. If available the value of the attribute data-cc-stage-access will be used as third argument and should be public or private (default).

So we create a canvas component that only loads the template and creates the stages with just some lines of code:

src/demo/apps/stages-flexbox/content.js

1
2
3
4
5
6
7
8
import { Canvas } from "@codecoupler/cc-ui";
import template from "./content.html";
export default class extends Canvas {
  async start() {
    this.element.replaceWith(template);
    this.element.registerStages();
  }
}

We will now load the canvas component you just created itself in a new application component:

src/demo/apps/stages-flexbox/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { Application } from "@codecoupler/cc-ui";
import Content from "./content.js";
export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "580 580",
        headerTitle: "Test Stage Features"
      }
    }
  };
  async start() {
    await this.stage.load(Content);
  }
}

We load the new application in our root.js file (just by replacing the previous one):

src/root.js

1
2
3
4
5
6
7
import { Component } from "@codecoupler/cc-ui";
import TestApp from "./demo/apps/stages-flexbox";
export default class extends Component {
  async start() {
    await this.stage.load(TestApp);
  }
}

Now we have a nice application which provide four empty stages.