Skip to content

Application: Application in Stages

What are we learning here?

  • How to load an application into a stage full sized

We will now consider a special case. An application component can of course be loaded into any stage. But if you want to use an application component in a stage integrated into a layout, the frame of an application component will initially be a problem.

Let's stay and demonstrate this with our application flexbox-component. In the three stages we load three different application components that we have already created. We replace the loading of the Message component with our applications:

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

 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
39
40
41
42
43
44
45
46
47
import { Flexbox } from "@codecoupler/cc-ui";
import ComponentBasics from "../component-basics";
import CanvasVsWidgetScroll from "../canvas-vs-widget-scroll";
import CanvasVsWidgetLayout from "../canvas-vs-widget-layout";
export default class extends Flexbox {
  static defaults = {
    "@codecoupler": {
      flexbox: {
        root: {
          type: "row",
          content: [
            {
              type: "stage",
              id: "main",
              private: true,
              style: { width: "50%" },
              class: "bg-success text-white"
            },
            {
              type: "column",
              grow: true,
              content: [
                {
                  type: "stage",
                  id: "sidebar-top",
                  style: { height: "50%" },
                  class: "bg-primary text-white"
                },
                {
                  type: "stage",
                  id: "sidebar-bottom",
                  style: { height: "50%" },
                  class: "bg-warning text-black"
                }
              ]
            }
          ]
        }
      }
    }
  };
  async start() {
    this.stage.load(ComponentBasics);
    this.getStage("sidebar-top").load(CanvasVsWidgetScroll);
    this.getStage("sidebar-bottom").load(CanvasVsWidgetLayout);
  }
}

Looks weird? Exactly. We want to load the application components without the title and borders to look like a canvas or widget component.

So we will set the panel to the status "fullsize" and disable the footer by overriding the application defaults:

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

 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { Flexbox } from "@codecoupler/cc-ui";
import ComponentBasics from "../component-basics";
import CanvasVsWidgetScroll from "../canvas-vs-widget-scroll";
import CanvasVsWidgetLayout from "../canvas-vs-widget-layout";
export default class extends Flexbox {
  static defaults = {
    "@codecoupler": {
      flexbox: {
        root: {
          type: "row",
          content: [
            {
              type: "stage",
              id: "main",
              private: true,
              style: { width: "50%" },
              class: "bg-success text-white"
            },
            {
              type: "column",
              grow: true,
              content: [
                {
                  type: "stage",
                  id: "sidebar-top",
                  style: { height: "50%" },
                  class: "bg-primary text-white"
                },
                {
                  type: "stage",
                  id: "sidebar-bottom",
                  style: { height: "50%" },
                  class: "bg-warning text-black"
                }
              ]
            }
          ]
        }
      }
    }
  };
  async start() {
    this.stage.load(ComponentBasics, {
      "@codecoupler": { panel: { setStatus: "fullsize", footerToolbar: null } }
    });
    this.getStage("sidebar-top").load(CanvasVsWidgetScroll, {
      "@codecoupler": { panel: { setStatus: "fullsize" } }
    });
    this.getStage("sidebar-bottom").load(CanvasVsWidgetLayout, {
      "@codecoupler": { panel: { setStatus: "fullsize" } }
    });
  }
}