Flexbox: Extend Layout

What are we learning here?

• How to create an component based on Layout

The layout component can also be used to start directly with a layout. The new component can extend Layout. Implement a component that extends Layout instead of loading into a stage would look like:

import { Application, Layout, Message } from "@codecoupler/cc-ui";
export default class extends Layout {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "900 500",
        headerTitle: "Test Layout Features"
      },
      layout: {
        reordable: true,
        resizable: true,
        root: {
          type: "row",
          content: [
            { id: "first", type: "stage", size: "60%", title: "First" },
            {
              type: "column",
              content: [
                { id: "second", type: "stage", title: "Second" },
                {
                  type: "stack",
                  size: "60%",
                  content: [
                    { id: "third", type: "stage", title: "Third" },
                    { id: "fourth", type: "stage", title: "Fourth" }
                  ]
                }
              ]
            }
          ]
        }
      }
    }
  };
  async start() {
    await Promise.all([
      this.getStage("first").load(Message, { text: "First" }),
      this.getStage("second").load(Message, { text: "Second" }),
      this.getStage("third").load(Message, { text: "Third" }),
      this.getStage("fourth").load(Message, { text: "Fourth" })
    ]);
  }
}

Use Namespaced Option if Extending

If you want to extend Layout the namespaced options must be used instead the options on the top level.

Stages by default public

Stages of the layout component are by default public. You can set optional private: true to make the stage private. If you want to use for example the id main you must create the stage as private.