Application: Application in Stages
What are we learning here?
- How to load an application into a stage full sized
We will now consider a special case. An application component can of course be loaded into any
stage. But if you want to use an application component in a stage integrated into a layout, the
frame of an application component will initially be a problem.
Let's stay and demonstrate this with our application flexbox-component
. In the three stages we
load three different application components that we have already created. We replace the loading of
the Message
component with our applications:
src/demo/apps/flexbox-component/content.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 | import { Flexbox } from "@codecoupler/cc-ui";
import ComponentBasics from "../component-basics";
import CanvasVsWidgetScroll from "../canvas-vs-widget-scroll";
import CanvasVsWidgetLayout from "../canvas-vs-widget-layout";
export default class extends Flexbox {
static defaults = {
"@codecoupler": {
flexbox: {
root: {
type: "row",
content: [
{
type: "stage",
id: "main",
private: true,
style: { width: "50%" },
class: "bg-success text-white"
},
{
type: "column",
grow: true,
content: [
{
type: "stage",
id: "sidebar-top",
style: { height: "50%" },
class: "bg-primary text-white"
},
{
type: "stage",
id: "sidebar-bottom",
style: { height: "50%" },
class: "bg-warning text-black"
}
]
}
]
}
}
}
};
async start() {
this.stage.load(ComponentBasics);
this.getStage("sidebar-top").load(CanvasVsWidgetScroll);
this.getStage("sidebar-bottom").load(CanvasVsWidgetLayout);
}
}
|
Looks weird? Exactly. We want to load the application components without the title and borders to
look like a canvas or widget component.
So we will set the panel to the status "fullsize" and disable the footer by overriding the
application defaults:
src/demo/apps/flexbox-component/content.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 | import { Flexbox } from "@codecoupler/cc-ui";
import ComponentBasics from "../component-basics";
import CanvasVsWidgetScroll from "../canvas-vs-widget-scroll";
import CanvasVsWidgetLayout from "../canvas-vs-widget-layout";
export default class extends Flexbox {
static defaults = {
"@codecoupler": {
flexbox: {
root: {
type: "row",
content: [
{
type: "stage",
id: "main",
private: true,
style: { width: "50%" },
class: "bg-success text-white"
},
{
type: "column",
grow: true,
content: [
{
type: "stage",
id: "sidebar-top",
style: { height: "50%" },
class: "bg-primary text-white"
},
{
type: "stage",
id: "sidebar-bottom",
style: { height: "50%" },
class: "bg-warning text-black"
}
]
}
]
}
}
}
};
async start() {
this.stage.load(ComponentBasics, {
"@codecoupler": { panel: { setStatus: "fullsize", footerToolbar: null } }
});
this.getStage("sidebar-top").load(CanvasVsWidgetScroll, {
"@codecoupler": { panel: { setStatus: "fullsize" } }
});
this.getStage("sidebar-bottom").load(CanvasVsWidgetLayout, {
"@codecoupler": { panel: { setStatus: "fullsize" } }
});
}
}
|