Skip to content

Component Manifest

As you can see all the entries of the launcher have the same name in the tooltip and icon. This is because we did never specify the option $manifest in our components.

The options $manifest is one of the so called fixed options. They will always beginn with $. All components rely on these options being at the root level of a component's options.

Furthermore all components expect that the option $manifest is also defined in the default options of a component.

We will work this into one of our components as an example:

src/apps/demo/layout-component/index.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import { Application, Layout, Flexbox, Box, Buttons } from "@codecoupler/cc-ui";
import WidgetBasics from "../widget-basics";
import SingleRoot from "../single-root";
import WidgetBasicsVue from "../widget-basics-vue";
import UnusableLayout from "../canvas-vs-widget-layout";
import UnusableScroll from "../canvas-vs-widget-scroll";
import StageLevels from "../stage-levels";
import StagesFlexbox from "../stages-flexbox";
import SimpleBox from "../simple-box";
import LoadingComponents from "../../widgets/loading-components";
export default class extends Application {
  static defaults = {
    $manifest: {
      name: "Testing All Features",
      iconHtml: '<i class="fas fa-book-reader fa-fw"></i>'
    },
    "@codecoupler": {
      panel: {
        panelSize: "1165 630",
        headerTitle: "Test Layout Features",
        footerToolbar: true
      }
    }
  };
  async start() {
    await this.stage.load(Layout, {
      reordable: true,
      resizable: true,
      root: {
        type: "row",
        content: [
          {
            type: "stack",
            size: "60%",
            content: [
              { id: "first", type: "stage", title: "Basics" },
              { id: "sixth", type: "stage", title: "Layers" },
              { id: "seventh", type: "stage", title: "Flexbox" },
              { id: "eighth", type: "stage", title: "Box" }
            ]
          },
          {
            type: "column",
            content: [
              {
                type: "stack",
                content: [
                  { id: "second", type: "stage", title: "Single Root" },
                  { id: "fifth", type: "stage", title: "No Scroll" }
                ]
              },
              {
                type: "stack",
                size: "60%",
                content: [
                  { id: "third", type: "stage", title: "Vue" },
                  { id: "fourth", type: "stage", title: "No Height" }
                ]
              }
            ]
          }
        ]
      }
    });
    let options = {
      "@codecoupler": { application: { panel: { setStatus: "fullsize" } } }
    };
    await Promise.all([
      this.getStage("first").load(WidgetBasics, options),
      this.getStage("second").load(SingleRoot, options),
      this.getStage("third").load(WidgetBasicsVue, options),
      this.getStage("fourth").load(UnusableLayout, options),
      this.getStage("fifth").load(UnusableScroll, options),
      this.getStage("sixth").load(StageLevels, options),
      this.getStage("seventh").load(StagesFlexbox, options),
      this.getStage("eighth").load(SimpleBox, options)
    ]);
    await this.getStage("footer").load(Flexbox, {
      "@codecoupler": {
        flexbox: {
          root: {
            type: "row",
            content: [
              { type: "stage", id: "footer-left" },
              { type: "stage", id: "$", grow: true }
            ]
          }
        }
      }
    });
    await this.getStage("footer-left").load(LoadingComponents, {
      target: this
    });
    let footer = await this.getStage("footer").load(Box);
    footer.$box.append(Buttons.get("close", this));
  }
}

The launcher component takes into account two other places where a component manifest can be overwritten. In the options of a registry item and one level above in the registry item. Let's try it on two components in the registry:

