Skip to content

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { Application } from "@codecoupler/cc-ui";
export default class extends Application {
  static ui = {
    name: "First Application",
    iconHtml: '<i class="fas fa-seedling fa-fw"></i>'
  };
  async init() {
    return {
      panelSize: "820 600",
      headerTitle: "My First Title"
    };
  }
}

In the ui part you define how you would like to present the application to the world. The iconHtml should be something that can be resized by setting a font-size. If you are using fontawsome icons it's a good idea to add the classname fa-fw to show all your application icons with the same width.

The method init will return an object with different properties which modify the appearance. Basically you can define here all configuration options from jsPanel with a few exceptions like container, syncMargins etc.

In this example we set the panelSize to get a litle bit more space and the headerTitle. Normally the name from the ui settings will be used as title, but with this setting you can overwrite this. Please note that in the sidebar the name from the ui settings is still used.

Now let's add our new application to the apps.js:

src/apps.js

1
2
3
4
5
6
7
8
import FirstApp from "./apps/first-app";
export default function() {
  return [
    {
      app: FirstApp
    }
  ];
}

If you click on the new icon you will see an application window which can be draged inside the current stage, minimized, maximized, collapsed and closed.

Back to top