Skip to content

Application: Application Footer

What are we learning here?

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

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.

To explain the details we will switch back to our flexbox application:

src/root.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { Component, Flexbox } from "@codecoupler/cc-ui";
import LoadingComponents from "./demo/components/loading-components";
import TestApp from "./demo/apps/flexbox-component";
export default class extends Component {
  async start() {
    await this.stage.load(Flexbox, {
      root: {
        type: "column",
        content: [
          { type: "stage", id: "top", class: "card-header" },
          { type: "stage", id: "$", grow: true }
        ]
      }
    });
    await this.getStage("top").load(LoadingComponents);
    await this.stage.load(TestApp);
  }
}

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

src/demo/apps/flexbox-component/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import { Application } from "@codecoupler/cc-ui";
import Content from "./content.js";
export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "1000 510",
        headerTitle: "Test Flexbox Features",
        footerToolbar: true
      }
    }
  };
  async start() {
    await this.stage.load(Content);
  }
}

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

Into the left stage of the footer we load our LoadingComponents widget.

We load into the right part of the footer we load a component named Buttons which display just a close button. The component Buttons 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/demo/apps/flexbox-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
import { Application, Buttons, Flexbox } from "@codecoupler/cc-ui";
import LoadingComponents from "../../components/loading-components";
import Content from "./content.js";
export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "1000 510",
        headerTitle: "Test Flexbox Features",
        footerToolbar: true
      }
    }
  };
  async start() {
    await this.stage.load(Content);
    await this.getStage("footer").load(Flexbox, {
      "@codecoupler": {
        flexbox: {
          root: {
            type: "row",
            content: [
              { type: "stage", id: "ftr-left", grow: true },
              { type: "stage", id: "$" }
            ]
          }
        }
      }
    });
    await this.getStage("ftr-left").load(LoadingComponents);
    await this.getStage("footer").load(Buttons, {
      buttons: "close",
      context: this
    });
  }
}