04 View and Panels

FlexPane vs Panel vs View

• FlexPane - The container component which builds the Layout.
  • View - Container for any UI component
    • For e.g. A Datagrid
  • Panel - The component rendered by FlexPane to show a supporting feature/functionality.
    • For e.g. Sources, Layers etc.

---

FlexPane needs a configuration as input to render a Panel/PanelGroup. This configuration is called PaneConfig

Example Pane Configuration that renders a View

      {
        id: "8bfjcf98sd9",
        type: "pane",
        placement: "middle:center:main",
        size: "auto",
        props: {
          dropAllowed: {},
          hasAutosize: true,
          isLocked: true,
          noBorder: true,
          minWidth: 400,
          minHeight: 330,
        },
        settings: { view: { name: "datagrid" } },
      }

⠀ ⠀ ⠀

Example Pane Configuration that renders a single Panel

        {
          id: "k36aatvm9l",
          type: "pane",
          size: 258.2,
          placement: "middle:left",
          props: {
            isClosable: true,
            isClosed: true,
            // noHBorder: true,
          },
          settings: {
            active: 0,
            tabs: [
              { id: "advxfmpwzga", name: "query-history", icon: "query-history", label: "Query History", },
            ],
          },
        }

⠀ ⠀ ⠀

Example Pane Configuration that renders a Panel tabs

          {
            id: "k36aatvm9l",
            type: "pane",
            placement: "middle:left",
            size: 258.2,
            props: {
              isClosable: true,
              isClosed: true,
            },
            settings: {
              active: 0,
              tabs: [
                {
                  id: "8agq7s6z1c4",
                  name: "navigator",
                  icon: "navigator",
                  label: "Navigator",
                },
                {
                  id: "advxfmpwzga",
                  name: "query-history",
                  icon: "query-history",
                  label: "Query History",
                },
                {
                  id: "a9hyv2nilys",
                  name: "adjustments",
                  icon: "adjustments",
                  label: "Adjustments",
                },
              ],
            },
          },

⠀ ⠀ ⠀

Next : Panels Layout