Stages & Components: Application

What are we learning here?

Stages & Components Relations:

┌───────────────┐        ┌───────────┐            ┌──────────┐
│ Initial Stage ├─load──►│ Component ├─provides──►│ Stage(s) │
└───────────────┘        └───────────┘            └────┬─────┘
                              ▲                        │
                              └ ─ ─ ─ ─ load ─ ─ ─ ─ ─ ┘
System Hierarchy:

► Initial Stage
  └► Root Component
     └► Stage "main"
        └► Application

---

• How to create an component based on Application

You have to know that every component has at least one main stage. You can access this stage with this.stage, this.getStage() or more verbose this.getStage("main"). This also applies to our root component (even if this component has no visual representation).

We will now load another component into the main stage of our root component. Again, we first need to create a component. This time we create a component based on base component class Application.

A component that extends the class Application creates a container that looks like a classic desktop window with a title bar and borders. The container can be moved and resized.

Please create the folders src/demo/apps/component-basics. In there we start with a single file named index.js. It is best practice to put only one application in each directory starting with a main file named index.js:

src/demo/apps/component-basics/index.js

import { Application } from "@codecoupler/cc-ui";
export default class extends Application {}

To load the application into our root component we will use the method load() of it's main stage, like we previously loaded our root component into the initial stage.

We extend our root component with the async start() method, which is called in each component during its initialization phase.

Important: Loading a component is always asynchronous. So do not forget to wait for it with await:

src/root.js

import { Component } from "@codecoupler/cc-ui";
import TestApp from "./demo/apps/widget-basics";
export default class extends Component {
  async start() {
    await this.stage.load(TestApp);
  }
}

Start Definition Object vs Shortcut Signature

We will use a signature of the load method which expects only one Component. This is just a shortcut signature. The load method normally expects a so called start definition object. This would look like:

load({
  component: TestApp
})

You will see an application element. Let's modify its appearance a little bit by modifying some default values in our application class. Here we use so called "namespaced options" which we will later explain in more detail:

src/demo/apps/component-basics/index.js

import { Application } from "@codecoupler/cc-ui";
export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "640 510",
        headerTitle: "Test Component Features"
      }
    }
  };
}

Now the application has a specific size and an awesome title.