Skip to content

Launcher

One of the components that use a registry is called Launcher. It will display the icons of the registered components and load the component on click.

Let's add first a sidebar to our root component and load into the sidebar the launcher component.

As we do not starting a component anymore we will comment out the lines which loads our "TestApp".

src/root.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
import { Component, Flexbox, Launcher } from "@codecoupler/cc-ui";
import LoadingComponents from "./demo/components/loading-components";
//import TestApp from "./demo/apps/flexbox-component";
import apps from "./apps";
export default class extends Component {
  async start() {
    this.registry.add(apps);
    await this.stage.load(Flexbox, {
      root: {
        type: "row",
        content: [
          {
            type: "stage",
            shrink: false,
            id: "sidebar",
            class: "bg-secondary text-white p-2"
          },
          {
            type: "column",
            grow: true,
            content: [
              { type: "stage", id: "top", class: "card-header" },
              { type: "stage", id: "$", grow: true }
            ]
          }
        ]
      }
    });
    await this.getStage("top").load(LoadingComponents, { target: this });
    await this.getStage("sidebar").load(Launcher, { registry: this.registry });
    //await this.stage.load(TestApp);
  }
}

Now we have a sidebar from which we can launch all components, but the display is a bit sparse.

Let's add some icons for our groups:

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
import ComponentBasics from "./demo/apps/component-basics";
import ComponentBasicsVue from "./demo/apps/component-basics-vue";
import StagesFlexbox from "./demo/apps/stages-flexbox";
import StageLevels from "./demo/apps/stage-levels";
import LayoutComponent from "./demo/apps/layout-component";
import FlexboxComponent from "./demo/apps/flexbox-component";
import CanvasVsWidgetScroll from "./demo/apps/canvas-vs-widget-scroll";
import CanvasVsWidgetLayout from "./demo/apps/canvas-vs-widget-layout";
import Mockup from "./demo/apps/mockup";
export default {
  basicsJs: {
    id: "ComponentBasics",
    component: ComponentBasics
  },
  basicsVue: {
    id: "ComponentBasicsVue",
    component: ComponentBasicsVue
  },
  testing: {
    name: "Testing Concepts",
    iconHtml: '<i class="fas fa-vial fa-fw"></i>',
    type: "items",
    stages: {
      id: "StagesFlexbox",
      component: StagesFlexbox
    },
    levels: {
      id: "StageLevels",
      component: StageLevels
    },
    widgetVsCanvas: {
      name: "Compare Widget & Canvas",
      iconHtml: '<i class="fas fa-exclamation-triangle fa-fw"></i>',
      type: "items",
      layout: {
        id: "CanvasVsWidgetLayout",
        component: CanvasVsWidgetLayout
      },
      scroll: {
        id: "CanvasVsWidgetScroll",
        component: CanvasVsWidgetScroll
      }
    }
  },
  layouting: {
    name: "Layouting Components",
    iconHtml: '<i class="far fa-map fa-fw"></i>',
    type: "items",
    flexbox: {
      id: "FlexboxComponent",
      component: FlexboxComponent
    },
    layout: {
      id: "LayoutComponent",
      component: LayoutComponent
    }
  },
  mockup: {
    id: "Mockup Application",
    component: Mockup
  }
};

Use Fixed Width Icons

In order to get a uniform representation of all components, you should make sure to use the fa-fw class in the iconHtml property.

Components usually have their own visual representation, as we'll learn in the next chapter. This can be overwritten in the registry. We demonstrate this for our mockup application:

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
import ComponentBasics from "./demo/apps/component-basics";
import ComponentBasicsVue from "./demo/apps/component-basics-vue";
import StagesFlexbox from "./demo/apps/stages-flexbox";
import StageLevels from "./demo/apps/stage-levels";
import LayoutComponent from "./demo/apps/layout-component";
import FlexboxComponent from "./demo/apps/flexbox-component";
import CanvasVsWidgetScroll from "./demo/apps/canvas-vs-widget-scroll";
import CanvasVsWidgetLayout from "./demo/apps/canvas-vs-widget-layout";
import Mockup from "./demo/apps/mockup";
export default {
  basicsJs: {
    id: "ComponentBasics",
    component: ComponentBasics
  },
  basicsVue: {
    id: "ComponentBasicsVue",
    component: ComponentBasicsVue
  },
  testing: {
    name: "Testing Concepts",
    iconHtml: '<i class="fas fa-vial fa-fw"></i>',
    type: "items",
    stages: {
      id: "StagesFlexbox",
      component: StagesFlexbox
    },
    levels: {
      id: "StageLevels",
      component: StageLevels
    },
    widgetVsCanvas: {
      name: "Compare Widget & Canvas",
      iconHtml: '<i class="fas fa-exclamation-triangle fa-fw"></i>',
      type: "items",
      layout: {
        id: "CanvasVsWidgetLayout",
        component: CanvasVsWidgetLayout
      },
      scroll: {
        id: "CanvasVsWidgetScroll",
        component: CanvasVsWidgetScroll
      }
    }
  },
  layouting: {
    name: "Layouting Components",
    iconHtml: '<i class="far fa-map fa-fw"></i>',
    type: "items",
    flexbox: {
      id: "FlexboxComponent",
      component: FlexboxComponent
    },
    layout: {
      id: "LayoutComponent",
      component: LayoutComponent
    }
  },
  mockup: {
    id: "Mockup Application",
    component: Mockup,
    name: "Mockup Application",
    iconHtml: '<i class="fas fa-box fa-fw"></i>'
  }
};