Applications

A CodeCoupler Application is a container in which an application runs. It can look like a classic desktop windows with titlebar or fill the whole stage like a website would do.

Please create a subfolder apps and another subfolder apps/first-app. In there we start with the absolute minimum with a file index.js:

src/apps/first-app/index.js

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

Now start the application in our index.js file after the system is initialized:

src/index.js

import System from "./system";
import { ComponentInitError } from "@codecoupler/cc-ui";
import FirstApp from "./apps/first-app";
new System().initialized
  .then((system) => {
    console.info("System is Ready!", system.id);
    system.app(FirstApp);
  })
  .catch((e) => {
    if (e instanceof ComponentInitError) {
      console.error(e);
      if (e.component.blocked !== "error")
        e.component.env.$element.html("Oops, Something went wrong!");
    } else {
      throw e;
    }
  });

You will see an application element which can be dragged around. Let's modify its appearance a little bit by adding an init function to our application class:

src/apps/first-app/index.js

import { Application } from "@codecoupler/cc-ui";
export default class extends Application {
  async init() {
    return {
      panelSize: "400 400",
      headerTitle: "My First Title"
    };
  }
}

Now the application have the shape of a square and an awesome title.