Stages & Components: Application

An application component extends the Application class and is a container which can look like a classic desktop windows with titlebar and borders. The container can be moved and resized.

What are we learning here?

• How to create an Application component

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

Create our application component:

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

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

You have here to know that every component have at least one main stage. You can access this stage with this.stage or more verbose this.getStage("main").

Now load the application into our system component (in the system.js file). We will use the method async load() of its main stage, like we previously loaded our system component into the initial stage.

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

src/system.js

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

Start Definition Object vs Shortcut Signature

We will use here 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. We will use here so called "namespaced options" that we will explain more detailed later:

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

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

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