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.

Let's start with the absolute minimum with a file testing-buttons.js in a subfolder apps:

apps/testing-buttons.js

1
2
3
4
5
6
7
import { Application } from "@codecoupler/cc-ui";
export default class extends Application {
  static ui = {
    name: "Testing Buttons",
    iconHtml: '<i class="fas fa-seedling fa-fw"></i>'
  };
}

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.

Now let's go back to our sidebar items definition and integrate our new application:

apps.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import TestingButtonsApp from "./apps/testing-buttons.js";
export default function() {
  return [
    {
      ui: {
        iconHtml: '<i class="far fa-smile fa-fw"></i>',
        name: "Just an Alert"
      },
      app: () => {
        alert("Hello World");
      }
    },
    {
      app: TestingButtonsApp
    }
  ];
}

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.

Let's start modifying the appearance. To do this you have to implement a method init. Inwith this method you have to call super.init(config) with an object as argument with different properties. We will now look at first into the prorperty panel:

apps/testing-buttons.js

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

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.