Skip to content

Application Footer

Now let's walk up to the application level. As we know an application have a main stage in which we have loaded all the times other components. But an application can also have a second stage: The footer.

What are we learning here?

  • Enable the footer of an Application component
  • Use the helper class Buttons

To enable the footer we have to set another property in our defaults which define the appearance of the application panel.

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
import { Application, Layout } 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";
export default class extends Application {
  static defaults = {
    "@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)
    ]);
  }
}

From this point on we have an additional stage called footer in which we can load components. First we will split the footer into two parts. We use our simple Flexbox component.

Into the left stage of the footer we load our well known "component basics" toolbar. The buttons will call the component methods of the application with { target: this }:

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
import { Application, Layout, Flexbox } 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 = {
    "@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
    });
  }
}

We load into the right part of the footer we want to add just a close button. There is a helper library called Buttons that provide a very easy method to create standard buttons. We will explain later some more usefull standard buttons. Our button "close" that we use here call the destroy() method of the application component.

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
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 = {
    "@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));
  }
}

Now you can can show hints, block and load inline applications at the level of the application itself.

Here you see the first time what you may have already guessed: Everything is a component. Thus, almost all functions that exist for a widget are also available to the application.