Skip to content

Application Direct Initialization

If you look into our apps.js you will see, that we have defined application over a function or an Application Class. In some cases you do not want to write an Application Class because you do not need encapsulated logic. For example if the application should just start one widget with specific parameters.

For this case you can define an application directly, specifying an object that would be used in the init method as argument for the super.init(config) call. Let's define an application directly in the apps.js:

apps.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import { Calendar, Layout } from "@codecoupler/cc-ui";
import TestingButtonsApp from "./apps/testing-buttons";
export default function() {
  return [
    {
      ui: {
        iconHtml: '<i class="far fa-smile fa-fw"></i>',
        name: "Just an Alert"
      },
      app: () => {
        alert("Hello World");
      }
    },
    {
      app: TestingButtonsApp,
      id: "TestApp1",
      options: {
        text: "My First Application"
      }
    },
    {
      ui: {
        iconHtml: '<i class="fas fa-tree fa-fw"></i>'
      },
      app: TestingButtonsApp,
      id: "TestApp2",
      options: {
        text: "My Second Application"
      }
    },
    {
      ui: {
        iconHtml: '<i class="fas fa-hand-sparkles fa-fw"></i>',
        name: "Date Selection"
      },
      panel: {
        header: true,
        setStatus: "normalized"
      },
      id: "DateSelection",
      app: {
        panel: {
          panelSize: "300 350",
          headerControls: "closeonly xs",
          headerTitle: "Select..."
        },
        widget: {
          widget: Layout,
          options: {
            root: {
              type: "widget",
              widget: Calendar,
              options: {
                onlyBackgroundEvents: true,
                themeToolbar: "small"
              }
            }
          }
        }
      }
    }
  ];
}

Now you see a hand with sparkles. Clicking on it an application will be started with only one widget.

In the apps.js you see that we have added an ui property to show an icon and a panel property outside the application definition. This overwrite the global system setting to open each app maximized and without header. We have to define these options outside the application object, because the panel options that define how to start a panel have always a higher priority as the panel options defined by the application itself.