src/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
64
65
66
67
68
import JSWidgetBasics from "./demo/apps/widget-basics";
import JSWidgetSingleRoot from "./demo/apps/single-root";
import JSCanvasVsWidgetScroll from "./demo/apps/canvas-vs-widget-scroll";
import JSCanvasVsWidgetLayout from "./demo/apps/canvas-vs-widget-layout";
import JSSimpleBox from "./demo/apps/simple-box";
import JSStagesFlexbox from "./demo/apps/stages-flexbox";
import JSStageLevels from "./demo/apps/stage-levels";
import VueWidgetBasics from "./demo/apps/widget-basics-vue";
import JSLayoutComponent from "./demo/apps/layout-component";
export default [
  {
    name: "Widget Basics",
    iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
    items: [
      {
        name: "JavaScript",
        iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
        items: [
          { id: "JSWidgetBasics", component: JSWidgetBasics },
          { id: "JSWidgetSingleRoot", component: JSWidgetSingleRoot }
        ]
      },
      {
        name: "Vue.js",
        iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
        items: [{ id: "VueWidgetBasics", component: VueWidgetBasics }]
      }
    ]
  },
  {
    name: "Canvas, Widget, Box",
    iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
    items: [
      {
        name: "Canvas vs Widget",
        iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
        items: [
          {
            id: "JSCanvasVsWidgetScroll",
            component: JSCanvasVsWidgetScroll
          },
          {
            id: "JSCanvasVsWidgetLayout",
            component: JSCanvasVsWidgetLayout
          }
        ]
      },
      { id: "JSSimpleBox", component: JSSimpleBox }
    ]
  },
  {
    id: "JSStagesFlexbox",
    component: JSStagesFlexbox,
    options: {
      $manifest: {
        name: "Stages in Flexbox",
        iconHtml: '<i class="fas fa-vr-cardboard fa-fw"></i>'
      }
    }
  },
  {
    id: "JSStageLevels",
    component: JSStageLevels,
    name: "Stage Levels",
    iconHtml: '<i class="fas fa-vihara fa-fw"></i>'
  },
  { id: "JSLayoutComponent", component: JSLayoutComponent }
];

Ok, now let's add an icon and description for all our components:

src/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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import JSWidgetBasics from "./demo/apps/widget-basics";
import JSWidgetSingleRoot from "./demo/apps/single-root";
import JSCanvasVsWidgetScroll from "./demo/apps/canvas-vs-widget-scroll";
import JSCanvasVsWidgetLayout from "./demo/apps/canvas-vs-widget-layout";
import JSSimpleBox from "./demo/apps/simple-box";
import JSStagesFlexbox from "./demo/apps/stages-flexbox";
import JSStageLevels from "./demo/apps/stage-levels";
import VueWidgetBasics from "./demo/apps/widget-basics-vue";
import JSLayoutComponent from "./demo/apps/layout-component";
export default [
  {
    name: "Widget Basics",
    iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
    items: [
      {
        name: "JavaScript",
        iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
        items: [
          {
            id: "JSWidgetBasics",
            component: JSWidgetBasics,
            name: "Widget Basics",
            iconHtml: '<i class="fas fa-birthday-cake fa-fw"></i>'
          },
          {
            id: "JSWidgetSingleRoot",
            component: JSWidgetSingleRoot,
            name: "Single Root",
            iconHtml: '<i class="fas fa-eye-dropper fa-fw"></i>'
          }
        ]
      },
      {
        name: "Vue.js",
        iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
        items: [
          {
            id: "VueWidgetBasics",
            component: VueWidgetBasics,
            name: "Vue.js Basics",
            iconHtml: '<i class="fab fa-vuejs fa-fw"></i>'
          }
        ]
      }
    ]
  },
  {
    name: "Canvas, Widget, Box",
    iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
    items: [
      {
        name: "Canvas vs Widget",
        iconHtml: '<i class="fas fa-angle-double-right fa-fw"></i>',
        items: [
          {
            id: "JSCanvasVsWidgetScroll",
            component: JSCanvasVsWidgetScroll,
            name: "No Scroll",
            iconHtml: '<i class="fas fa-heart-broken fa-fw"></i>'
          },
          {
            id: "JSCanvasVsWidgetLayout",
            component: JSCanvasVsWidgetLayout,
            name: "No Height",
            iconHtml: '<i class="fas fa-car-crash fa-fw"></i>'
          }
        ]
      },
      {
        id: "JSSimpleBox",
        component: JSSimpleBox,
        name: "The Box",
        iconHtml: '<i class="fas fa-box fa-fw"></i>'
      }
    ]
  },
  {
    id: "JSStagesFlexbox",
    component: JSStagesFlexbox,
    options: {
      $manifest: {
        name: "Stages in Flexbox",
        iconHtml: '<i class="fas fa-vr-cardboard fa-fw"></i>'
      }
    }
  },
  {
    id: "JSStageLevels",
    component: JSStageLevels,
    name: "Stage Levels",
    iconHtml: '<i class="fas fa-vihara fa-fw"></i>'
  },
  { id: "JSLayoutComponent", component: JSLayoutComponent }
];