Skip to content

System Component

Now let's go up one more level, above our application. Our application was loaded into the stage of a component based on System.

You've probably already guessed it: a System is also a component. This component also has a main stage in which you can load any component. So can also load blocking messages hints in it. Like other components you can use start() and init() methods.

What are we learning here?

  • Everything is a Component or a Stage

So let's split off a header from our system main stage like we have done before, and load our loading-components in there:

src/system.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
import { Component, Flexbox } from "@codecoupler/cc-ui";
import LoadingComponents from "./demo/widgets/loading-components";
import TestApp from "./apps/demo/button-toolbar.js";
export default class extends Component {
  async start() {
    await this.stage.load(Flexbox, {
      "@codecoupler": {
        flexbox: {
          root: {
            type: "column",
            content: [
              { type: "stage", id: "system-top" },
              { type: "stage", id: "$", grow: true }
            ]
          }
        }
      }
    });
    await this.getStage("system-top").load(LoadingComponents, {
      target: this
    });
  }
  async boot() {
    await this.stage.load(TestApp);
  }
}

Now our stage have a header and from there you can methods of the system component.