Stages: Replacing Stages

There is a special id for stages: $. Stages with such an id will replace the parent stage. Components which provide such stages can modify a layout of an application without the need to change the code you have already written. We will now show this with a concrete example.

What are we learning here?

• Components that provide stages named $ replace their parent stages

Let's start with an HTML structure in a separate file which divide the entire space into two parts, a top and a bottom section:

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

<div class="h-100 d-flex flex-column">
  <div class="flex-grow-0 bg-primary text-white p-2" data-cc-stage="top"></div>
  <div class="flex-grow-1" data-cc-stage="$"></div>
</div>

Now we create a new canvas component which provide these two parts as stages. As you can see above the top stage will get the id top and the bottom stage the id $. Like before we use replaceWith() to save one element:

We will again load the generic Canvas component and fill the element from within the application component:

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

import {
  Application,
  Canvas,
  Tools,
  CenteredMessage
} from "@codecoupler/cc-ui";
import MainTemplate from "./layout.html";
import WidgetBasics from "../widget-basics/content.js";
import SingleRoot from "../single-root/content.js";
import HeaderTemplate from "./header.html";
export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "1200 580",
        headerTitle: "Test Stage Features"
      }
    }
  };
  async start() {
    let header = await this.stage.load(Canvas, "add-header");
    header.element.replaceWith(HeaderTemplate);
    Tools.registerStages(header, header.element, "public");
    this.getStage("top").load(CenteredMessage, { text: "The Header" });
    let main = await this.stage.load(Canvas, "flexbox-canvas");
    main.element.replaceWith(MainTemplate);
    Tools.registerStages(main, main.element, "public");
    await Promise.all([
      this.getStage("mario").load(CenteredMessage, {
        text: "Stage Mario"
      }),
      this.getStage("**/luigi").load(WidgetBasics, {
        myWidgetArg1: "Value 1"
      }),
      this.getStage("main/*/peach").load(SingleRoot, {
        myWidgetArg1: "Value 1"
      }),
      this.getStage("main/flexbox-canvas/daisy").load(CenteredMessage, {
        text: "Stage Peach"
      })
    ]);
    console.info(this.getStages());
  }
}

The new canvas component replace in this case the main stage of the application with its own bottom stage. All the following code was leaved untouched.

Even all following addresses pointing to the main stage stage will be redirected to the new bottom stage. For example main/flexbox-canvas/peach is in fact main/add-header/$/flexbox-canvas/peach.

Let's look into the console. You won't find any mention of stage $:

Object { main {}, ... }
► main: Object {  }
► "main/add-header/top": Object {  }
► "main/flexbox-canvas/daisy": Object {  }
► "main/flexbox-canvas/luigi": Object {  }
► "main/flexbox-canvas/luigi/OPcf7y3DGCBvIgyEmFwxB/M8WUtPaUJyeapk_FHW7lU": Object {  }
► "main/flexbox-canvas/mario": Object {  }
► "main/flexbox-canvas/peach": Object {  }
► "main/flexbox-canvas/peach/a-71akzes5jhInqUmAMaU/Q_M6XbptAI9uyS6clFE1x": Object {  }

There is another method which can help you to understand the complete stage addressing. Very useful for Debuging:

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

import {
  Application,
  Canvas,
  Tools,
  CenteredMessage
} from "@codecoupler/cc-ui";
import MainTemplate from "./layout.html";
import WidgetBasics from "../widget-basics/content.js";
import SingleRoot from "../single-root/content.js";
import HeaderTemplate from "./header.html";
export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "1200 580",
        headerTitle: "Test Stage Features"
      }
    }
  };
  async start() {
    let header = await this.stage.load(Canvas, "add-header");
    header.element.replaceWith(HeaderTemplate);
    Tools.registerStages(header, header.element, "public");
    this.getStage("top").load(CenteredMessage, { text: "The Header" });
    let main = await this.stage.load(Canvas, "flexbox-canvas");
    main.element.replaceWith(MainTemplate);
    Tools.registerStages(main, main.element, "public");
    await Promise.all([
      this.getStage("mario").load(CenteredMessage, {
        text: "Stage Mario"
      }),
      this.getStage("**/luigi").load(WidgetBasics, {
        myWidgetArg1: "Value 1"
      }),
      this.getStage("main/*/peach").load(SingleRoot, {
        myWidgetArg1: "Value 1"
      }),
      this.getStage("main/flexbox-canvas/daisy").load(CenteredMessage, {
        text: "Stage Peach"
      })
    ]);
    console.info(this.getStages());
    console.info(this.getStagesDebug());
  }
}

Now you can see all "real" paths without the replacing:

Object { main {}, ... }
► main: Object {  }
​► "main/add-header/$": Object {  }
​► "main/add-header/$/flexbox-canvas/daisy": Object {  }
​► "main/add-header/$/flexbox-canvas/luigi": Object {  }
​► "main/add-header/$/flexbox-canvas/luigi/BePw_xicuG0Ejx5iIXkyg/EbxevhwxyC6S5FpCJ9wOu": Object {  }
​► "main/add-header/$/flexbox-canvas/mario": Object {  }
​► "main/add-header/$/flexbox-canvas/peach": Object {  }
​► "main/add-header/$/flexbox-canvas/peach/cmjTy2-HEp7P6SLXxjPx0/Zyv3i_zW-9NZxfpnhoLfl": Object {  }
​► "main/add-header/top": Object {  }